Filter out deleted components that are added to the updaters list

Author: lunaruan

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

@@ -752,4 +752,97 @@ describe('ProfilingCache', () => {
     utils.act(() => store.profilerStore.stopProfiling());
     expect(container.textContent).toBe('About');
   });
+
+  it('components that were deleted and added to updaters during the layout phase should not crash', () => {
+    let setBarUnmounted;
+    function Bar() {
+      const [, setState] = React.useState(false);
+
+      React.useLayoutEffect(() => {
+        return () => setState(true);
+      });
+
+      return null;
+    }
+
+    function App() {
+      const [barUnmounted, _setBarUnmounted] = React.useState(false);
+      setBarUnmounted = _setBarUnmounted;
+      return <>{!barUnmounted && <Bar />}</>;
+    }
+
+    const root = ReactDOM.createRoot(document.createElement('div'));
+    utils.act(() => root.render(<App />));
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => setBarUnmounted(true));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const updaters = store.profilerStore.getCommitData(store.roots[0], 0)
+      .updaters;
+    expect(updaters.length).toEqual(1);
+    expect(updaters[0].displayName).toEqual('App');
+  });
+
+  it('components in a deleted subtree and added to updaters during the layout phase should not crash', () => {
+    function Foo() {
+      return <Bar />;
+    }
+
+    let setBarUnmounted;
+    function Bar() {
+      const [, setState] = React.useState(false);
+
+      React.useLayoutEffect(() => {
+        return () => setState(true);
+      });
+
+      return null;
+    }
+
+    function App() {
+      const [barUnmounted, _setBarUnmounted] = React.useState(false);
+      setBarUnmounted = _setBarUnmounted;
+      return <>{!barUnmounted && <Foo />}</>;
+    }
+
+    const root = ReactDOM.createRoot(document.createElement('div'));
+    utils.act(() => root.render(<App />));
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => setBarUnmounted(true));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const updaters = store.profilerStore.getCommitData(store.roots[0], 0)
+      .updaters;
+    expect(updaters.length).toEqual(1);
+    expect(updaters[0].displayName).toEqual('App');
+  });
+
+  it('components that were deleted should not be added to updaters during the passive phase', () => {
+    let setBarUnmounted;
+    function Bar() {
+      const [, setState] = React.useState(false);
+      React.useEffect(() => {
+        return () => setState(true);
+      });
+
+      return null;
+    }
+
+    function App() {
+      const [barUnmounted, _setBarUnmounted] = React.useState(false);
+      setBarUnmounted = _setBarUnmounted;
+      return <>{!barUnmounted && <Bar />}</>;
+    }
+
+    const root = ReactDOM.createRoot(document.createElement('div'));
+    utils.act(() => root.render(<App />));
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => setBarUnmounted(true));
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    const updaters = store.profilerStore.getCommitData(store.roots[0], 0)
+      .updaters;
+    expect(updaters.length).toEqual(1);
+    expect(updaters[0].displayName).toEqual('App');
+  });
 });

packages/react-devtools-shared/src/backend/renderer.js

@@ -2573,7 +2573,9 @@ export function attach(
 
   function getUpdatersList(root): Array<SerializedElement> | null {
     return root.memoizedUpdaters != null
-      ? Array.from(root.memoizedUpdaters).map(fiberToSerializedElement)
+      ? Array.from(root.memoizedUpdaters)
+          .filter(fiber => getFiberIDUnsafe(fiber) !== null)
+          .map(fiberToSerializedElement)
       : null;
   }