Revert "[Transition Tracing] Refactor Transition Tracing Root Code (#24766)" (#24829)

This reverts commit 401296310f because it's
failing on main, likely due to conflict with something that landed before the
PR was merged. Need to rebase and fix.

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);
       }
     }
   }

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);
       }
     }
   }

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);
+
+                // 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 markerInstances = queue.markerInstances;
-            if (markerInstances !== null) {
-              markerInstances.forEach(markerInstance => {
-                if (markerInstance.pendingSuspenseBoundaries === null) {
-                  markerInstance.pendingSuspenseBoundaries = new Map();
-                }
-
-                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;

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);
+
+                // 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 markerInstances = queue.markerInstances;
-            if (markerInstances !== null) {
-              markerInstances.forEach(markerInstance => {
-                if (markerInstance.pendingSuspenseBoundaries === null) {
-                  markerInstance.pendingSuspenseBoundaries = new Map();
-                }
-
-                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;

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 (

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 (

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<Transition> | null,
-  markerInstances: Array<TracingMarkerInstance> | null,
+  tracingMarkers: Array<Fiber> | null,
 |} | null;
 
 export type OffscreenInstance = {|

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) {

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) {

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<Array<TracingMarkerInstance> | null> = createCursor(
-  null,
-);
+const tracingMarkerStack: StackCursor<Array<Fiber> | 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<TracingMarkerInstance> | null {
+export function getTracingMarkers(): Array<Fiber> | null {
   if (enableTransitionTracing) {
-    return markerInstanceStack.current;
+    return tracingMarkerStack.current;
   }
   return null;
 }

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<Array<TracingMarkerInstance> | null> = createCursor(
-  null,
-);
+const tracingMarkerStack: StackCursor<Array<Fiber> | 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<TracingMarkerInstance> | null {
+export function getTracingMarkers(): Array<Fiber> | null {
   if (enableTransitionTracing) {
-    return markerInstanceStack.current;
+    return tracingMarkerStack.current;
   }
   return null;
 }

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:

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:

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<Transition, PendingSuspenseBoundaries>,
+  incompleteTransitions: Map<Transition, PendingSuspenseBoundaries> | null,
 |};
 
 // Exported FiberRoot type includes all properties,