offscreen double invoke effects (#19523)

This PR double invokes effects in __DEV__ mode. We are thinking about unmounting layout and/or passive effects for a hidden tree. To understand potential issues with this, we want to double invoke effects. This PR changes the behavior in DEV when an effect runs from create() to create() -> destroy() -> create(). The effect cleanup function will still be called before the effect runs in both dev and prod. (Note: This change is purely for research for now as it is likely to break real code.) **Note: The change is fully behind a flag and does not affect any of the code on npm.**

Author: lunaruan

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

@@ -12,13 +12,14 @@ import type {Lanes} from './ReactFiberLane';
 importtype{UpdateQueue}from'./ReactUpdateQueue.new';
 
 import*asReactfrom'react';
-import{Update,Snapshot}from'./ReactFiberFlags';
+import{Update,Snapshot,MountLayoutDev}from'./ReactFiberFlags';
 import{
 debugRenderPhaseSideEffectsForStrictMode,
 disableLegacyContext,
 enableDebugTracing,
 enableSchedulingProfiler,
 warnAboutDeprecatedLifecycles,
+enableDoubleInvokingEffects,
 }from'shared/ReactFeatureFlags';
 importReactStrictModeWarningsfrom'./ReactStrictModeWarnings.new';
 import{isMounted}from'./ReactFiberTreeReflection';
@@ -890,7 +891,11 @@ function mountClassInstance(
 }
 
 if(typeofinstance.componentDidMount==='function'){
-workInProgress.flags|=Update;
+if(__DEV__&&enableDoubleInvokingEffects){
+workInProgress.flags|=MountLayoutDev|Update;
+}else{
+workInProgress.flags|=Update;
+}
 }
 }
 
@@ -960,7 +965,11 @@ function resumeMountClassInstance(
 // If an update was already in progress, we should schedule an Update
 // effect even though we're bailing out, so that cWU/cDU are called.
 if(typeofinstance.componentDidMount==='function'){
-workInProgress.flags|=Update;
+if(__DEV__&&enableDoubleInvokingEffects){
+workInProgress.flags|=MountLayoutDev|Update;
+}else{
+workInProgress.flags|=Update;
+}
 }
 returnfalse;
 }
