[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.
Luna Ruan committed
Aug 11, 2022 at 23:04 UTC
32baab38f8f48f629ccd3f7564251b91dc2d777d
8 files changed
+48
-8
packages/react-reconciler/src/ReactFiber.new.js
+2
@@ -98,6 +98,7 @@ import {
98
REACT_CACHE_TYPE,
99
REACT_TRACING_MARKER_TYPE,
100
} from 'shared/ReactSymbols';
101
+import {TransitionTracingMarker} from './ReactFiberTracingMarkerComponent.new';
102
103
export type {Fiber};
104
@@ -770,6 +771,7 @@ export function createFiberFromTracingMarker(
771
fiber.elementType = REACT_TRACING_MARKER_TYPE;
772
fiber.lanes = lanes;
773
const tracingMarkerInstance: TracingMarkerInstance = {
774
+ tag: TransitionTracingMarker,
775
transitions: null,
776
pendingBoundaries: null,
777
};
packages/react-reconciler/src/ReactFiber.old.js
+2
@@ -98,6 +98,7 @@ import {
98
REACT_CACHE_TYPE,
99
REACT_TRACING_MARKER_TYPE,
100
} from 'shared/ReactSymbols';
101
+import {TransitionTracingMarker} from './ReactFiberTracingMarkerComponent.old';
102
103
export type {Fiber};
104
@@ -770,6 +771,7 @@ export function createFiberFromTracingMarker(
771
fiber.elementType = REACT_TRACING_MARKER_TYPE;
772
fiber.lanes = lanes;
773
const tracingMarkerInstance: TracingMarkerInstance = {
774
+ tag: TransitionTracingMarker,
775
transitions: null,
776
pendingBoundaries: null,
777
};
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+2
@@ -268,6 +268,7 @@ import {
268
getMarkerInstances,
269
pushMarkerInstance,
270
pushRootMarkerInstance,
271
+ TransitionTracingMarker,
272
} from './ReactFiberTracingMarkerComponent.new';
273
274
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -976,6 +977,7 @@ function updateTracingMarkerComponent(
977
const currentTransitions = getPendingTransitions();
978
if (currentTransitions !== null) {
979
const markerInstance: TracingMarkerInstance = {
980
+ tag: TransitionTracingMarker,
981
transitions: new Set(currentTransitions),
982
pendingBoundaries: new Map(),
983
name: workInProgress.pendingProps.name,
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+2
@@ -268,6 +268,7 @@ import {
268
getMarkerInstances,
269
pushMarkerInstance,
270
pushRootMarkerInstance,
271
+ TransitionTracingMarker,
272
} from './ReactFiberTracingMarkerComponent.old';
273
274
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -976,6 +977,7 @@ function updateTracingMarkerComponent(
977
const currentTransitions = getPendingTransitions();
978
if (currentTransitions !== null) {
979
const markerInstance: TracingMarkerInstance = {
980
+ tag: TransitionTracingMarker,
981
transitions: new Set(currentTransitions),
982
pendingBoundaries: new Map(),
983
name: workInProgress.pendingProps.name,
packages/react-reconciler/src/ReactFiberCommitWork.new.js
+14
-4
@@ -177,6 +177,10 @@ import {
177
OffscreenVisible,
178
OffscreenPassiveEffectsConnected,
179
} from './ReactFiberOffscreenComponent';
180
+import {
181
+ TransitionRoot,
182
+ TransitionTracingMarker,
183
+} from './ReactFiberTracingMarkerComponent.new';
184
185
let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
186
if (__DEV__) {
@@ -1184,13 +1188,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
1188
name,
1189
});
1190
if (transitions !== null) {
1187
- if (markerInstance.name) {
1191
+ if (
1192
+ markerInstance.tag === TransitionTracingMarker &&
1193
+ markerInstance.name !== undefined
1194
+ ) {
1195
addMarkerProgressCallbackToPendingTransition(
1196
markerInstance.name,
1197
transitions,
1198
pendingBoundaries,
1199
);
1193
- } else {
1200
+ } else if (markerInstance.tag === TransitionRoot) {
1201
transitions.forEach(transition => {
1202
addTransitionProgressCallbackToPendingTransition(
1203
transition,
@@ -1216,13 +1223,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
1223
) {
1224
pendingBoundaries.delete(offscreenInstance);
1225
if (transitions !== null) {
1219
- if (markerInstance.name) {
1226
+ if (
1227
+ markerInstance.tag === TransitionTracingMarker &&
1228
+ markerInstance.name !== undefined
1229
+ ) {
1230
addMarkerProgressCallbackToPendingTransition(
1231
markerInstance.name,
1232
transitions,
1233
pendingBoundaries,
1234
);
1225
- } else {
1235
+ } else if (markerInstance.tag === TransitionRoot) {
1236
transitions.forEach(transition => {
1237
addTransitionProgressCallbackToPendingTransition(
1238
transition,
packages/react-reconciler/src/ReactFiberCommitWork.old.js
+14
-4
@@ -177,6 +177,10 @@ import {
177
OffscreenVisible,
178
OffscreenPassiveEffectsConnected,
179
} from './ReactFiberOffscreenComponent';
180
+import {
181
+ TransitionRoot,
182
+ TransitionTracingMarker,
183
+} from './ReactFiberTracingMarkerComponent.old';
184
185
let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
186
if (__DEV__) {
@@ -1184,13 +1188,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
1188
name,
1189
});
1190
if (transitions !== null) {
1187
- if (markerInstance.name) {
1191
+ if (
1192
+ markerInstance.tag === TransitionTracingMarker &&
1193
+ markerInstance.name !== undefined
1194
+ ) {
1195
addMarkerProgressCallbackToPendingTransition(
1196
markerInstance.name,
1197
transitions,
1198
pendingBoundaries,
1199
);
1193
- } else {
1200
+ } else if (markerInstance.tag === TransitionRoot) {
1201
transitions.forEach(transition => {
1202
addTransitionProgressCallbackToPendingTransition(
1203
transition,
@@ -1216,13 +1223,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
1223
) {
1224
pendingBoundaries.delete(offscreenInstance);
1225
if (transitions !== null) {
1219
- if (markerInstance.name) {
1226
+ if (
1227
+ markerInstance.tag === TransitionTracingMarker &&
1228
+ markerInstance.name !== undefined
1229
+ ) {
1230
addMarkerProgressCallbackToPendingTransition(
1231
markerInstance.name,
1232
transitions,
1233
pendingBoundaries,
1234
);
1225
- } else {
1235
+ } else if (markerInstance.tag === TransitionRoot) {
1236
transitions.forEach(transition => {
1237
addTransitionProgressCallbackToPendingTransition(
1238
transition,
packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+6
@@ -37,11 +37,16 @@ export type BatchConfigTransition = {
37
};
38
39
export type TracingMarkerInstance = {|
40
+ tag?: TracingMarkerTag,
41
pendingBoundaries: PendingBoundaries | null,
42
transitions: Set<Transition> | null,
43
name?: string,
44
|};
45
46
+export const TransitionRoot = 0;
47
+export const TransitionTracingMarker = 1;
48
+export type TracingMarkerTag = 0 | 1;
49
+
50
export type PendingBoundaries = Map<OffscreenInstance, SuspenseInfo>;
51
52
export function processTransitionCallbacks(
@@ -146,6 +151,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
151
transitions.forEach(transition => {
152
if (!root.incompleteTransitions.has(transition)) {
153
const markerInstance: TracingMarkerInstance = {
154
+ tag: TransitionRoot,
155
transitions: new Set([transition]),
156
pendingBoundaries: null,
157
};
packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+6
@@ -37,11 +37,16 @@ export type BatchConfigTransition = {
37
};
38
39
export type TracingMarkerInstance = {|
40
+ tag?: TracingMarkerTag,
41
pendingBoundaries: PendingBoundaries | null,
42
transitions: Set<Transition> | null,
43
name?: string,
44
|};
45
46
+export const TransitionRoot = 0;
47
+export const TransitionTracingMarker = 1;
48
+export type TracingMarkerTag = 0 | 1;
49
+
50
export type PendingBoundaries = Map<OffscreenInstance, SuspenseInfo>;
51
52
export function processTransitionCallbacks(
@@ -146,6 +151,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
151
transitions.forEach(transition => {
152
if (!root.incompleteTransitions.has(transition)) {
153
const markerInstance: TracingMarkerInstance = {
154
+ tag: TransitionRoot,
155
transitions: new Set([transition]),
156
pendingBoundaries: null,
157
};