[Transition Tracing] Add Tag Field to Marker Instance (#25085)

We were previously using `markerInstance.name` to figure out whether the marker instance was on the tracing marker or the root, but this is unsustainable. This adds a tag field so we can explicitly check this.

Author: lunaruan

packages/react-reconciler/src/ReactFiber.new.js

@@ -98,6 +98,7 @@ import {
   REACT_CACHE_TYPE,
   REACT_TRACING_MARKER_TYPE,
 } from 'shared/ReactSymbols';
+import {TransitionTracingMarker} from './ReactFiberTracingMarkerComponent.new';
 
 export type {Fiber};
 
@@ -770,6 +771,7 @@ export function createFiberFromTracingMarker(
   fiber.elementType = REACT_TRACING_MARKER_TYPE;
   fiber.lanes = lanes;
   const tracingMarkerInstance: TracingMarkerInstance = {
+    tag: TransitionTracingMarker,
     transitions: null,
     pendingBoundaries: null,
   };

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

@@ -98,6 +98,7 @@ import {
   REACT_CACHE_TYPE,
   REACT_TRACING_MARKER_TYPE,
 } from 'shared/ReactSymbols';
+import {TransitionTracingMarker} from './ReactFiberTracingMarkerComponent.old';
 
 export type {Fiber};
 
@@ -770,6 +771,7 @@ export function createFiberFromTracingMarker(
   fiber.elementType = REACT_TRACING_MARKER_TYPE;
   fiber.lanes = lanes;
   const tracingMarkerInstance: TracingMarkerInstance = {
+    tag: TransitionTracingMarker,
     transitions: null,
     pendingBoundaries: null,
   };

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

@@ -268,6 +268,7 @@ import {
   getMarkerInstances,
   pushMarkerInstance,
   pushRootMarkerInstance,
+  TransitionTracingMarker,
 } from './ReactFiberTracingMarkerComponent.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -976,6 +977,7 @@ function updateTracingMarkerComponent(
     const currentTransitions = getPendingTransitions();
     if (currentTransitions !== null) {
       const markerInstance: TracingMarkerInstance = {
+        tag: TransitionTracingMarker,
         transitions: new Set(currentTransitions),
         pendingBoundaries: new Map(),
         name: workInProgress.pendingProps.name,

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

@@ -268,6 +268,7 @@ import {
   getMarkerInstances,
   pushMarkerInstance,
   pushRootMarkerInstance,
+  TransitionTracingMarker,
 } from './ReactFiberTracingMarkerComponent.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -976,6 +977,7 @@ function updateTracingMarkerComponent(
     const currentTransitions = getPendingTransitions();
     if (currentTransitions !== null) {
       const markerInstance: TracingMarkerInstance = {
+        tag: TransitionTracingMarker,
         transitions: new Set(currentTransitions),
         pendingBoundaries: new Map(),
         name: workInProgress.pendingProps.name,

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

@@ -177,6 +177,10 @@ import {
   OffscreenVisible,
   OffscreenPassiveEffectsConnected,
 } from './ReactFiberOffscreenComponent';
+import {
+  TransitionRoot,
+  TransitionTracingMarker,
+} from './ReactFiberTracingMarkerComponent.new';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -1184,13 +1188,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
               name,
             });
             if (transitions !== null) {
-              if (markerInstance.name) {
+              if (
+                markerInstance.tag === TransitionTracingMarker &&
+                markerInstance.name !== undefined
+              ) {
                 addMarkerProgressCallbackToPendingTransition(
                   markerInstance.name,
                   transitions,
                   pendingBoundaries,
                 );
-              } else {
+              } else if (markerInstance.tag === TransitionRoot) {
                 transitions.forEach(transition => {
                   addTransitionProgressCallbackToPendingTransition(
                     transition,
@@ -1216,13 +1223,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
           ) {
             pendingBoundaries.delete(offscreenInstance);
             if (transitions !== null) {
-              if (markerInstance.name) {
+              if (
+                markerInstance.tag === TransitionTracingMarker &&
+                markerInstance.name !== undefined
+              ) {
                 addMarkerProgressCallbackToPendingTransition(
                   markerInstance.name,
                   transitions,
                   pendingBoundaries,
                 );
-              } else {
+              } else if (markerInstance.tag === TransitionRoot) {
                 transitions.forEach(transition => {
                   addTransitionProgressCallbackToPendingTransition(
                     transition,

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

@@ -177,6 +177,10 @@ import {
   OffscreenVisible,
   OffscreenPassiveEffectsConnected,
 } from './ReactFiberOffscreenComponent';
+import {
+  TransitionRoot,
+  TransitionTracingMarker,
+} from './ReactFiberTracingMarkerComponent.old';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -1184,13 +1188,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
               name,
             });
             if (transitions !== null) {
-              if (markerInstance.name) {
+              if (
+                markerInstance.tag === TransitionTracingMarker &&
+                markerInstance.name !== undefined
+              ) {
                 addMarkerProgressCallbackToPendingTransition(
                   markerInstance.name,
                   transitions,
                   pendingBoundaries,
                 );
-              } else {
+              } else if (markerInstance.tag === TransitionRoot) {
                 transitions.forEach(transition => {
                   addTransitionProgressCallbackToPendingTransition(
                     transition,
@@ -1216,13 +1223,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
           ) {
             pendingBoundaries.delete(offscreenInstance);
             if (transitions !== null) {
-              if (markerInstance.name) {
+              if (
+                markerInstance.tag === TransitionTracingMarker &&
+                markerInstance.name !== undefined
+              ) {
                 addMarkerProgressCallbackToPendingTransition(
                   markerInstance.name,
                   transitions,
                   pendingBoundaries,
                 );
-              } else {
+              } else if (markerInstance.tag === TransitionRoot) {
                 transitions.forEach(transition => {
                   addTransitionProgressCallbackToPendingTransition(
                     transition,

packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js

@@ -37,11 +37,16 @@ export type BatchConfigTransition = {
 };
 
 export type TracingMarkerInstance = {|
+  tag?: TracingMarkerTag,
   pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
   name?: string,
 |};
 
+export const TransitionRoot = 0;
+export const TransitionTracingMarker = 1;
+export type TracingMarkerTag = 0 | 1;
+
 export type PendingBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
 export function processTransitionCallbacks(
@@ -146,6 +151,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
       transitions.forEach(transition => {
         if (!root.incompleteTransitions.has(transition)) {
           const markerInstance: TracingMarkerInstance = {
+            tag: TransitionRoot,
             transitions: new Set([transition]),
             pendingBoundaries: null,
           };

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

@@ -37,11 +37,16 @@ export type BatchConfigTransition = {
 };
 
 export type TracingMarkerInstance = {|
+  tag?: TracingMarkerTag,
   pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
   name?: string,
 |};
 
+export const TransitionRoot = 0;
+export const TransitionTracingMarker = 1;
+export type TracingMarkerTag = 0 | 1;
+
 export type PendingBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
 export function processTransitionCallbacks(
@@ -146,6 +151,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
       transitions.forEach(transition => {
         if (!root.incompleteTransitions.has(transition)) {
           const markerInstance: TracingMarkerInstance = {
+            tag: TransitionRoot,
             transitions: new Set([transition]),
             pendingBoundaries: null,
           };