fix deleted components added to the memoized updaters list

Author: lunaruan

packages/react-reconciler/src/ReactFiberCommitWork.new.js

@@ -80,6 +80,7 @@ import {
   LayoutMask,
   PassiveMask,
   Visibility,
+  Deletion,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {
@@ -1212,6 +1213,8 @@ function commitUnmount(
 ): void {
   onCommitUnmount(current);
 
+  current.flags |= Deletion;
+
   switch (current.tag) {
     case FunctionComponent:
     case ForwardRef:

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

@@ -12,7 +12,7 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {StackCursor} from './ReactFiberStack.new';
-import type {Flags} from './ReactFiberFlags';
+import {ChildDeletion, Deletion, Flags} from './ReactFiberFlags';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 
 import {
@@ -486,7 +486,9 @@ export function scheduleUpdateOnFiber(
     // example, during an input event.
     if (enableUpdaterTracking) {
       if (isDevToolsPresent) {
-        addFiberToLanesMap(root, fiber, lane);
+        if ((fiber.flags & Deletion) === NoFlags) {
+          addFiberToLanesMap(root, fiber, lane);
+        }
       }
     }
 

packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js

@@ -41,12 +41,14 @@ describe('updaters', () => {
         }
         const schedulerTags = [];
         const schedulerTypes = [];
-        fiberRoot.memoizedUpdaters.forEach(fiber => {
-          schedulerTags.push(fiber.tag);
-          schedulerTypes.push(fiber.elementType);
-        });
-        allSchedulerTags.push(schedulerTags);
-        allSchedulerTypes.push(schedulerTypes);
+        if (fiberRoot.memoizedUpdaters.size > 0) {
+          fiberRoot.memoizedUpdaters.forEach(fiber => {
+            schedulerTags.push(fiber.tag);
+            schedulerTypes.push(fiber.elementType);
+          });
+          allSchedulerTags.push(schedulerTags);
+          allSchedulerTypes.push(schedulerTypes);
+        }
       }),
       onCommitUnmount: jest.fn(() => {}),
       onPostCommitRoot: jest.fn(() => {}),
@@ -435,4 +437,166 @@ describe('updaters', () => {
     // Verify no outstanding flushes
     Scheduler.unstable_flushAll();
   });
+
+  it('components that were deleted should not be added to updaters during the layout phase', () => {
+    const {
+      FunctionComponent,
+      HostRoot,
+    } = require('react-reconciler/src/ReactWorkTags');
+
+    let setBarUnmounted;
+    function Bar() {
+      const [, setState] = React.useState(false);
+      Scheduler.unstable_yieldValue('Bar render');
+
+      React.useLayoutEffect(() => {
+        return () => {
+          Scheduler.unstable_yieldValue('useLayoutEffect Bar unmount');
+          setState(true);
+        };
+      });
+
+      return null;
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App render');
+      const [barUnmounted, _setBarUnmounted] = React.useState(false);
+      setBarUnmounted = _setBarUnmounted;
+      return <>{!barUnmounted && <Bar />}</>;
+    }
+    const root = ReactDOM.createRoot(document.createElement('div'));
+    act(() => {
+      root.render(<App />);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'App render',
+      'Bar render',
+      'onCommitRoot',
+    ]);
+    expect(allSchedulerTags).toEqual([[HostRoot]]);
+
+    act(() => {
+      setBarUnmounted(true);
+      expect(Scheduler).toFlushAndYield([
+        'App render',
+        'useLayoutEffect Bar unmount',
+        'onCommitRoot',
+        'onCommitRoot',
+      ]);
+    });
+
+    expect(allSchedulerTags).toEqual([[HostRoot], [FunctionComponent]]);
+    expect(allSchedulerTypes).toEqual([[null], [App]]);
+  });
+
+  it('components in a deleted subtree should not be added to updaters during the layout phase', () => {
+    const {
+      FunctionComponent,
+      HostRoot,
+    } = require('react-reconciler/src/ReactWorkTags');
+
+    function Foo() {
+      return <Bar />;
+    }
+
+    let setBarUnmounted;
+    function Bar() {
+      const [, setState] = React.useState(false);
+      Scheduler.unstable_yieldValue('Bar render');
+
+      React.useLayoutEffect(() => {
+        return () => {
+          Scheduler.unstable_yieldValue('useLayoutEffect Bar unmount');
+          setState(true);
+        };
+      });
+
+      return null;
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App render');
+      const [barUnmounted, _setBarUnmounted] = React.useState(false);
+      setBarUnmounted = _setBarUnmounted;
+      return <>{!barUnmounted && <Foo />}</>;
+    }
+    const root = ReactDOM.createRoot(document.createElement('div'));
+    act(() => {
+      root.render(<App />);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'App render',
+      'Bar render',
+      'onCommitRoot',
+    ]);
+    expect(allSchedulerTags).toEqual([[HostRoot]]);
+
+    act(() => {
+      setBarUnmounted(true);
+      expect(Scheduler).toFlushAndYield([
+        'App render',
+        'useLayoutEffect Bar unmount',
+        'onCommitRoot',
+        'onCommitRoot',
+      ]);
+    });
+
+    expect(allSchedulerTags).toEqual([[HostRoot], [FunctionComponent]]);
+    expect(allSchedulerTypes).toEqual([[null], [App]]);
+  });
+
+  it('components that were deleted should not be added to updaters during the passive phase', () => {
+    const {
+      FunctionComponent,
+      HostRoot,
+    } = require('react-reconciler/src/ReactWorkTags');
+
+    let setBarUnmounted;
+    function Bar() {
+      const [, setState] = React.useState(false);
+      Scheduler.unstable_yieldValue('Bar render');
+
+      React.useEffect(() => {
+        return () => {
+          Scheduler.unstable_yieldValue('usePassiveEffect Bar unmount');
+          setState(true);
+        };
+      });
+
+      return null;
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App render');
+      const [barUnmounted, _setBarUnmounted] = React.useState(false);
+      setBarUnmounted = _setBarUnmounted;
+      return <>{!barUnmounted && <Bar />}</>;
+    }
+    const root = ReactDOM.createRoot(document.createElement('div'));
+    act(() => {
+      root.render(<App />);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'App render',
+      'Bar render',
+      'onCommitRoot',
+    ]);
+    expect(allSchedulerTags).toEqual([[HostRoot]]);
+
+    act(() => {
+      setBarUnmounted(true);
+      expect(Scheduler).toFlushAndYield([
+        'App render',
+        'onCommitRoot',
+        'usePassiveEffect Bar unmount',
+      ]);
+    });
+
+    expect(allSchedulerTags).toEqual([[HostRoot], [FunctionComponent]]);
+    expect(allSchedulerTypes).toEqual([[null], [App]]);
+  });
 });