@@ -1003,13 +1012,21 @@ function resumeMountClassInstance(
 }
 }
 if(typeofinstance.componentDidMount==='function'){
-workInProgress.flags|=Update;
+if(__DEV__&&enableDoubleInvokingEffects){
+workInProgress.flags|=MountLayoutDev|Update;
+}else{
+workInProgress.flags|=Update;
+}
 }
 }else{
 // If an update was already in progress, we should schedule an Update
 // effect even though we're bailing out, so that cWU/cDU are called.
 if(typeofinstance.componentDidMount==='function'){
-workInProgress.flags|=Update;
+if(__DEV__&&enableDoubleInvokingEffects){
+workInProgress.flags|=MountLayoutDev|Update;
+}else{
+workInProgress.flags|=Update;
+}
 }
 
 // If shouldComponentUpdate returned false, we should still update the

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

@@ -35,6 +35,7 @@ import {
 enableFundamentalAPI,
 enableSuspenseCallback,
 enableScopeAPI,
+enableDoubleInvokingEffects,
 }from'shared/ReactFeatureFlags';
 import{
 FunctionComponent,
@@ -159,7 +160,7 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
 functionsafelyCallComponentWillUnmount(
 current: Fiber,
 instance: any,
-nearestMountedAncestor: Fiber,
+nearestMountedAncestor: Fiber|null,
 ){
 if(__DEV__){
 invokeGuardedCallback(
@@ -318,7 +319,7 @@ function commitBeforeMutationLifeCycles(
 }
 
 functioncommitHookEffectListUnmount(
-tag: HookFlags,
+flags: HookFlags,
 finishedWork: Fiber,
 nearestMountedAncestor: Fiber|null,
 ){
@@ -328,7 +329,7 @@ function commitHookEffectListUnmount(
 constfirstEffect=lastEffect.next;
 leteffect=firstEffect;
 do{
-if((effect.tag&tag)===tag){
+if((effect.tag&flags)===flags){
 // Unmount
 constdestroy=effect.destroy;
 effect.destroy=undefined;
@@ -341,14 +342,14 @@ function commitHookEffectListUnmount(
 }
 }
 
-functioncommitHookEffectListMount(tag: HookFlags,finishedWork: Fiber){
+functioncommitHookEffectListMount(flags: HookFlags,finishedWork: Fiber){
 constupdateQueue: FunctionComponentUpdateQueue|null=(finishedWork.updateQueue: any);
 constlastEffect=updateQueue!==null ? updateQueue.lastEffect : null;
 if(lastEffect!==null){
 constfirstEffect=lastEffect.next;
 leteffect=firstEffect;
 do{
-if((effect.tag&tag)===tag){
+if((effect.tag&flags)===flags){
 // Mount
 constcreate=effect.create;
 effect.destroy=create();
@@ -1884,6 +1885,131 @@ function commitPassiveMount(
 }
 }
 
+functioninvokeLayoutEffectMountInDEV(fiber: Fiber): void{
+if(__DEV__&&enableDoubleInvokingEffects){
+switch(fiber.tag){
+caseFunctionComponent:
+caseForwardRef:
+caseSimpleMemoComponent:
+caseBlock: {
+invokeGuardedCallback(
+null,
+commitHookEffectListMount,
+null,
+HookLayout|HookHasEffect,
+fiber,
+);
+if(hasCaughtError()){
+constmountError=clearCaughtError();
+captureCommitPhaseError(fiber,fiber.return,mountError);
+}
+break;
+}
+caseClassComponent: {
+constinstance=fiber.stateNode;
+invokeGuardedCallback(null,instance.componentDidMount,null);
+if(hasCaughtError()){
+constmountError=clearCaughtError();
+captureCommitPhaseError(fiber,fiber.return,mountError);
+}
+break;
+}
+}
+}
+}
+
+functioninvokePassiveEffectMountInDEV(fiber: Fiber): void{
+if(__DEV__&&enableDoubleInvokingEffects){
+switch(fiber.tag){
+caseFunctionComponent:
+caseForwardRef:
+caseSimpleMemoComponent:
+caseBlock: {
+invokeGuardedCallback(
+null,
+commitHookEffectListMount,
+null,
+HookPassive|HookHasEffect,
+fiber,
+);
+if(hasCaughtError()){
+constmountError=clearCaughtError();
+captureCommitPhaseError(fiber,fiber.return,mountError);
+}
+break;
+}
+}
+}
+}
+
+functioninvokeLayoutEffectUnmountInDEV(fiber: Fiber): void{
+if(__DEV__&&enableDoubleInvokingEffects){
+switch(fiber.tag){
+caseFunctionComponent:
+caseForwardRef:
+caseSimpleMemoComponent:
+caseBlock: {
+invokeGuardedCallback(
+null,
+commitHookEffectListUnmount,
+null,
+HookLayout|HookHasEffect,
+fiber,
+fiber.return,
+);
+if(hasCaughtError()){
+constunmountError=clearCaughtError();
+captureCommitPhaseError(fiber,fiber.return,unmountError);
+}
+break;
+}
+caseClassComponent: {
+constinstance=fiber.stateNode;
+if(typeofinstance.componentWillUnmount==='function'){
+invokeGuardedCallback(
+null,
+safelyCallComponentWillUnmount,
+null,
+fiber,
+instance,
+fiber.return,
+);
+if(hasCaughtError()){
+constunmountError=clearCaughtError();
+captureCommitPhaseError(fiber,fiber.return,unmountError);
+}
+}
+break;
+}
+}
+}
+}
+
+functioninvokePassiveEffectUnmountInDEV(fiber: Fiber): void{
+if(__DEV__&&enableDoubleInvokingEffects){
+switch(fiber.tag){
+caseFunctionComponent:
+caseForwardRef:
+caseSimpleMemoComponent:
+caseBlock: {
+invokeGuardedCallback(
+null,
+commitHookEffectListUnmount,
+null,
+HookPassive|HookHasEffect,
+fiber,
+fiber.return,
+);
+if(hasCaughtError()){
+constunmountError=clearCaughtError();
+captureCommitPhaseError(fiber,fiber.return,unmountError);
+}
+break;
+}
+}
+}
+}
+
 export{
 commitBeforeMutationLifeCycles,
 commitResetTextContent,
@@ -1896,4 +2022,8 @@ export {
 commitPassiveUnmount,
 commitPassiveUnmountInsideDeletedTree,
 commitPassiveMount,
+invokeLayoutEffectMountInDEV,
+invokeLayoutEffectUnmountInDEV,
+invokePassiveEffectMountInDEV,
+invokePassiveEffectUnmountInDEV,
 };

packages/react-reconciler/src/ReactFiberFlags.js

@@ -10,50 +10,56 @@
 exporttypeFlags=number;
 
 // Don't change these two values. They're used by React Dev Tools.
-exportconstNoFlags=/* */0b0000000000000000;
-exportconstPerformedWork=/* */0b0000000000000001;
+exportconstNoFlags=/* */0b000000000000000000;
+exportconstPerformedWork=/* */0b000000000000000001;
 
 // You can change the rest (and add more).
-exportconstPlacement=/* */0b0000000000000010;
-exportconstUpdate=/* */0b0000000000000100;
-exportconstPlacementAndUpdate=/* */0b0000000000000110;
-exportconstDeletion=/* */0b0000000000001000;
-exportconstContentReset=/* */0b0000000000010000;
-exportconstCallback=/* */0b0000000000100000;
-exportconstDidCapture=/* */0b0000000001000000;
-exportconstRef=/* */0b0000000010000000;
-exportconstSnapshot=/* */0b0000000100000000;
-exportconstPassive=/* */0b0000001000000000;
+exportconstPlacement=/* */0b000000000000000010;
+exportconstUpdate=/* */0b000000000000000100;
+exportconstPlacementAndUpdate=/* */0b000000000000000110;
+exportconstDeletion=/* */0b000000000000001000;
+exportconstContentReset=/* */0b000000000000010000;
+exportconstCallback=/* */0b000000000000100000;
+exportconstDidCapture=/* */0b000000000001000000;
+exportconstRef=/* */0b000000000010000000;
+exportconstSnapshot=/* */0b000000000100000000;
+exportconstPassive=/* */0b000000001000000000;
 // TODO (effects) Remove this bit once the new reconciler is synced to the old.
-exportconstPassiveUnmountPendingDev=/* */0b0010000000000000;
-exportconstHydrating=/* */0b0000010000000000;
-exportconstHydratingAndUpdate=/* */0b0000010000000100;
+exportconstPassiveUnmountPendingDev=/* */0b000010000000000000;
+exportconstHydrating=/* */0b000000010000000000;
+exportconstHydratingAndUpdate=/* */0b000000010000000100;
 
 // Passive & Update & Callback & Ref & Snapshot
-exportconstLifecycleEffectMask=/* */0b0000001110100100;
+exportconstLifecycleEffectMask=/* */0b000000001110100100;
 
 // Union of all host effects
-exportconstHostEffectMask=/* */0b0000011111111111;
+exportconstHostEffectMask=/* */0b000000011111111111;
 
 // These are not really side effects, but we still reuse this field.
-exportconstIncomplete=/* */0b0000100000000000;
-exportconstShouldCapture=/* */0b0001000000000000;
-exportconstForceUpdateForLegacySuspense=/* */0b0100000000000000;
+exportconstIncomplete=/* */0b000000100000000000;
+exportconstShouldCapture=/* */0b000001000000000000;
+exportconstForceUpdateForLegacySuspense=/* */0b000100000000000000;
 
 // Static tags describe aspects of a fiber that are not specific to a render,
 // e.g. a fiber uses a passive effect (even if there are no updates on this particular render).
 // This enables us to defer more work in the unmount case,
 // since we can defer traversing the tree during layout to look for Passive effects,
 // and instead rely on the static flag as a signal that there may be cleanup work.
-exportconstPassiveStatic=/* */0b1000000000000000;
+exportconstPassiveStatic=/* */0b001000000000000000;
 
 // Union of side effect groupings as pertains to subtreeFlags
-exportconstBeforeMutationMask=/* */0b0000001100001010;
-exportconstMutationMask=/* */0b0000010010011110;
-exportconstLayoutMask=/* */0b0000000010100100;
-exportconstPassiveMask=/* */0b0000001000001000;
+exportconstBeforeMutationMask=/* */0b000000001100001010;
+exportconstMutationMask=/* */0b000000010010011110;
+exportconstLayoutMask=/* */0b000000000010100100;
+exportconstPassiveMask=/* */0b000000001000001000;
 
 // Union of tags that don't get reset on clones.
 // This allows certain concepts to persist without recalculting them,
 // e.g. whether a subtree contains passive effects or portals.
-exportconstStaticMask=/* */0b1000000000000000;
+exportconstStaticMask=/* */0b001000000000000000;
+
+// These flags allow us to traverse to fibers that have effects on mount
+// without traversing the entire tree after every commit for
+// double invoking
+exportconstMountLayoutDev=/* */0b010000000000000000;
+exportconstMountPassiveDev=/* */0b100000000000000000;