diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 5f3870ac95f3..48150f021a32 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -156,7 +156,9 @@ if (__DEV__) { // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor. // Only used when enableSuspenseLayoutEffectSemantics is enabled. let offscreenSubtreeIsHidden: boolean = false; +const offscreenSubtreeIsHiddenStack: Array = []; let offscreenSubtreeWasHidden: boolean = false; +const offscreenSubtreeWasHiddenStack: Array = []; const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set; @@ -2303,35 +2305,11 @@ function commitLayoutEffects_begin( const wasHidden = current !== null && current.memoizedState !== null; const isHidden = fiber.memoizedState !== null; - const newOffscreenSubtreeIsHidden = - isHidden || offscreenSubtreeIsHidden; - const newOffscreenSubtreeWasHidden = - wasHidden || offscreenSubtreeWasHidden; + offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden; + offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden; - if ( - newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden || - newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden - ) { - const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden; - const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden; - - nextEffect = fiber; - offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden; - offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden; - - // Traverse the Offscreen subtree with the current Offscreen as the root. - commitLayoutEffects_begin( - fiber, // New root; bubble back up to here and stop. - root, - committedLanes, - ); - - nextEffect = fiber.sibling; - offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden; - offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden; - - continue; - } + offscreenSubtreeWasHiddenStack.push(wasHidden); + offscreenSubtreeIsHiddenStack.push(isHidden); } } @@ -2372,6 +2350,23 @@ function commitLayoutMountEffects_complete( while (nextEffect !== null) { const fiber = nextEffect; + if (enableSuspenseLayoutEffectSemantics && isModernRoot) { + if (fiber.tag === OffscreenComponent) { + offscreenSubtreeWasHiddenStack.pop(); + offscreenSubtreeIsHiddenStack.pop(); + offscreenSubtreeWasHidden = + offscreenSubtreeWasHiddenStack.length > 0 && + offscreenSubtreeWasHiddenStack[ + offscreenSubtreeWasHiddenStack.length - 1 + ]; + offscreenSubtreeIsHidden = + offscreenSubtreeIsHiddenStack.length > 0 && + offscreenSubtreeIsHiddenStack[ + offscreenSubtreeIsHiddenStack.length - 1 + ]; + } + } + if ( enableSuspenseLayoutEffectSemantics && isModernRoot && diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 10fa7d1c206f..ca3dbe363f07 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -156,7 +156,9 @@ if (__DEV__) { // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor. // Only used when enableSuspenseLayoutEffectSemantics is enabled. let offscreenSubtreeIsHidden: boolean = false; +const offscreenSubtreeIsHiddenStack: Array = []; let offscreenSubtreeWasHidden: boolean = false; +const offscreenSubtreeWasHiddenStack: Array = []; const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set; @@ -2303,35 +2305,11 @@ function commitLayoutEffects_begin( const wasHidden = current !== null && current.memoizedState !== null; const isHidden = fiber.memoizedState !== null; - const newOffscreenSubtreeIsHidden = - isHidden || offscreenSubtreeIsHidden; - const newOffscreenSubtreeWasHidden = - wasHidden || offscreenSubtreeWasHidden; + offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden; + offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden; - if ( - newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden || - newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden - ) { - const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden; - const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden; - - nextEffect = fiber; - offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden; - offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden; - - // Traverse the Offscreen subtree with the current Offscreen as the root. - commitLayoutEffects_begin( - fiber, // New root; bubble back up to here and stop. - root, - committedLanes, - ); - - nextEffect = fiber.sibling; - offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden; - offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden; - - continue; - } + offscreenSubtreeWasHiddenStack.push(wasHidden); + offscreenSubtreeIsHiddenStack.push(isHidden); } } @@ -2372,6 +2350,23 @@ function commitLayoutMountEffects_complete( while (nextEffect !== null) { const fiber = nextEffect; + if (enableSuspenseLayoutEffectSemantics && isModernRoot) { + if (fiber.tag === OffscreenComponent) { + offscreenSubtreeWasHiddenStack.pop(); + offscreenSubtreeIsHiddenStack.pop(); + offscreenSubtreeWasHidden = + offscreenSubtreeWasHiddenStack.length > 0 && + offscreenSubtreeWasHiddenStack[ + offscreenSubtreeWasHiddenStack.length - 1 + ]; + offscreenSubtreeIsHidden = + offscreenSubtreeIsHiddenStack.length > 0 && + offscreenSubtreeIsHiddenStack[ + offscreenSubtreeIsHiddenStack.length - 1 + ]; + } + } + if ( enableSuspenseLayoutEffectSemantics && isModernRoot &&