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> ⚠
+ `);
  });
 });