[Transition Tracing] Change Transition Type Passed Pending Transitions (#24856)

This PR changes the type of the object we store in the pending transitions callbacks map. Previously, we were recreating the transition object that we initially created during `startTransition`. However, we can actually reuse the object instead (and it also gives us a stable way to identify a transition). This PR changes the implementation to reuse the transition object instead of creating a new one

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

@@ -2861,10 +2861,7 @@ function commitPassiveMountOnFiber(
         // Initial render
         if (committedTransitions !== null) {
           committedTransitions.forEach(transition => {
-            addTransitionStartCallbackToPendingTransition({
+            addTransitionStartCallbackToPendingTransition(transition);
-              transitionName: transition.name,
-              startTime: transition.startTime,
-            });
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
@@ -2876,10 +2873,7 @@ function commitPassiveMountOnFiber(
               pendingSuspenseBoundaries === null ||
               pendingSuspenseBoundaries.size === 0
             ) {
-              addTransitionCompleteCallbackToPendingTransition({
+              addTransitionCompleteCallbackToPendingTransition(transition);
-                transitionName: transition.name,
-                startTime: transition.startTime,
-              });
               incompleteTransitions.delete(transition);
             }
           },
@@ -3026,9 +3020,8 @@ function commitPassiveMountOnFiber(
         ) {
           instance.transitions.forEach(transition => {
             addMarkerCompleteCallbackToPendingTransition({
-              transitionName: transition.name,
+              transition,
-              startTime: transition.startTime,
+              name: finishedWork.memoizedProps.name,
-              markerName: finishedWork.memoizedProps.name,
             });
           });
           instance.transitions = null;

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

@@ -2816,10 +2816,7 @@ function commitPassiveMountOnFiber(
         // Initial render
         if (committedTransitions !== null) {
           committedTransitions.forEach(transition => {
-            addTransitionStartCallbackToPendingTransition({
+            addTransitionStartCallbackToPendingTransition(transition);
-              transitionName: transition.name,
-              startTime: transition.startTime,
-            });
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
@@ -2831,10 +2828,7 @@ function commitPassiveMountOnFiber(
               pendingSuspenseBoundaries === null ||
               pendingSuspenseBoundaries.size === 0
             ) {
-              addTransitionCompleteCallbackToPendingTransition({
+              addTransitionCompleteCallbackToPendingTransition(transition);
-                transitionName: transition.name,
-                startTime: transition.startTime,
-              });
               incompleteTransitions.delete(transition);
             }
           },
@@ -2981,9 +2975,8 @@ function commitPassiveMountOnFiber(
         ) {
           instance.transitions.forEach(transition => {
             addMarkerCompleteCallbackToPendingTransition({
-              transitionName: transition.name,
+              transition,
-              startTime: transition.startTime,
+              name: finishedWork.memoizedProps.name,
-              markerName: finishedWork.memoizedProps.name,
             });
           });
           instance.transitions = null;

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

@@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
 
 export type SuspenseInfo = {name: string | null};
 
-export type TransitionObject = {
+export type MarkerTransition = {
-  transitionName: string,
+  transition: Transition,
-  startTime: number,
+  name: string,
 };
 
-export type MarkerTransitionObject = TransitionObject & {markerName: string};
 export type PendingTransitionCallbacks = {
-  transitionStart: Array<TransitionObject> | null,
+  transitionStart: Array<Transition> | null,
-  transitionComplete: Array<TransitionObject> | null,
+  transitionComplete: Array<Transition> | null,
-  markerComplete: Array<MarkerTransitionObject> | null,
+  markerComplete: Array<MarkerTransition> | null,
 };
 
 export type Transition = {
@@ -58,22 +57,19 @@ export function processTransitionCallbacks(
       if (transitionStart !== null) {
         transitionStart.forEach(transition => {
           if (callbacks.onTransitionStart != null) {
-            callbacks.onTransitionStart(
+            callbacks.onTransitionStart(transition.name, transition.startTime);
-              transition.transitionName,
-              transition.startTime,
-            );
           }
         });
       }
 
       const markerComplete = pendingTransitions.markerComplete;
       if (markerComplete !== null) {
-        markerComplete.forEach(transition => {
+        markerComplete.forEach(marker => {
           if (callbacks.onMarkerComplete != null) {
             callbacks.onMarkerComplete(
-              transition.transitionName,
+              marker.transition.name,
-              transition.markerName,
+              marker.name,
-              transition.startTime,
+              marker.transition.startTime,
               endTime,
             );
           }
@@ -85,7 +81,7 @@ export function processTransitionCallbacks(
         transitionComplete.forEach(transition => {
           if (callbacks.onTransitionComplete != null) {
             callbacks.onTransitionComplete(
-              transition.transitionName,
+              transition.name,
               transition.startTime,
               endTime,
             );

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

@@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
 
 export type SuspenseInfo = {name: string | null};
 
-export type TransitionObject = {
+export type MarkerTransition = {
-  transitionName: string,
+  transition: Transition,
-  startTime: number,
+  name: string,
 };
 
-export type MarkerTransitionObject = TransitionObject & {markerName: string};
 export type PendingTransitionCallbacks = {
-  transitionStart: Array<TransitionObject> | null,
+  transitionStart: Array<Transition> | null,
-  transitionComplete: Array<TransitionObject> | null,
+  transitionComplete: Array<Transition> | null,
-  markerComplete: Array<MarkerTransitionObject> | null,
+  markerComplete: Array<MarkerTransition> | null,
 };
 
 export type Transition = {
@@ -58,22 +57,19 @@ export function processTransitionCallbacks(
       if (transitionStart !== null) {
         transitionStart.forEach(transition => {
           if (callbacks.onTransitionStart != null) {
-            callbacks.onTransitionStart(
+            callbacks.onTransitionStart(transition.name, transition.startTime);
-              transition.transitionName,
-              transition.startTime,
-            );
           }
         });
       }
 
       const markerComplete = pendingTransitions.markerComplete;
       if (markerComplete !== null) {
-        markerComplete.forEach(transition => {
+        markerComplete.forEach(marker => {
           if (callbacks.onMarkerComplete != null) {
             callbacks.onMarkerComplete(
-              transition.transitionName,
+              marker.transition.name,
-              transition.markerName,
+              marker.name,
-              transition.startTime,
+              marker.transition.startTime,
               endTime,
             );
           }
@@ -85,7 +81,7 @@ export function processTransitionCallbacks(
         transitionComplete.forEach(transition => {
           if (callbacks.onTransitionComplete != null) {
             callbacks.onTransitionComplete(
-              transition.transitionName,
+              transition.name,
               transition.startTime,
               endTime,
             );

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

@@ -16,8 +16,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {EventPriority} from './ReactEventPriorities.new';
 import type {
   PendingTransitionCallbacks,
-  TransitionObject,
+  MarkerTransition,
-  MarkerTransitionObject,
   Transition,
 } from './ReactFiberTracingMarkerComponent.new';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
@@ -334,7 +333,7 @@ export function getWorkInProgressTransitions() {
 let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
 
 export function addTransitionStartCallbackToPendingTransition(
-  transition: TransitionObject,
+  transition: Transition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -354,7 +353,7 @@ export function addTransitionStartCallbackToPendingTransition(
 }
 
 export function addMarkerCompleteCallbackToPendingTransition(
-  transition: MarkerTransitionObject,
+  transition: MarkerTransition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -374,7 +373,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
 }
 
 export function addTransitionCompleteCallbackToPendingTransition(
-  transition: TransitionObject,
+  transition: Transition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {

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

@@ -17,8 +17,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {EventPriority} from './ReactEventPriorities.old';
 import type {
   PendingTransitionCallbacks,
-  TransitionObject,
+  MarkerTransition,
-  MarkerTransitionObject,
   Transition,
 } from './ReactFiberTracingMarkerComponent.old';
 
@@ -344,7 +343,7 @@ export function getWorkInProgressTransitions() {
 let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
 
 export function addTransitionStartCallbackToPendingTransition(
-  transition: TransitionObject,
+  transition: Transition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -364,7 +363,7 @@ export function addTransitionStartCallbackToPendingTransition(
 }
 
 export function addMarkerCompleteCallbackToPendingTransition(
-  transition: MarkerTransitionObject,
+  transition: MarkerTransition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -384,7 +383,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
 }
 
 export function addTransitionCompleteCallbackToPendingTransition(
-  transition: TransitionObject,
+  transition: Transition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {