From b6b0f30cdd2809a1a77143935e15ceabf260a035 Mon Sep 17 00:00:00 2001 From: Luna Ruan Date: Thu, 11 Aug 2022 23:04:45 -0400 Subject: [PATCH] [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. --- .../react-reconciler/src/ReactFiber.new.js | 2 ++ .../react-reconciler/src/ReactFiber.old.js | 2 ++ .../src/ReactFiberBeginWork.new.js | 2 ++ .../src/ReactFiberBeginWork.old.js | 2 ++ .../src/ReactFiberCommitWork.new.js | 18 ++++++++++++++---- .../src/ReactFiberCommitWork.old.js | 18 ++++++++++++++---- .../ReactFiberTracingMarkerComponent.new.js | 6 ++++++ .../ReactFiberTracingMarkerComponent.old.js | 6 ++++++ 8 files changed, 48 insertions(+), 8 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js index 560a3d0ec3321..fc2d03109fd2b 100644 --- a/packages/react-reconciler/src/ReactFiber.new.js +++ b/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, }; diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js index 0a29c4dce782f..572c1b770adaa 100644 --- a/packages/react-reconciler/src/ReactFiber.old.js +++ b/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, }; diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js index 1d3ca68b05b5b..61edb46d32f2a 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js +++ b/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, diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index 1fa498e29a929..65403e6c8ad37 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/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, diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 6a8b095f11a24..eb696d06eb4af 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/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 | 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, diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 651414549b096..6c17402e08460 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/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 | 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, diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js index fea28213ff82a..31cc4c06841a4 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js +++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js @@ -37,11 +37,16 @@ export type BatchConfigTransition = { }; export type TracingMarkerInstance = {| + tag?: TracingMarkerTag, pendingBoundaries: PendingBoundaries | null, transitions: Set | null, name?: string, |}; +export const TransitionRoot = 0; +export const TransitionTracingMarker = 1; +export type TracingMarkerTag = 0 | 1; + export type PendingBoundaries = Map; 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, }; diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js index ddd8289d8a4bc..0e3c352d77287 100644 --- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js +++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js @@ -37,11 +37,16 @@ export type BatchConfigTransition = { }; export type TracingMarkerInstance = {| + tag?: TracingMarkerTag, pendingBoundaries: PendingBoundaries | null, transitions: Set | null, name?: string, |}; +export const TransitionRoot = 0; +export const TransitionTracingMarker = 1; +export type TracingMarkerTag = 0 | 1; + export type PendingBoundaries = Map; 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, };