Expensify - Compiler with Fast Refresh compatibility issue on < React 19

[blazejkustra]

Hi 👋 I work on Expensify’s React Native App (it’s open source, you can check it out here). I'm glad to be a part of this working group and I appreciate the invite!

For some context, we have been using react-compiler with React 18.3.1 for more than three months now. Overall, the transition was smooth with just one or two regressions. Performance-wise we haven’t noticed big differences (more info in the PR); to give you some numbers, 900 out of 1200 components were compiled initially.

We didn't notice it at first, but Fast Refresh on mobile isn’t fully functioning because of the compiler. After making changes to a component, the updated code is sent to the device, but no changes are visible on the screen (I think this is due to some memoization optimization). To see the changes the component has to be re-rendered. Here is a video:

iOS simulator

ios-issue.mov

React Native isn’t compatible with React 19, so I couldn’t test if the above bug occurs on the newer version. However, since Expensify also supports the web platform, I went ahead and configured Fast Refresh for it. Unfortunately, on the web I faced more problems than on mobile:

Couple of issues

1. Same as on natives, no updates in the UI after making changes in the code, I have to reload the page each time or force the component to re-render to see the changes:

web-issue.mov

2. App crashes when changing the order of components:

Screen.Recording.2024-10-02.at.19.44.43.mov

3. App crashes when making changes to memo/callback hooks (hard to reproduce):

Screen.Recording.2024-10-02.at.19.45.33.mov

I prepared a minimal reproduction repo if you are interested, you can find the instructions in the README.md. There are two branches, react-18 and react-19 to test if there are any differences. React 19 with compiler and Fast Refresh works flawlessly, at least I couldn’t break it 😄

I wanted to share our experience and raise awareness that Fast Refresh might not work for you on React 18, and while the polyfill seems to work great, it's not the same as using React 19.

[poteto]

@blazejkustra thanks for the report! I think this is because FastRefresh doesn't reset state unless one of the state variables got renamed. Could you try switching out the runtime to using useMemo instead? I would open a PR but the PR checklist looks scary

diff --git a/lib/react-compiler-runtime/index.js b/lib/react-compiler-runtime/index.js
index 54e88d2b703..76d37d3f7e6 100644
--- a/lib/react-compiler-runtime/index.js
+++ b/lib/react-compiler-runtime/index.js
@@ -9,7 +9,7 @@ const React = require('react');
  * than the official API. Better to upgrade to React 19 as soon as we can.
  **/
 export function c(size) {
-  return React.useState(() => {
+  return React.useMemo(() => {
     const $ = new Array(size);
     for (let ii = 0; ii < size; ii++) {
       $[ii] = $empty;
@@ -17,5 +17,5 @@ export function c(size) {
     // @ts-ignore
     $[$empty] = true;
     return $;
-  })[0];
+  }, []);
 }
diff --git a/lib/react-compiler-runtime/package.json b/lib/react-compiler-runtime/package.json
index 3a0323538b6..6c8dacec8d3 100644
--- a/lib/react-compiler-runtime/package.json
+++ b/lib/react-compiler-runtime/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-compiler-runtime",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Runtime for React Compiler",
   "license": "MIT",
   "main": "index.js",
diff --git a/package-lock.json b/package-lock.json
index 33baf6a3508..9c120288182 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -277,7 +277,7 @@
       }
     },
     "lib/react-compiler-runtime": {
-      "version": "0.0.1",
+      "version": "0.0.2",
       "dev": true,
       "license": "MIT",
       "dependencies": {

[blazejkustra]

The PR checklist is indeed scary, no worries 😅 I applied the diff and it helped with Fast Refresh, thank you!

Screen.Recording.2024-10-03.at.21.47.17.mov

[poteto]

thanks for confirming!