offscreen double invoke effects

Author: lunaruan

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

@@ -160,7 +160,7 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
 };
 
 // Capture errors so they don't interrupt unmounting.
-function safelyCallComponentWillUnmount(current, instance) {
+export function safelyCallComponentWillUnmount(current: Fiber, instance: any) {
   if (__DEV__) {
     invokeGuardedCallback(
       null,
@@ -313,7 +313,7 @@ function commitBeforeMutationLifeCycles(
   );
 }
 
-function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) {
+export function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
   if (lastEffect !== null) {
@@ -325,15 +325,15 @@ function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) {
         const destroy = effect.destroy;
         effect.destroy = undefined;
         if (destroy !== undefined) {
-          destroy();
+          safelyCallDestroy(finishedWork, destroy);
         }
       }
       effect = effect.next;
     } while (effect !== firstEffect);
   }
 }
 
-function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
+export function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
   if (lastEffect !== null) {

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

@@ -32,6 +32,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   enableScopeAPI,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -55,6 +56,7 @@ import {
   NoEffect as NoHookEffect,
   HasEffect as HookHasEffect,
   Passive as HookPassive,
+  Layout as HookLayout,
 } from './ReactHookEffectTags';
 import {
   logCommitStarted,
@@ -208,9 +210,12 @@ import {
   commitDeletion,
   commitDetachRef,
   commitAttachRef,
+  commitHookEffectListUnmount,
+  commitHookEffectListMount,
   commitPassiveEffectDurations,
   commitResetTextContent,
   isSuspenseBoundaryBeingHidden,
+  safelyCallComponentWillUnmount,
   safelyCallDestroy,
 } from './ReactFiberCommitWork.new';
 import {enqueueUpdate} from './ReactUpdateQueue.new';
@@ -2273,6 +2278,14 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
+  if (enableDoubleInvokingEffects) {
+    if (__DEV__) {
+      if (!rootDidHavePassiveEffects) {
+        doubleInvokeEffectsInDEV(root.current, false);
+      }
+    }
+  }
+
   if (remainingLanes === SyncLane) {
     // Count the number of times the root synchronously re-renders without
     // finishing. If there are too many, it indicates an infinite update loop.
@@ -2970,6 +2983,12 @@ function flushPassiveEffectsImpl() {
   nestedPassiveUpdateCount =
     rootWithPendingPassiveEffects === null ? 0 : nestedPassiveUpdateCount + 1;
 
+  if (enableDoubleInvokingEffects) {
+    if (__DEV__) {
+      doubleInvokeEffectsInDEV(root.current, true);
+    }
+  }
+
   return true;
 }
 
@@ -3822,6 +3841,195 @@ function finishPendingInteractions(root, committedLanes) {
   }
 }
 
+function doubleInvokeEffectsInDEV(fiber, hasPassiveEffects) {
+  if (__DEV__) {
+    invokeLayoutEffectsUnmountInDEV(fiber);
+    invokeLayoutEffectsMountInDEV(fiber);
+
+    if (hasPassiveEffects) {
+      invokePassiveEffectsUnmountInDEV(fiber);
+      invokePassiveEffectsMountInDEV(fiber);
+    }
+  }
+}
+
+function invokeLayoutEffectsUnmountInDEV(firstChild) {
+  // unmount layout effects
+  let fiber = firstChild;
+  while (fiber !== null) {
+    if (fiber.child !== null) {
+      // Should we add a separate subtree tag for this?
+      const primarySubtreeTag = fiber.subtreeTag & LayoutSubtreeTag;
+      if (primarySubtreeTag !== NoSubtreeTag) {
+        invokeLayoutEffectsUnmountInDEV(fiber.child);
+      }
+    }
+
+    const effectTag = fiber.effectTag;
+    const current = fiber.alternate;
+    // This is a mount
+    if (current === null) {
+      if (effectTag & Update) {
+        switch (fiber.tag) {
+          case FunctionComponent:
+          case ForwardRef:
+          case SimpleMemoComponent:
+          case Block: {
+            invokeGuardedCallback(
+              null,
+              commitHookEffectListUnmount,
+              null,
+              HookLayout | HookHasEffect,
+              fiber,
+            );
+            if (hasCaughtError()) {
+              const unmountError = clearCaughtError();
+              captureCommitPhaseError(fiber, unmountError);
+            }
+            break;
+          }
+          case ClassComponent: {
+            const instance = fiber.stateNode;
+            if (typeof instance.componentWillUnmount === 'function') {
+              safelyCallComponentWillUnmount(fiber, instance);
+            }
+            break;
+          }
+        }
+      }
+    }
+    fiber = fiber.sibling;
+  }
+}
+
+function invokeLayoutEffectsMountInDEV(firstChild) {
+  // mount layout effects
+  if (__DEV__) {
+    let fiber = firstChild;
+    while (fiber !== null) {
+      if (fiber.child !== null) {
+        // Should we add a separate subtree tag for this?
+        const primarySubtreeTag = fiber.subtreeTag & LayoutSubtreeTag;
+        if (primarySubtreeTag !== NoSubtreeTag) {
+          invokeLayoutEffectsMountInDEV(fiber.child);
+        }
+      }
+
+      const effectTag = fiber.effectTag;
+      const current = fiber.alternate;
+      if (current === null) {
+        if (effectTag & Update) {
+          switch (fiber.tag) {
+            case FunctionComponent:
+            case ForwardRef:
+            case SimpleMemoComponent:
+            case Block: {
+              invokeGuardedCallback(
+                null,
+                commitHookEffectListMount,
+                null,
+                HookLayout | HookHasEffect,
+                fiber,
+              );
+              if (hasCaughtError()) {
+                const mountError = clearCaughtError();
+                captureCommitPhaseError(fiber, mountError);
+              }
+              break;
+            }
+            case ClassComponent: {
+              const instance = fiber.stateNode;
+              instance.componentDidMount();
+              break;
+            }
+          }
+        }
+      }
+      fiber = fiber.sibling;
+    }
+  }
+}
+
+function invokePassiveEffectsUnmountInDEV(firstChild): void {
+  if (__DEV__) {
+    let fiber = firstChild;
+    while (fiber !== null) {
+      if (fiber.child !== null) {
+        const primarySubtreeTag = fiber.subtreeTag & PassiveSubtreeTag;
+        if (primarySubtreeTag !== NoSubtreeTag) {
+          invokePassiveEffectsUnmountInDEV(fiber.child);
+        }
+      }
+
+      const current = fiber.alternate;
+      if (current === null) {
+        switch (fiber.tag) {
+          case FunctionComponent:
+          case ForwardRef:
+          case SimpleMemoComponent:
+          case Block: {
+            if (fiber.effectTag & Passive) {
+              invokeGuardedCallback(
+                null,
+                commitHookEffectListUnmount,
+                null,
+                HookPassive | HookHasEffect,
+                fiber,
+              );
+              if (hasCaughtError()) {
+                const unmountError = clearCaughtError();
+                captureCommitPhaseError(fiber, unmountError);
+              }
+            }
+            break;
+          }
+        }
+      }
+      fiber = fiber.sibling;
+    }
+  }
+}
+
+function invokePassiveEffectsMountInDEV(firstChild): void {
+  if (__DEV__) {
+    let fiber = firstChild;
+    while (fiber !== null) {
+      if (fiber.child !== null) {
+        const primarySubtreeTag = fiber.subtreeTag & PassiveSubtreeTag;
+        if (primarySubtreeTag !== NoSubtreeTag) {
+          invokePassiveEffectsMountInDEV(fiber.child);
+        }
+      }
+
+      const current = fiber.alternate;
+      if (current === null) {
+        switch (fiber.tag) {
+          case FunctionComponent:
+          case ForwardRef:
+          case SimpleMemoComponent:
+          case Block: {
+            if (fiber.effectTag & Passive) {
+              invokeGuardedCallback(
+                null,
+                commitHookEffectListMount,
+                null,
+                HookPassive | HookHasEffect,
+                fiber,
+              );
+              if (hasCaughtError()) {
+                const mountError = clearCaughtError();
+                captureCommitPhaseError(fiber, mountError);
+              }
+            }
+            break;
+          }
+        }
+      }
+      fiber = fiber.sibling;
+    }
+  }
+}
+
 // `act` testing API
 //
 // TODO: This is mostly a copy-paste from the legacy `act`, which does not have