diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 6d3b0e555a64f..0e9e2236b8771 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent'; import type {HookFlags} from './ReactHookEffectTags'; import type {Cache} from './ReactFiberCacheComponent.new'; import type {RootState} from './ReactFiberRoot.new'; +import type {Transition} from './ReactFiberTracingMarkerComponent.new'; import { enableCreateEventHandleAPI, @@ -2614,15 +2615,22 @@ export function commitPassiveMountEffects( root: FiberRoot, finishedWork: Fiber, committedLanes: Lanes, + committedTransitions: Array | null, ): void { nextEffect = finishedWork; - commitPassiveMountEffects_begin(finishedWork, root, committedLanes); + commitPassiveMountEffects_begin( + finishedWork, + root, + committedLanes, + committedTransitions, + ); } function commitPassiveMountEffects_begin( subtreeRoot: Fiber, root: FiberRoot, committedLanes: Lanes, + committedTransitions: Array | null, ) { while (nextEffect !== null) { const fiber = nextEffect; @@ -2631,7 +2639,12 @@ function commitPassiveMountEffects_begin( ensureCorrectReturnPointer(firstChild, fiber); nextEffect = firstChild; } else { - commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes); + commitPassiveMountEffects_complete( + subtreeRoot, + root, + committedLanes, + committedTransitions, + ); } } } @@ -2640,6 +2653,7 @@ function commitPassiveMountEffects_complete( subtreeRoot: Fiber, root: FiberRoot, committedLanes: Lanes, + committedTransitions: Array | null, ) { while (nextEffect !== null) { const fiber = nextEffect; @@ -2647,7 +2661,12 @@ function commitPassiveMountEffects_complete( if ((fiber.flags & Passive) !== NoFlags) { setCurrentDebugFiberInDEV(fiber); try { - commitPassiveMountOnFiber(root, fiber, committedLanes); + commitPassiveMountOnFiber( + root, + fiber, + committedLanes, + committedTransitions, + ); } catch (error) { reportUncaughtErrorInDEV(error); captureCommitPhaseError(fiber, fiber.return, error); @@ -2675,6 +2694,7 @@ function commitPassiveMountOnFiber( finishedRoot: FiberRoot, finishedWork: Fiber, committedLanes: Lanes, + committedTransitions: Array | null, ): void { switch (finishedWork.tag) { case FunctionComponent: diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index bbd4acdf9e9be..fa09e056ebb63 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -391,6 +391,7 @@ let rootWithPendingPassiveEffects: FiberRoot | null = null; let pendingPassiveEffectsLanes: Lanes = NoLanes; let pendingPassiveProfilerEffects: Array = []; let pendingPassiveEffectsRemainingLanes: Lanes = NoLanes; +let pendingPassiveTransitions: Array | null = null; // Use these to prevent an infinite loop of nested updates const NESTED_UPDATE_LIMIT = 50; @@ -2087,6 +2088,9 @@ function commitRootImpl( if (!rootDoesHavePassiveEffects) { rootDoesHavePassiveEffects = true; pendingPassiveEffectsRemainingLanes = remainingLanes; + // workInProgressTransitions might be overwritten, so we want + // to store it in pendingPassiveTransitions until they get processed + pendingPassiveTransitions = workInProgressTransitions; scheduleCallback(NormalSchedulerPriority, () => { flushPassiveEffects(); // This render triggered passive effects: release the root cache pool @@ -2407,6 +2411,10 @@ function flushPassiveEffectsImpl() { return false; } + // Cache and clear the transitions flag + const transitions = pendingPassiveTransitions; + pendingPassiveTransitions = null; + const root = rootWithPendingPassiveEffects; const lanes = pendingPassiveEffectsLanes; rootWithPendingPassiveEffects = null; @@ -2436,7 +2444,7 @@ function flushPassiveEffectsImpl() { executionContext |= CommitContext; commitPassiveUnmountEffects(root.current); - commitPassiveMountEffects(root, root.current, lanes); + commitPassiveMountEffects(root, root.current, lanes, transitions); // TODO: Move to commitPassiveMountEffects if (enableProfilerTimer && enableProfilerCommitHooks) {