diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index 3f5aab8a7441ee..c0557ec3fbbcad 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js @@ -910,7 +910,7 @@ function updateTracingMarkerComponent( } } - const instance = workInProgress.stateNode; + const instance: TracingMarkerInstance = workInProgress.stateNode; if (instance !== null) { pushMarkerInstance(workInProgress, instance); } diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index e637de758d6f17..2777e4f537363e 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -2829,15 +2829,20 @@ function commitPassiveMountOnFiber( } if (incompleteTransitions !== null) { - incompleteTransitions.forEach((pendingBoundaries, transition) => { - if (pendingBoundaries === null || pendingBoundaries.size === 0) { - addTransitionCompleteCallbackToPendingTransition({ - transitionName: transition.name, - startTime: transition.startTime, - }); - incompleteTransitions.delete(transition); - } - }); + incompleteTransitions.forEach( + ({pendingSuspenseBoundaries}, transition) => { + if ( + pendingSuspenseBoundaries === null || + pendingSuspenseBoundaries.size === 0 + ) { + addTransitionCompleteCallbackToPendingTransition({ + transitionName: transition.name, + startTime: transition.startTime, + }); + incompleteTransitions.delete(transition); + } + }, + ); if (incompleteTransitions.size === 0) { root.incompleteTransitions = null; @@ -2908,6 +2913,10 @@ function commitPassiveMountOnFiber( const markerInstances = queue.markerInstances; if (markerInstances !== null) { markerInstances.forEach(markerInstance => { + if (markerInstance.pendingSuspenseBoundaries === null) { + markerInstance.pendingSuspenseBoundaries = new Map(); + } + const markerTransitions = markerInstance.transitions; // There should only be a few tracing marker transitions because // they should be only associated with the transition that diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js index 54f06bdbe57b6a..dd7e542d4b252a 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js +++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js @@ -117,36 +117,26 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void { // marker does, so we can push it onto the marker instance stack const transitions = getWorkInProgressTransitions(); const root = workInProgress.stateNode; - let incompleteTransitions = root.incompleteTransitions; - if (transitions !== null) { - // Create a mapping from transition to suspense boundaries - // We instantiate this lazily, only if transitions exist - if (incompleteTransitions === null) { - root.incompleteTransitions = incompleteTransitions = new Map(); - } + if (transitions !== null) { transitions.forEach(transition => { // We need to create a new map here because we only have access to the // object instance in the commit phase - incompleteTransitions.set(transition, new Map()); - }); - } - - if (incompleteTransitions === null) { - push(markerInstanceStack, null, workInProgress); - } else { - const markerInstances = []; - // For ever transition on the suspense boundary, we push the transition - // along with its map of pending suspense boundaries onto the marker - // instance stack. - incompleteTransitions.forEach((pendingSuspenseBoundaries, transition) => { - markerInstances.push({ + root.incompleteTransitions.set(transition, { transitions: new Set([transition]), - pendingSuspenseBoundaries, + pendingSuspenseBoundaries: null, }); }); - push(markerInstanceStack, markerInstances, workInProgress); } + + const markerInstances = []; + // For ever transition on the suspense boundary, we push the transition + // along with its map of pending suspense boundaries onto the marker + // instance stack. + root.incompleteTransitions.forEach(markerInstance => { + markerInstances.push(markerInstance); + }); + push(markerInstanceStack, markerInstances, workInProgress); } } diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index bfddf20a89cdf9..647197e65f4904 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -1467,6 +1467,9 @@ export function popRenderLanes(fiber: Fiber) { function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber { root.finishedWork = null; root.finishedLanes = NoLanes; + if (root.incompleteTransitions === null) { + root.incompleteTransitions = new Map(); + } const timeoutHandle = root.timeoutHandle; if (timeoutHandle !== noTimeout) {