old

packages/react-reconciler/src/ReactFiberBeginWork.old.js

@@ -27,6 +27,7 @@ import type {
   OffscreenProps,
   OffscreenState,
   OffscreenQueue,
+  OffscreenInstance,
 } from './ReactFiberOffscreenComponent';
 import type {
   Cache,
@@ -785,7 +786,10 @@ 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
-        transitions = workInProgress.stateNode.transitions;
+        const instance: OffscreenInstance | null = workInProgress.stateNode;
+        if (instance !== null && instance.transitions != null) {
+          transitions = Array.from(instance.transitions);
+        }
       }
 
       pushTransition(workInProgress, prevCachePool, transitions);
@@ -910,7 +914,7 @@ function updateTracingMarkerComponent(
     }
   }
 
-  const instance = workInProgress.stateNode;
+  const instance: TracingMarkerInstance | null = workInProgress.stateNode;
   if (instance !== null) {
     pushMarkerInstance(workInProgress, instance);
   }
@@ -3714,7 +3718,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        const instance: TracingMarkerInstance = workInProgress.stateNode;
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
         if (instance !== null) {
           pushMarkerInstance(workInProgress, instance);
         }

packages/react-reconciler/src/ReactFiberCommitWork.old.js

@@ -2819,30 +2819,25 @@ function commitPassiveMountOnFiber(
               transitionName: transition.name,
               startTime: transition.startTime,
             });
-
-            if (!incompleteTransitions.has(transition)) {
-              incompleteTransitions.set(transition, null);
-            }
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
 
-        if (incompleteTransitions !== null) {
-          incompleteTransitions.forEach((pendingBoundaries, transition) => {
-            if (pendingBoundaries === null || pendingBoundaries.size === 0) {
+        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;
-          }
-        }
+          },
+        );
 
         clearTransitionsForLanes(finishedRoot, committedLanes);
       }
@@ -2908,6 +2903,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

packages/react-reconciler/src/ReactFiberCompleteWork.old.js

@@ -29,6 +29,7 @@ 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,
@@ -1589,7 +1590,8 @@ function completeWork(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        if (workInProgress.stateNode !== null) {
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+        if (instance !== null) {
           popMarkerInstance(workInProgress);
         }
         bubbleProperties(workInProgress);

packages/react-reconciler/src/ReactFiberRoot.old.js

@@ -90,13 +90,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.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 (!root.incompleteTransitions.has(transition)) {
+          root.incompleteTransitions.set(transition, {
+            transitions: new Set([transition]),
+            pendingSuspenseBoundaries: null,
+          });
+        }
       });
     }
 
-    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({
-          transitions: new Set([transition]),
-          pendingSuspenseBoundaries,
-        });
-      });
-      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);
   }
 }
 

packages/react-reconciler/src/ReactFiberUnwindWork.old.js

@@ -12,6 +12,7 @@ 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 {
@@ -245,7 +246,9 @@ function unwindInterruptedWork(
       break;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        if (interruptedWork.stateNode !== null) {
+        const instance: TracingMarkerInstance | null =
+          interruptedWork.stateNode;
+        if (instance !== null) {
           popMarkerInstance(interruptedWork);
         }
       }