From deab1263a8b8a2cea96bcbff27358570cccc7284 Mon Sep 17 00:00:00 2001 From: Luna Ruan Date: Wed, 6 Jul 2022 09:37:46 -0400 Subject: [PATCH] [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 --- .../src/ReactFiberCommitWork.new.js | 15 +++------- .../src/ReactFiberCommitWork.old.js | 15 +++------- .../ReactFiberTracingMarkerComponent.new.js | 28 ++++++++----------- .../ReactFiberTracingMarkerComponent.old.js | 28 ++++++++----------- .../src/ReactFiberWorkLoop.new.js | 9 +++--- .../src/ReactFiberWorkLoop.old.js | 9 +++--- 6 files changed, 40 insertions(+), 64 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 2bb8b00d1c4d5..3d19e98ccb048 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -2861,10 +2861,7 @@ function commitPassiveMountOnFiber( // Initial render if (committedTransitions !== null) { committedTransitions.forEach(transition => { - addTransitionStartCallbackToPendingTransition({ - transitionName: transition.name, - startTime: transition.startTime, - }); + addTransitionStartCallbackToPendingTransition(transition); }); clearTransitionsForLanes(finishedRoot, committedLanes); @@ -2876,10 +2873,7 @@ function commitPassiveMountOnFiber( pendingSuspenseBoundaries === null || pendingSuspenseBoundaries.size === 0 ) { - addTransitionCompleteCallbackToPendingTransition({ - transitionName: transition.name, - startTime: transition.startTime, - }); + addTransitionCompleteCallbackToPendingTransition(transition); incompleteTransitions.delete(transition); } }, @@ -3026,9 +3020,8 @@ function commitPassiveMountOnFiber( ) { instance.transitions.forEach(transition => { addMarkerCompleteCallbackToPendingTransition({ - transitionName: transition.name, - startTime: transition.startTime, - markerName: finishedWork.memoizedProps.name, + transition, + name: finishedWork.memoizedProps.name, }); }); instance.transitions = null; diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 95318b19a856c..54030004af755 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -2816,10 +2816,7 @@ function commitPassiveMountOnFiber( // Initial render if (committedTransitions !== null) { committedTransitions.forEach(transition => { - addTransitionStartCallbackToPendingTransition({ - transitionName: transition.name, - startTime: transition.startTime, - }); + addTransitionStartCallbackToPendingTransition(transition); }); clearTransitionsForLanes(finishedRoot, committedLanes); @@ -2831,10 +2828,7 @@ function commitPassiveMountOnFiber( pendingSuspenseBoundaries === null || pendingSuspenseBoundaries.size === 0 ) { - addTransitionCompleteCallbackToPendingTransition({ - transitionName: transition.name, - startTime: transition.startTime, - }); + addTransitionCompleteCallbackToPendingTransition(transition); incompleteTransitions.delete(transition); } }, @@ -2981,9 +2975,8 @@ function commitPassiveMountOnFiber( ) { instance.transitions.forEach(transition => { addMarkerCompleteCallbackToPendingTransition({ - transitionName: transition.name, - startTime: transition.startTime, - markerName: finishedWork.memoizedProps.name, + transition, + name: finishedWork.memoizedProps.name, }); }); instance.transitions = null; diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js index 23d02575c1fa0..e7522fd93fa4a 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js +++ b/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 = { - transitionName: string, - startTime: number, +export type MarkerTransition = { + transition: Transition, + name: string, }; -export type MarkerTransitionObject = TransitionObject & {markerName: string}; export type PendingTransitionCallbacks = { - transitionStart: Array | null, - transitionComplete: Array | null, - markerComplete: Array | null, + transitionStart: Array | null, + transitionComplete: Array | null, + markerComplete: Array | null, }; export type Transition = { @@ -58,22 +57,19 @@ export function processTransitionCallbacks( if (transitionStart !== null) { transitionStart.forEach(transition => { if (callbacks.onTransitionStart != null) { - callbacks.onTransitionStart( - transition.transitionName, - transition.startTime, - ); + callbacks.onTransitionStart(transition.name, transition.startTime); } }); } const markerComplete = pendingTransitions.markerComplete; if (markerComplete !== null) { - markerComplete.forEach(transition => { + markerComplete.forEach(marker => { if (callbacks.onMarkerComplete != null) { callbacks.onMarkerComplete( - transition.transitionName, - transition.markerName, - transition.startTime, + marker.transition.name, + marker.name, + 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, ); diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js index 0bbdd053883f4..0aba8780968af 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js +++ b/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 = { - transitionName: string, - startTime: number, +export type MarkerTransition = { + transition: Transition, + name: string, }; -export type MarkerTransitionObject = TransitionObject & {markerName: string}; export type PendingTransitionCallbacks = { - transitionStart: Array | null, - transitionComplete: Array | null, - markerComplete: Array | null, + transitionStart: Array | null, + transitionComplete: Array | null, + markerComplete: Array | null, }; export type Transition = { @@ -58,22 +57,19 @@ export function processTransitionCallbacks( if (transitionStart !== null) { transitionStart.forEach(transition => { if (callbacks.onTransitionStart != null) { - callbacks.onTransitionStart( - transition.transitionName, - transition.startTime, - ); + callbacks.onTransitionStart(transition.name, transition.startTime); } }); } const markerComplete = pendingTransitions.markerComplete; if (markerComplete !== null) { - markerComplete.forEach(transition => { + markerComplete.forEach(marker => { if (callbacks.onMarkerComplete != null) { callbacks.onMarkerComplete( - transition.transitionName, - transition.markerName, - transition.startTime, + marker.transition.name, + marker.name, + 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, ); diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index 74049d3a2136c..f3c141d76cf54 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/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, - MarkerTransitionObject, + MarkerTransition, 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) { diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index cb24a22798dbf..3d3a32d8c9d5d 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/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, - MarkerTransitionObject, + MarkerTransition, 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) {