diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js index 2816e72c6007..e4f4d7173b4b 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js @@ -27,7 +27,6 @@ import type { OffscreenProps, OffscreenState, OffscreenQueue, - OffscreenInstance, } from './ReactFiberOffscreenComponent'; import type { Cache, @@ -263,9 +262,8 @@ import { getPendingTransitions, } from './ReactFiberTransition.new'; import { - getMarkerInstances, - pushMarkerInstance, - pushRootMarkerInstance, + getTracingMarkers, + pushTracingMarker, } from './ReactFiberTracingMarkerComponent.new'; const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; @@ -781,10 +779,7 @@ function updateOffscreenComponent( if (enableTransitionTracing) { // We have now gone from hidden to visible, so any transitions should // be added to the stack to get added to any Offscreen/suspense children - const instance: OffscreenInstance | null = workInProgress.stateNode; - if (instance !== null && instance.transitions != null) { - transitions = Array.from(instance.transitions); - } + transitions = workInProgress.stateNode.transitions; } pushTransition(workInProgress, prevCachePool, transitions); @@ -914,10 +909,7 @@ function updateTracingMarkerComponent( } } - const instance: TracingMarkerInstance | null = workInProgress.stateNode; - if (instance !== null) { - pushMarkerInstance(workInProgress, instance); - } + pushTracingMarker(workInProgress); const nextChildren = workInProgress.pendingProps.children; reconcileChildren(current, workInProgress, nextChildren, renderLanes); return workInProgress.child; @@ -1321,10 +1313,6 @@ function updateHostRoot(current, workInProgress, renderLanes) { const root: FiberRoot = workInProgress.stateNode; pushRootTransition(workInProgress, root, renderLanes); - if (enableTransitionTracing) { - pushRootMarkerInstance(workInProgress); - } - if (enableCache) { const nextCache: Cache = nextState.cache; pushCacheProvider(workInProgress, nextCache); @@ -2110,10 +2098,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { const currentTransitions = getPendingTransitions(); if (currentTransitions !== null) { // If there are no transitions, we don't need to keep track of tracing markers - const parentMarkerInstances = getMarkerInstances(); + const currentTracingMarkers = getTracingMarkers(); const primaryChildUpdateQueue: OffscreenQueue = { transitions: currentTransitions, - markerInstances: parentMarkerInstances, + tracingMarkers: currentTracingMarkers, }; primaryChildFragment.updateQueue = primaryChildUpdateQueue; } @@ -2200,10 +2188,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { if (enableTransitionTracing) { const currentTransitions = getPendingTransitions(); if (currentTransitions !== null) { - const parentMarkerInstances = getMarkerInstances(); + const currentTracingMarkers = getTracingMarkers(); const primaryChildUpdateQueue: OffscreenQueue = { transitions: currentTransitions, - markerInstances: parentMarkerInstances, + tracingMarkers: currentTracingMarkers, }; primaryChildFragment.updateQueue = primaryChildUpdateQueue; } @@ -3521,10 +3509,6 @@ function attemptEarlyBailoutIfNoScheduledUpdate( const root: FiberRoot = workInProgress.stateNode; pushRootTransition(workInProgress, root, renderLanes); - if (enableTransitionTracing) { - pushRootMarkerInstance(workInProgress); - } - if (enableCache) { const cache: Cache = current.memoizedState.cache; pushCacheProvider(workInProgress, cache); @@ -3710,10 +3694,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate( } case TracingMarkerComponent: { if (enableTransitionTracing) { - const instance: TracingMarkerInstance | null = workInProgress.stateNode; - if (instance !== null) { - pushMarkerInstance(workInProgress, instance); - } + pushTracingMarker(workInProgress); } } } diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index 8b19780af34d..ca25b272e473 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js @@ -27,7 +27,6 @@ import type { OffscreenProps, OffscreenState, OffscreenQueue, - OffscreenInstance, } from './ReactFiberOffscreenComponent'; import type { Cache, @@ -260,9 +259,8 @@ import { getPendingTransitions, } from './ReactFiberTransition.old'; import { - getMarkerInstances, - pushMarkerInstance, - pushRootMarkerInstance, + getTracingMarkers, + pushTracingMarker, } from './ReactFiberTracingMarkerComponent.old'; const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; @@ -786,10 +784,7 @@ function updateOffscreenComponent( if (enableTransitionTracing) { // We have now gone from hidden to visible, so any transitions should // be added to the stack to get added to any Offscreen/suspense children - const instance: OffscreenInstance | null = workInProgress.stateNode; - if (instance !== null && instance.transitions != null) { - transitions = Array.from(instance.transitions); - } + transitions = workInProgress.stateNode.transitions; } pushTransition(workInProgress, prevCachePool, transitions); @@ -914,10 +909,7 @@ function updateTracingMarkerComponent( } } - const instance: TracingMarkerInstance | null = workInProgress.stateNode; - if (instance !== null) { - pushMarkerInstance(workInProgress, instance); - } + pushTracingMarker(workInProgress); const nextChildren = workInProgress.pendingProps.children; reconcileChildren(current, workInProgress, nextChildren, renderLanes); return workInProgress.child; @@ -1321,10 +1313,6 @@ function updateHostRoot(current, workInProgress, renderLanes) { const root: FiberRoot = workInProgress.stateNode; pushRootTransition(workInProgress, root, renderLanes); - if (enableTransitionTracing) { - pushRootMarkerInstance(workInProgress); - } - if (enableCache) { const nextCache: Cache = nextState.cache; pushCacheProvider(workInProgress, nextCache); @@ -2126,10 +2114,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { const currentTransitions = getPendingTransitions(); if (currentTransitions !== null) { // If there are no transitions, we don't need to keep track of tracing markers - const parentMarkerInstances = getMarkerInstances(); + const currentTracingMarkers = getTracingMarkers(); const primaryChildUpdateQueue: OffscreenQueue = { transitions: currentTransitions, - markerInstances: parentMarkerInstances, + tracingMarkers: currentTracingMarkers, }; primaryChildFragment.updateQueue = primaryChildUpdateQueue; } @@ -2212,10 +2200,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) { if (enableTransitionTracing) { const currentTransitions = getPendingTransitions(); if (currentTransitions !== null) { - const parentMarkerInstances = getMarkerInstances(); + const currentTracingMarkers = getTracingMarkers(); const primaryChildUpdateQueue: OffscreenQueue = { transitions: currentTransitions, - markerInstances: parentMarkerInstances, + tracingMarkers: currentTracingMarkers, }; primaryChildFragment.updateQueue = primaryChildUpdateQueue; } @@ -3522,10 +3510,6 @@ function attemptEarlyBailoutIfNoScheduledUpdate( const root: FiberRoot = workInProgress.stateNode; pushRootTransition(workInProgress, root, renderLanes); - if (enableTransitionTracing) { - pushRootMarkerInstance(workInProgress); - } - if (enableCache) { const cache: Cache = current.memoizedState.cache; pushCacheProvider(workInProgress, cache); @@ -3718,10 +3702,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate( } case TracingMarkerComponent: { if (enableTransitionTracing) { - const instance: TracingMarkerInstance | null = workInProgress.stateNode; - if (instance !== null) { - pushMarkerInstance(workInProgress, instance); - } + pushTracingMarker(workInProgress); } } } diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 30709cffa506..da00d7761f9c 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -2811,35 +2811,47 @@ function commitPassiveMountOnFiber( // Get the transitions that were initiatized during the render // and add a start transition callback for each of them const root = finishedWork.stateNode; - const incompleteTransitions = root.incompleteTransitions; + let incompleteTransitions = root.incompleteTransitions; // Initial render if (committedTransitions !== null) { + if (incompleteTransitions === null) { + root.incompleteTransitions = incompleteTransitions = new Map(); + } + committedTransitions.forEach(transition => { addTransitionStartCallbackToPendingTransition({ transitionName: transition.name, startTime: transition.startTime, }); + + if (!incompleteTransitions.has(transition)) { + incompleteTransitions.set(transition, null); + } }); clearTransitionsForLanes(finishedRoot, committedLanes); } - incompleteTransitions.forEach( - ({pendingSuspenseBoundaries}, transition) => { - if ( - pendingSuspenseBoundaries === null || - pendingSuspenseBoundaries.size === 0 - ) { + if (incompleteTransitions !== null) { + incompleteTransitions.forEach((pendingBoundaries, transition) => { + if (pendingBoundaries === null || pendingBoundaries.size === 0) { addTransitionCompleteCallbackToPendingTransition({ transitionName: transition.name, startTime: transition.startTime, }); incompleteTransitions.delete(transition); } - }, - ); + }); + } - clearTransitionsForLanes(finishedRoot, committedLanes); + // If there are no more pending suspense boundaries we + // clear the transitions because they are all complete. + if ( + incompleteTransitions === null || + incompleteTransitions.size === 0 + ) { + root.incompleteTransitions = null; + } } break; } @@ -2884,6 +2896,14 @@ function commitPassiveMountOnFiber( if (isFallback) { const transitions = queue.transitions; let prevTransitions = instance.transitions; + let rootIncompleteTransitions = finishedRoot.incompleteTransitions; + + // We lazily instantiate transition tracing relevant maps + // and sets in the commit phase as we need to use them. We only + // instantiate them in the fallback phase on an as needed basis + if (rootIncompleteTransitions === null) { + finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map(); + } if (instance.pendingMarkers === null) { instance.pendingMarkers = new Set(); } @@ -2891,43 +2911,56 @@ function commitPassiveMountOnFiber( instance.transitions = prevTransitions = new Set(); } + // TODO(luna): Combine the root code with the tracing marker code if (transitions !== null) { transitions.forEach(transition => { // Add all the transitions saved in the update queue during // the render phase (ie the transitions associated with this boundary) // into the transitions set. prevTransitions.add(transition); - }); - } - const markerInstances = queue.markerInstances; - if (markerInstances !== null) { - markerInstances.forEach(markerInstance => { - if (markerInstance.pendingSuspenseBoundaries === null) { - markerInstance.pendingSuspenseBoundaries = new Map(); + // Add the root transition's pending suspense boundary set to + // the queue's marker set. We will iterate through the marker + // set when we toggle state on the suspense boundary and + // add or remove the pending suspense boundaries as needed. + if (rootIncompleteTransitions !== null) { + if (!rootIncompleteTransitions.has(transition)) { + rootIncompleteTransitions.set(transition, new Map()); + } + instance.pendingMarkers.add( + rootIncompleteTransitions.get(transition), + ); } + }); + } - const markerTransitions = markerInstance.transitions; + const tracingMarkers = queue.tracingMarkers; + if (tracingMarkers !== null) { + tracingMarkers.forEach(marker => { + const markerInstance = marker.stateNode; // There should only be a few tracing marker transitions because // they should be only associated with the transition that // caused them - if (markerTransitions !== null) { - markerTransitions.forEach(transition => { - if (instance.transitions.has(transition)) { - instance.pendingMarkers.add( - markerInstance.pendingSuspenseBoundaries, - ); - } - }); - } + markerInstance.transitions.forEach(transition => { + if (instance.transitions.has(transition)) { + instance.pendingMarkers.add( + markerInstance.pendingSuspenseBoundaries, + ); + } + }); }); } } - finishedWork.updateQueue = null; - } + commitTransitionProgress(finishedWork); - commitTransitionProgress(finishedWork); + if ( + instance.pendingMarkers === null || + instance.pendingMarkers.size === 0 + ) { + finishedWork.updateQueue = null; + } + } } break; diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 7f596a12641c..677db2f10b0e 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -2811,35 +2811,47 @@ function commitPassiveMountOnFiber( // Get the transitions that were initiatized during the render // and add a start transition callback for each of them const root = finishedWork.stateNode; - const incompleteTransitions = root.incompleteTransitions; + let incompleteTransitions = root.incompleteTransitions; // Initial render if (committedTransitions !== null) { + if (incompleteTransitions === null) { + root.incompleteTransitions = incompleteTransitions = new Map(); + } + committedTransitions.forEach(transition => { addTransitionStartCallbackToPendingTransition({ transitionName: transition.name, startTime: transition.startTime, }); + + if (!incompleteTransitions.has(transition)) { + incompleteTransitions.set(transition, null); + } }); clearTransitionsForLanes(finishedRoot, committedLanes); } - incompleteTransitions.forEach( - ({pendingSuspenseBoundaries}, transition) => { - if ( - pendingSuspenseBoundaries === null || - pendingSuspenseBoundaries.size === 0 - ) { + if (incompleteTransitions !== null) { + incompleteTransitions.forEach((pendingBoundaries, transition) => { + if (pendingBoundaries === null || pendingBoundaries.size === 0) { addTransitionCompleteCallbackToPendingTransition({ transitionName: transition.name, startTime: transition.startTime, }); incompleteTransitions.delete(transition); } - }, - ); + }); + } - clearTransitionsForLanes(finishedRoot, committedLanes); + // If there are no more pending suspense boundaries we + // clear the transitions because they are all complete. + if ( + incompleteTransitions === null || + incompleteTransitions.size === 0 + ) { + root.incompleteTransitions = null; + } } break; } @@ -2884,6 +2896,14 @@ function commitPassiveMountOnFiber( if (isFallback) { const transitions = queue.transitions; let prevTransitions = instance.transitions; + let rootIncompleteTransitions = finishedRoot.incompleteTransitions; + + // We lazily instantiate transition tracing relevant maps + // and sets in the commit phase as we need to use them. We only + // instantiate them in the fallback phase on an as needed basis + if (rootIncompleteTransitions === null) { + finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map(); + } if (instance.pendingMarkers === null) { instance.pendingMarkers = new Set(); } @@ -2891,43 +2911,56 @@ function commitPassiveMountOnFiber( instance.transitions = prevTransitions = new Set(); } + // TODO(luna): Combine the root code with the tracing marker code if (transitions !== null) { transitions.forEach(transition => { // Add all the transitions saved in the update queue during // the render phase (ie the transitions associated with this boundary) // into the transitions set. prevTransitions.add(transition); - }); - } - const markerInstances = queue.markerInstances; - if (markerInstances !== null) { - markerInstances.forEach(markerInstance => { - if (markerInstance.pendingSuspenseBoundaries === null) { - markerInstance.pendingSuspenseBoundaries = new Map(); + // Add the root transition's pending suspense boundary set to + // the queue's marker set. We will iterate through the marker + // set when we toggle state on the suspense boundary and + // add or remove the pending suspense boundaries as needed. + if (rootIncompleteTransitions !== null) { + if (!rootIncompleteTransitions.has(transition)) { + rootIncompleteTransitions.set(transition, new Map()); + } + instance.pendingMarkers.add( + rootIncompleteTransitions.get(transition), + ); } + }); + } - const markerTransitions = markerInstance.transitions; + const tracingMarkers = queue.tracingMarkers; + if (tracingMarkers !== null) { + tracingMarkers.forEach(marker => { + const markerInstance = marker.stateNode; // There should only be a few tracing marker transitions because // they should be only associated with the transition that // caused them - if (markerTransitions !== null) { - markerTransitions.forEach(transition => { - if (instance.transitions.has(transition)) { - instance.pendingMarkers.add( - markerInstance.pendingSuspenseBoundaries, - ); - } - }); - } + markerInstance.transitions.forEach(transition => { + if (instance.transitions.has(transition)) { + instance.pendingMarkers.add( + markerInstance.pendingSuspenseBoundaries, + ); + } + }); }); } } - finishedWork.updateQueue = null; - } + commitTransitionProgress(finishedWork); - commitTransitionProgress(finishedWork); + if ( + instance.pendingMarkers === null || + instance.pendingMarkers.size === 0 + ) { + finishedWork.updateQueue = null; + } + } } break; diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js index 3fb9f8dfb126..913abb20c413 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js @@ -28,7 +28,6 @@ import type { SuspenseListRenderState, } from './ReactFiberSuspenseComponent.new'; import type {OffscreenState} from './ReactFiberOffscreenComponent'; -import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new'; import type {Cache} from './ReactFiberCacheComponent.new'; import { enableSuspenseAvoidThisFallback, @@ -165,10 +164,7 @@ import {transferActualDuration} from './ReactProfilerTimer.new'; import {popCacheProvider} from './ReactFiberCacheComponent.new'; import {popTreeContext} from './ReactFiberTreeContext.new'; import {popRootTransition, popTransition} from './ReactFiberTransition.new'; -import { - popMarkerInstance, - popRootMarkerInstance, -} from './ReactFiberTracingMarkerComponent.new'; +import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new'; function markUpdate(workInProgress: Fiber) { // Tag the fiber with an update effect. This turns a Placement into @@ -904,11 +900,6 @@ function completeWork( } popCacheProvider(workInProgress, cache); } - - if (enableTransitionTracing) { - popRootMarkerInstance(workInProgress); - } - popRootTransition(workInProgress, fiberRoot, renderLanes); popHostContainer(workInProgress); popTopLevelLegacyContextObject(workInProgress); @@ -1588,10 +1579,7 @@ function completeWork( } case TracingMarkerComponent: { if (enableTransitionTracing) { - const instance: TracingMarkerInstance | null = workInProgress.stateNode; - if (instance !== null) { - popMarkerInstance(workInProgress); - } + popTracingMarker(workInProgress); bubbleProperties(workInProgress); if ( diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js index 6dd8fb07ab09..1fc8a388ea2d 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js @@ -29,7 +29,6 @@ import type { } from './ReactFiberSuspenseComponent.old'; import type {SuspenseContext} from './ReactFiberSuspenseContext.old'; import type {OffscreenState} from './ReactFiberOffscreenComponent'; -import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old'; import type {Cache} from './ReactFiberCacheComponent.old'; import { enableSuspenseAvoidThisFallback, @@ -165,10 +164,7 @@ import {transferActualDuration} from './ReactProfilerTimer.old'; import {popCacheProvider} from './ReactFiberCacheComponent.old'; import {popTreeContext} from './ReactFiberTreeContext.old'; import {popRootTransition, popTransition} from './ReactFiberTransition.old'; -import { - popMarkerInstance, - popRootMarkerInstance, -} from './ReactFiberTracingMarkerComponent.old'; +import {popTracingMarker} from './ReactFiberTracingMarkerComponent.old'; function markUpdate(workInProgress: Fiber) { // Tag the fiber with an update effect. This turns a Placement into @@ -904,11 +900,6 @@ function completeWork( } popCacheProvider(workInProgress, cache); } - - if (enableTransitionTracing) { - popRootMarkerInstance(workInProgress); - } - popRootTransition(workInProgress, fiberRoot, renderLanes); popHostContainer(workInProgress); popTopLevelLegacyContextObject(workInProgress); @@ -1588,10 +1579,7 @@ function completeWork( } case TracingMarkerComponent: { if (enableTransitionTracing) { - const instance: TracingMarkerInstance | null = workInProgress.stateNode; - if (instance !== null) { - popMarkerInstance(workInProgress); - } + popTracingMarker(workInProgress); bubbleProperties(workInProgress); if ( diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js index 4fdff5c8dfb0..00904d9fdd8e 100644 --- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js +++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js @@ -8,12 +8,12 @@ */ import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes'; +import type {Fiber} from './ReactInternalTypes'; import type {Lanes} from './ReactFiberLane.old'; import type {SpawnedCachePool} from './ReactFiberCacheComponent.new'; import type { Transition, PendingSuspenseBoundaries, - TracingMarkerInstance, } from './ReactFiberTracingMarkerComponent.new'; export type OffscreenProps = {| @@ -39,7 +39,7 @@ export type OffscreenState = {| export type OffscreenQueue = {| transitions: Array | null, - markerInstances: Array | null, + tracingMarkers: Array | null, |} | null; export type OffscreenInstance = {| diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js index f171ca0de394..d8ac576f4fd4 100644 --- a/packages/react-reconciler/src/ReactFiberRoot.new.js +++ b/packages/react-reconciler/src/ReactFiberRoot.new.js @@ -92,13 +92,13 @@ function FiberRootNode( this.hydrationCallbacks = null; } - this.incompleteTransitions = new Map(); if (enableTransitionTracing) { this.transitionCallbacks = null; const transitionLanesMap = (this.transitionLanes = []); for (let i = 0; i < TotalLanes; i++) { transitionLanesMap.push(null); } + this.incompleteTransitions = null; } if (enableProfilerTimer && enableProfilerCommitHooks) { diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js index 9b37cee41eda..7bf68ae5d270 100644 --- a/packages/react-reconciler/src/ReactFiberRoot.old.js +++ b/packages/react-reconciler/src/ReactFiberRoot.old.js @@ -92,13 +92,13 @@ function FiberRootNode( this.hydrationCallbacks = null; } - this.incompleteTransitions = new Map(); if (enableTransitionTracing) { this.transitionCallbacks = null; const transitionLanesMap = (this.transitionLanes = []); for (let i = 0; i < TotalLanes; i++) { transitionLanesMap.push(null); } + this.incompleteTransitions = null; } if (enableProfilerTimer && enableProfilerCommitHooks) { diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js index 0eb87bc3d6db..3a136cda686f 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js +++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js @@ -13,7 +13,6 @@ import type {StackCursor} from './ReactFiberStack.new'; import {enableTransitionTracing} from 'shared/ReactFeatureFlags'; import {createCursor, push, pop} from './ReactFiberStack.new'; -import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new'; export type SuspenseInfo = {name: string | null}; @@ -101,77 +100,31 @@ export function processTransitionCallbacks( // tracing marker can be logged as complete // This code lives separate from the ReactFiberTransition code because // we push and pop on the tracing marker, not the suspense boundary -const markerInstanceStack: StackCursor | null> = createCursor( - null, -); +const tracingMarkerStack: StackCursor | null> = createCursor(null); -export function pushRootMarkerInstance(workInProgress: Fiber): void { +export function pushTracingMarker(workInProgress: Fiber): void { if (enableTransitionTracing) { - // On the root, every transition gets mapped to it's own map of - // suspense boundaries. The transition is marked as complete when - // the suspense boundaries map is empty. We do this because every - // transition completes at different times and depends on different - // suspense boundaries to complete. We store all the transitions - // along with its map of suspense boundaries in the root incomplete - // transitions map. Each entry in this map functions like a tracing - // marker does, so we can push it onto the marker instance stack - const transitions = getWorkInProgressTransitions(); - const root = workInProgress.stateNode; - - if (transitions !== null) { - transitions.forEach(transition => { - if (!root.incompleteTransitions.has(transition)) { - root.incompleteTransitions.set(transition, { - transitions: new Set([transition]), - pendingSuspenseBoundaries: null, - }); - } - }); - } - - 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); - } -} - -export function popRootMarkerInstance(workInProgress: Fiber) { - if (enableTransitionTracing) { - pop(markerInstanceStack, workInProgress); - } -} - -export function pushMarkerInstance( - workInProgress: Fiber, - markerInstance: TracingMarkerInstance, -): void { - if (enableTransitionTracing) { - if (markerInstanceStack.current === null) { - push(markerInstanceStack, [markerInstance], workInProgress); + if (tracingMarkerStack.current === null) { + push(tracingMarkerStack, [workInProgress], workInProgress); } else { push( - markerInstanceStack, - markerInstanceStack.current.concat(markerInstance), + tracingMarkerStack, + tracingMarkerStack.current.concat(workInProgress), workInProgress, ); } } } -export function popMarkerInstance(workInProgress: Fiber): void { +export function popTracingMarker(workInProgress: Fiber): void { if (enableTransitionTracing) { - pop(markerInstanceStack, workInProgress); + pop(tracingMarkerStack, workInProgress); } } -export function getMarkerInstances(): Array | null { +export function getTracingMarkers(): Array | null { if (enableTransitionTracing) { - return markerInstanceStack.current; + return tracingMarkerStack.current; } return null; } diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js index 6f25d1f72b82..5f119b3a4b66 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js +++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js @@ -13,7 +13,6 @@ import type {StackCursor} from './ReactFiberStack.old'; import {enableTransitionTracing} from 'shared/ReactFeatureFlags'; import {createCursor, push, pop} from './ReactFiberStack.old'; -import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old'; export type SuspenseInfo = {name: string | null}; @@ -101,77 +100,31 @@ export function processTransitionCallbacks( // tracing marker can be logged as complete // This code lives separate from the ReactFiberTransition code because // we push and pop on the tracing marker, not the suspense boundary -const markerInstanceStack: StackCursor | null> = createCursor( - null, -); +const tracingMarkerStack: StackCursor | null> = createCursor(null); -export function pushRootMarkerInstance(workInProgress: Fiber): void { +export function pushTracingMarker(workInProgress: Fiber): void { if (enableTransitionTracing) { - // On the root, every transition gets mapped to it's own map of - // suspense boundaries. The transition is marked as complete when - // the suspense boundaries map is empty. We do this because every - // transition completes at different times and depends on different - // suspense boundaries to complete. We store all the transitions - // along with its map of suspense boundaries in the root incomplete - // transitions map. Each entry in this map functions like a tracing - // marker does, so we can push it onto the marker instance stack - const transitions = getWorkInProgressTransitions(); - const root = workInProgress.stateNode; - - if (transitions !== null) { - transitions.forEach(transition => { - if (!root.incompleteTransitions.has(transition)) { - root.incompleteTransitions.set(transition, { - transitions: new Set([transition]), - pendingSuspenseBoundaries: null, - }); - } - }); - } - - 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); - } -} - -export function popRootMarkerInstance(workInProgress: Fiber) { - if (enableTransitionTracing) { - pop(markerInstanceStack, workInProgress); - } -} - -export function pushMarkerInstance( - workInProgress: Fiber, - markerInstance: TracingMarkerInstance, -): void { - if (enableTransitionTracing) { - if (markerInstanceStack.current === null) { - push(markerInstanceStack, [markerInstance], workInProgress); + if (tracingMarkerStack.current === null) { + push(tracingMarkerStack, [workInProgress], workInProgress); } else { push( - markerInstanceStack, - markerInstanceStack.current.concat(markerInstance), + tracingMarkerStack, + tracingMarkerStack.current.concat(workInProgress), workInProgress, ); } } } -export function popMarkerInstance(workInProgress: Fiber): void { +export function popTracingMarker(workInProgress: Fiber): void { if (enableTransitionTracing) { - pop(markerInstanceStack, workInProgress); + pop(tracingMarkerStack, workInProgress); } } -export function getMarkerInstances(): Array | null { +export function getTracingMarkers(): Array | null { if (enableTransitionTracing) { - return markerInstanceStack.current; + return tracingMarkerStack.current; } return null; } diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js index 2659a74d80fd..6b2dca917d39 100644 --- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js +++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js @@ -12,7 +12,6 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes'; import type {Lanes} from './ReactFiberLane.new'; import type {SuspenseState} from './ReactFiberSuspenseComponent.new'; import type {Cache} from './ReactFiberCacheComponent.new'; -import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new'; import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new'; import { @@ -53,10 +52,7 @@ import {popCacheProvider} from './ReactFiberCacheComponent.new'; import {transferActualDuration} from './ReactProfilerTimer.new'; import {popTreeContext} from './ReactFiberTreeContext.new'; import {popRootTransition, popTransition} from './ReactFiberTransition.new'; -import { - popMarkerInstance, - popRootMarkerInstance, -} from './ReactFiberTracingMarkerComponent.new'; +import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new'; function unwindWork( current: Fiber | null, @@ -93,11 +89,6 @@ function unwindWork( const cache: Cache = workInProgress.memoizedState.cache; popCacheProvider(workInProgress, cache); } - - if (enableTransitionTracing) { - popRootMarkerInstance(workInProgress); - } - popRootTransition(workInProgress, root, renderLanes); popHostContainer(workInProgress); popTopLevelLegacyContextObject(workInProgress); @@ -174,9 +165,7 @@ function unwindWork( return null; case TracingMarkerComponent: if (enableTransitionTracing) { - if (workInProgress.stateNode !== null) { - popMarkerInstance(workInProgress); - } + popTracingMarker(workInProgress); } return null; default: @@ -208,11 +197,6 @@ function unwindInterruptedWork( const cache: Cache = interruptedWork.memoizedState.cache; popCacheProvider(interruptedWork, cache); } - - if (enableTransitionTracing) { - popRootMarkerInstance(interruptedWork); - } - popRootTransition(interruptedWork, root, renderLanes); popHostContainer(interruptedWork); popTopLevelLegacyContextObject(interruptedWork); @@ -249,11 +233,7 @@ function unwindInterruptedWork( break; case TracingMarkerComponent: if (enableTransitionTracing) { - const instance: TracingMarkerInstance | null = - interruptedWork.stateNode; - if (instance !== null) { - popMarkerInstance(interruptedWork); - } + popTracingMarker(interruptedWork); } break; default: diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js index f56c8ce5d289..ba2e202dd552 100644 --- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js +++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js @@ -12,7 +12,6 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes'; import type {Lanes} from './ReactFiberLane.old'; import type {SuspenseState} from './ReactFiberSuspenseComponent.old'; import type {Cache} from './ReactFiberCacheComponent.old'; -import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old'; import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old'; import { @@ -50,10 +49,7 @@ import {popCacheProvider} from './ReactFiberCacheComponent.old'; import {transferActualDuration} from './ReactProfilerTimer.old'; import {popTreeContext} from './ReactFiberTreeContext.old'; import {popRootTransition, popTransition} from './ReactFiberTransition.old'; -import { - popMarkerInstance, - popRootMarkerInstance, -} from './ReactFiberTracingMarkerComponent.old'; +import {popTracingMarker} from './ReactFiberTracingMarkerComponent.old'; function unwindWork( current: Fiber | null, @@ -90,11 +86,6 @@ function unwindWork( const cache: Cache = workInProgress.memoizedState.cache; popCacheProvider(workInProgress, cache); } - - if (enableTransitionTracing) { - popRootMarkerInstance(workInProgress); - } - popRootTransition(workInProgress, root, renderLanes); popHostContainer(workInProgress); popTopLevelLegacyContextObject(workInProgress); @@ -171,9 +162,7 @@ function unwindWork( return null; case TracingMarkerComponent: if (enableTransitionTracing) { - if (workInProgress.stateNode !== null) { - popMarkerInstance(workInProgress); - } + popTracingMarker(workInProgress); } return null; default: @@ -205,11 +194,6 @@ function unwindInterruptedWork( const cache: Cache = interruptedWork.memoizedState.cache; popCacheProvider(interruptedWork, cache); } - - if (enableTransitionTracing) { - popRootMarkerInstance(interruptedWork); - } - popRootTransition(interruptedWork, root, renderLanes); popHostContainer(interruptedWork); popTopLevelLegacyContextObject(interruptedWork); @@ -246,11 +230,7 @@ function unwindInterruptedWork( break; case TracingMarkerComponent: if (enableTransitionTracing) { - const instance: TracingMarkerInstance | null = - interruptedWork.stateNode; - if (instance !== null) { - popMarkerInstance(interruptedWork); - } + popTracingMarker(interruptedWork); } break; default: diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js index 8aad50f4bfc6..0f6e9bcaf79f 100644 --- a/packages/react-reconciler/src/ReactInternalTypes.js +++ b/packages/react-reconciler/src/ReactInternalTypes.js @@ -335,7 +335,7 @@ type TransitionTracingOnlyFiberRootProperties = {| // are considered complete when the pending suspense boundaries set is // empty. We can represent this as a Map of transitions to suspense // boundary sets - incompleteTransitions: Map, + incompleteTransitions: Map | null, |}; // Exported FiberRoot type includes all properties,