diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index a40b5ac480728..c18575b52bc74 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -3186,19 +3186,21 @@ function doubleInvokeEffectsInDEV( const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE; const isInStrictMode = parentIsInStrictMode || isStrictModeFiber; - if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) { + if ( + isInStrictMode && + // Check for newly mounted trees + (fiber.flags & PlacementDEV || + // Check for trees that are going from hidden -> visible + (fiber.tag === OffscreenComponent && + fiber.flags & Visibility && + fiber.memoizedState === null)) + ) { + // Double invoke all the effects in this tree setCurrentDebugFiberInDEV(fiber); - const isNotOffscreen = fiber.tag !== OffscreenComponent; - // Checks if Offscreen is being revealed. For all other components, evaluates to true. - const hasOffscreenBecomeVisible = - isNotOffscreen || - (fiber.flags & Visibility && fiber.memoizedState === null); - if (isInStrictMode && hasOffscreenBecomeVisible) { - disappearLayoutEffects(fiber); - disconnectPassiveEffect(fiber); - reappearLayoutEffects(root, fiber.alternate, fiber, false); - reconnectPassiveEffects(root, fiber, NoLanes, null, false); - } + disappearLayoutEffects(fiber); + disconnectPassiveEffect(fiber); + reappearLayoutEffects(root, fiber.alternate, fiber, false); + reconnectPassiveEffects(root, fiber, NoLanes, null, false); resetCurrentDebugFiberInDEV(); } else { recursivelyTraverseAndDoubleInvokeEffectsInDEV(root, fiber, isInStrictMode); diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 3db85b0b9b23b..91be9dd4707f2 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -3186,19 +3186,21 @@ function doubleInvokeEffectsInDEV( const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE; const isInStrictMode = parentIsInStrictMode || isStrictModeFiber; - if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) { + if ( + isInStrictMode && + // Check for newly mounted trees + (fiber.flags & PlacementDEV || + // Check for trees that are going from hidden -> visible + (fiber.tag === OffscreenComponent && + fiber.flags & Visibility && + fiber.memoizedState === null)) + ) { + // Double invoke all the effects in this tree setCurrentDebugFiberInDEV(fiber); - const isNotOffscreen = fiber.tag !== OffscreenComponent; - // Checks if Offscreen is being revealed. For all other components, evaluates to true. - const hasOffscreenBecomeVisible = - isNotOffscreen || - (fiber.flags & Visibility && fiber.memoizedState === null); - if (isInStrictMode && hasOffscreenBecomeVisible) { - disappearLayoutEffects(fiber); - disconnectPassiveEffect(fiber); - reappearLayoutEffects(root, fiber.alternate, fiber, false); - reconnectPassiveEffects(root, fiber, NoLanes, null, false); - } + disappearLayoutEffects(fiber); + disconnectPassiveEffect(fiber); + reappearLayoutEffects(root, fiber.alternate, fiber, false); + reconnectPassiveEffects(root, fiber, NoLanes, null, false); resetCurrentDebugFiberInDEV(); } else { recursivelyTraverseAndDoubleInvokeEffectsInDEV(root, fiber, isInStrictMode);