DevTools resets Store after Fast Refresh force unmount

Fast Refresh sometimes force remounts a component in a way that DevTools can't handle. It could throw but that's a bad user experience. Or it could ignore the unmount but then Store might end up with a duplicate node. So instead, a fallback is to completely reset the Store. This is costly but since Fast Refresh is only used in DEV builds, it should be okay.

packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js

@@ -131,25 +131,48 @@ describe('Fast Refresh', () => {
       };
 
       function Child() {
-        return null;
+        return <div />;
       };
 
       export default Parent;
     `);
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="A">
+    `);
+
+    let element = container.firstChild;
+    expect(container.firstChild).not.toBe(null);
+
+    patch(`
+      function Parent() {
+        return <Child key="A" />;
+      };
+
+      function Child() {
+        return <div />;
+      };
 
+      export default Parent;
+    `);
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Parent>
             <Child key="A">
     `);
 
+    // State is preserved; this verifies that Fast Refresh is wired up.
+    expect(container.firstChild).toBe(element);
+    element = container.firstChild;
+
     patch(`
       function Parent() {
         return <Child key="B" />;
       };
 
       function Child() {
-        return null;
+        return <div />;
       };
 
       export default Parent;
@@ -159,6 +182,9 @@ describe('Fast Refresh', () => {
         ▾ <Parent>
             <Child key="B">
     `);
+
+    // State is reset because hooks changed.
+    expect(container.firstChild).not.toBe(element);
   });
 
   it('should not break when there are warnings in between patching', () => {
@@ -168,10 +194,8 @@ describe('Fast Refresh', () => {
 
       export default function Component() {
         const [state, setState] = useState(1);
-
         console.warn("Expected warning during render");
-
-        return <div />;
+        return null;
       }
     `);
     });
@@ -181,56 +205,56 @@ describe('Fast Refresh', () => {
           <Component> ⚠
     `);
 
-    let element = container.firstChild;
-
     withErrorsOrWarningsIgnored(['Expected warning during render'], () => {
       patch(`
-      const {useState} = React;
+      const {useEffect, useState} = React;
 
       export default function Component() {
         const [state, setState] = useState(1);
-
         console.warn("Expected warning during render");
-
-        return <div id="one" />;
+        return null;
       }
     `);
     });
-
-    // This is the same component type, so the warning count carries over.
     expect(store).toMatchInlineSnapshot(`
       ✕ 0, ⚠ 2
       [root]
           <Component> ⚠
     `);
 
-    // State is preserved; this verifies that Fast Refresh is wired up.
-    expect(container.firstChild).toBe(element);
-    element = container.firstChild;
-
     withErrorsOrWarningsIgnored(['Expected warning during render'], () => {
       patch(`
       const {useEffect, useState} = React;
 
       export default function Component() {
-        const [state, setState] = useState(3);
+        const [state, setState] = useState(1);
         useEffect(() => {});
-
         console.warn("Expected warning during render");
-
-        return <div id="one" />;
+        return null;
       }
     `);
     });
-
-    // This is a new component type, so the warning count has been reset.
     expect(store).toMatchInlineSnapshot(`
       ✕ 0, ⚠ 1
       [root]
           <Component> ⚠
     `);
 
-    // State is reset because hooks changed.
-    expect(container.firstChild).not.toBe(element);
+    withErrorsOrWarningsIgnored(['Expected warning during render'], () => {
+      patch(`
+      const {useEffect, useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        console.warn("Expected warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 1
+      [root]
+          <Component> ⚠
+    `);
   });
 });