First component loses state on first hot reload

If I modify a functional component, on the first hot reload, the first component loses its internal state. Subsequent reloads are OK. It seems to depend on the order the components are imported in, so may be related to #455. Changing the order of imports of FunctionDefault and FunctionNamed changes which one is affected, but one of them always is.

Steps to reproduce:

1. Apply the diff below to the current git repository (319e650147c74127c7a4d92328a692f5233efc15). This adds some state to the two functional components, and deletes the class components.
2. Start the dev server with yarn start
3. Load the page in the browser, and click the button a few times to modify the state.
4. Modify the functional components, for example: sed -E 's/more/less/g' -i ./*.tsx

Patch

diff --git a/examples/typescript-with-tsc/src/App.tsx b/examples/typescript-with-tsc/src/App.tsx
index c7def2a..dbd820a 100644
--- a/examples/typescript-with-tsc/src/App.tsx
+++ b/examples/typescript-with-tsc/src/App.tsx
@@ -9,8 +9,6 @@ const LazyComponent = lazy(() => import('./LazyComponent'));
 function App() {
   return (
     <div>
-      <ClassDefault />
-      <ClassNamed />
       <FunctionDefault />
       <FunctionNamed />
       <Suspense fallback={<h1>Loading</h1>}>
diff --git a/examples/typescript-with-tsc/src/FunctionDefault.tsx b/examples/typescript-with-tsc/src/FunctionDefault.tsx
index f886ae3..8022beb 100644
--- a/examples/typescript-with-tsc/src/FunctionDefault.tsx
+++ b/examples/typescript-with-tsc/src/FunctionDefault.tsx
@@ -1,5 +1,12 @@
+import { useState } from "react";
+
 function FunctionDefault() {
-  return <h1>Default Export Function</h1>;
+  let [state, setState] = useState(1);
+
+  return (<>
+    <h1>Default Export Function{"!".repeat(state)}</h1>
+    <button onClick={() => setState(state => state + 1)}>more</button>
+  </>);
 }
 
 export default FunctionDefault;
diff --git a/examples/typescript-with-tsc/src/FunctionNamed.tsx b/examples/typescript-with-tsc/src/FunctionNamed.tsx
index b807a43..35b1127 100644
--- a/examples/typescript-with-tsc/src/FunctionNamed.tsx
+++ b/examples/typescript-with-tsc/src/FunctionNamed.tsx
@@ -1,3 +1,10 @@
+import { useState } from "react";
+
 export function FunctionNamed() {
-  return <h1>Named Export Function</h1>;
+  let [state, setState] = useState(1);
+
+  return (<>
+    <h1>Named Export Function{"!".repeat(state)}</h1>
+    <button onClick={() => setState(state => state + 1)}>more</button>
+  </>);
 }

Observed result

The page updates, but the state of the first component is lost (i.e. reset to the initial state). The second component maintains its state. This only occurs on the first hot reload, subsequent modifications to the components correctly preserve state.

Expected result

Both functional components should maintain their state after the modification causes a hot reload.

[pmmmwh]

Hey, thanks for the debugging. I’ve identified a fix!

[Jack-Works]

@pmmmwh So the problem is

webpack_require.$Refresh$.signature = webpack_require.$Refresh$.runtime.createSignatureFunctionForTransform;

This code is called too late. Therefore react-refresh missed the first component signature