Support Fast Refresh

Describe the feature

We’ve landed Fast Refresh on React Native master. You can try it if you build all Metro packages from master and replace them in node_modules of RNTester.

Motivation

It would be nice if Haul could replace react-hot-loader or other techniques with Fast Refresh because:

• Fast Refresh doesn’t create semantic differences in behavior (so it’s safe to always leave on, unlike solutions based on react-hot-loader and similar tools)
• Fast Refresh fully supports function components and Hooks, including cases where you add or remove Hooks
• Fast Refresh gracefully recovers from errors

It likely also fixes hot reloading problems with navigation libraries because it’s fully integrated with React. (Although I don’t have a test case to verify that.)

It would also unify the behavior with mainline React Native.

But How?

I’d be happy to chat with someone to give an overview of how the new system works. For a 100% match in behavior we might need some new hooks from webpack, but you should be able to get reasonably close today too.

[thymikee]

We develop the next version of haul on next branch and disabled hot loader because it was just too hacky. We’re happy to give Fast Refresh a try. Cc @zamotany who’s developing Haul at the moment

[zamotany]

To anyone interested in the issue.

There’s a common misconception that just because something is built for Webpack, it will work out of the box for React Native with Haul. 90% of the time it doesn’t. Anything that’s. being built for Webpack targets web and uses browser API.

From the investigation done some time ago here are the takeaways what would have to be done in order to support React Refresh in Haul. The fast refresh is terribly complex issue and it would require major changes and additions to support. As a base for investigation I did some time ago, I used https://github.com/pmmmwh/react-refresh-webpack-plugin:

1. New React Refresh plugin should be created for Haul with React Native specifics in mind. It would require a lot of resources to port/workaround pmmmwh/react-refresh-webpack-plugin usage of browser specific APIs, because in Haul to support RN platform there’a a lot of tweaking and additional code that has to run in specific order. With the way pmmmwh/react-refresh-webpack-plugin is built, this order is not kept which results in crashes.

2. Some tweaking in Webpack config will be necessary. For sure adding a HotModuleReplacementPlugin. Given my experience with working with this plugin, it also assumes that the browser APIs will be present, which means we would need to workaround or hack this usage somehow.

3. To support HotModuleReplacementPlugin (which is needed to support React Refresh plugin) there’s a need for major refactor for the server/compiler architecture that Haul is currently using. For each platform it would need a separate Webpack Hot Middleware so essentially we would need for each platform:

   • A platform-specific Webpack compiler (eg. Webpack compiler for iOS)
   • A platform-specific packager server (eg. packager server for iOS)
   • A platform-specific Webpack hot middleware injected into the platform-specific packager server

4. And then a single proxy packager server that would proxy requests for specific platform to each platform-specific packager server. The platform-specific Webpack compiler, platform-specific server and platform-specific hot middleware together will have to be spawned in a separate process/thread.

To summarise: there are a lot of moving parts to get this working and it requires extensive/deep knowledge about how Webpack works - more specifically what parts are put into the final bundle, how the module system and Webpack logic working in the bundle and how HotModuleReplacementPlugin itself works.