Skip to content

Commit deab126

Browse files
lunaruanlunaruan
authored
[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
1 parent 82e9e99 commit deab126

6 files changed

+40
-64
lines changed

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

+4-11
Original file line numberDiff line numberDiff line change
@@ -2861,10 +2861,7 @@ function commitPassiveMountOnFiber(
28612861
// Initial render
28622862
if (committedTransitions !== null) {
28632863
committedTransitions.forEach(transition => {
2864-
addTransitionStartCallbackToPendingTransition({
2865-
transitionName: transition.name,
2866-
startTime: transition.startTime,
2867-
});
2864+
addTransitionStartCallbackToPendingTransition(transition);
28682865
});
28692866

28702867
clearTransitionsForLanes(finishedRoot, committedLanes);
@@ -2876,10 +2873,7 @@ function commitPassiveMountOnFiber(
28762873
pendingSuspenseBoundaries === null ||
28772874
pendingSuspenseBoundaries.size === 0
28782875
) {
2879-
addTransitionCompleteCallbackToPendingTransition({
2880-
transitionName: transition.name,
2881-
startTime: transition.startTime,
2882-
});
2876+
addTransitionCompleteCallbackToPendingTransition(transition);
28832877
incompleteTransitions.delete(transition);
28842878
}
28852879
},
@@ -3026,9 +3020,8 @@ function commitPassiveMountOnFiber(
30263020
) {
30273021
instance.transitions.forEach(transition => {
30283022
addMarkerCompleteCallbackToPendingTransition({
3029-
transitionName: transition.name,
3030-
startTime: transition.startTime,
3031-
markerName: finishedWork.memoizedProps.name,
3023+
transition,
3024+
name: finishedWork.memoizedProps.name,
30323025
});
30333026
});
30343027
instance.transitions = null;

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

+4-11
Original file line numberDiff line numberDiff line change
@@ -2816,10 +2816,7 @@ function commitPassiveMountOnFiber(
28162816
// Initial render
28172817
if (committedTransitions !== null) {
28182818
committedTransitions.forEach(transition => {
2819-
addTransitionStartCallbackToPendingTransition({
2820-
transitionName: transition.name,
2821-
startTime: transition.startTime,
2822-
});
2819+
addTransitionStartCallbackToPendingTransition(transition);
28232820
});
28242821

28252822
clearTransitionsForLanes(finishedRoot, committedLanes);
@@ -2831,10 +2828,7 @@ function commitPassiveMountOnFiber(
28312828
pendingSuspenseBoundaries === null ||
28322829
pendingSuspenseBoundaries.size === 0
28332830
) {
2834-
addTransitionCompleteCallbackToPendingTransition({
2835-
transitionName: transition.name,
2836-
startTime: transition.startTime,
2837-
});
2831+
addTransitionCompleteCallbackToPendingTransition(transition);
28382832
incompleteTransitions.delete(transition);
28392833
}
28402834
},
@@ -2981,9 +2975,8 @@ function commitPassiveMountOnFiber(
29812975
) {
29822976
instance.transitions.forEach(transition => {
29832977
addMarkerCompleteCallbackToPendingTransition({
2984-
transitionName: transition.name,
2985-
startTime: transition.startTime,
2986-
markerName: finishedWork.memoizedProps.name,
2978+
transition,
2979+
name: finishedWork.memoizedProps.name,
29872980
});
29882981
});
29892982
instance.transitions = null;

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

+12-16
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
1717

1818
export type SuspenseInfo = {name: string | null};
1919

20-
export type TransitionObject = {
21-
transitionName: string,
22-
startTime: number,
20+
export type MarkerTransition = {
21+
transition: Transition,
22+
name: string,
2323
};
2424

25-
export type MarkerTransitionObject = TransitionObject & {markerName: string};
2625
export type PendingTransitionCallbacks = {
27-
transitionStart: Array<TransitionObject> | null,
28-
transitionComplete: Array<TransitionObject> | null,
29-
markerComplete: Array<MarkerTransitionObject> | null,
26+
transitionStart: Array<Transition> | null,
27+
transitionComplete: Array<Transition> | null,
28+
markerComplete: Array<MarkerTransition> | null,
3029
};
3130

3231
export type Transition = {
@@ -58,22 +57,19 @@ export function processTransitionCallbacks(
5857
if (transitionStart !== null) {
5958
transitionStart.forEach(transition => {
6059
if (callbacks.onTransitionStart != null) {
61-
callbacks.onTransitionStart(
62-
transition.transitionName,
63-
transition.startTime,
64-
);
60+
callbacks.onTransitionStart(transition.name, transition.startTime);
6561
}
6662
});
6763
}
6864

6965
const markerComplete = pendingTransitions.markerComplete;
7066
if (markerComplete !== null) {
71-
markerComplete.forEach(transition => {
67+
markerComplete.forEach(marker => {
7268
if (callbacks.onMarkerComplete != null) {
7369
callbacks.onMarkerComplete(
74-
transition.transitionName,
75-
transition.markerName,
76-
transition.startTime,
70+
marker.transition.name,
71+
marker.name,
72+
marker.transition.startTime,
7773
endTime,
7874
);
7975
}
@@ -85,7 +81,7 @@ export function processTransitionCallbacks(
8581
transitionComplete.forEach(transition => {
8682
if (callbacks.onTransitionComplete != null) {
8783
callbacks.onTransitionComplete(
88-
transition.transitionName,
84+
transition.name,
8985
transition.startTime,
9086
endTime,
9187
);

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

+12-16
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
1717

1818
export type SuspenseInfo = {name: string | null};
1919

20-
export type TransitionObject = {
21-
transitionName: string,
22-
startTime: number,
20+
export type MarkerTransition = {
21+
transition: Transition,
22+
name: string,
2323
};
2424

25-
export type MarkerTransitionObject = TransitionObject & {markerName: string};
2625
export type PendingTransitionCallbacks = {
27-
transitionStart: Array<TransitionObject> | null,
28-
transitionComplete: Array<TransitionObject> | null,
29-
markerComplete: Array<MarkerTransitionObject> | null,
26+
transitionStart: Array<Transition> | null,
27+
transitionComplete: Array<Transition> | null,
28+
markerComplete: Array<MarkerTransition> | null,
3029
};
3130

3231
export type Transition = {
@@ -58,22 +57,19 @@ export function processTransitionCallbacks(
5857
if (transitionStart !== null) {
5958
transitionStart.forEach(transition => {
6059
if (callbacks.onTransitionStart != null) {
61-
callbacks.onTransitionStart(
62-
transition.transitionName,
63-
transition.startTime,
64-
);
60+
callbacks.onTransitionStart(transition.name, transition.startTime);
6561
}
6662
});
6763
}
6864

6965
const markerComplete = pendingTransitions.markerComplete;
7066
if (markerComplete !== null) {
71-
markerComplete.forEach(transition => {
67+
markerComplete.forEach(marker => {
7268
if (callbacks.onMarkerComplete != null) {
7369
callbacks.onMarkerComplete(
74-
transition.transitionName,
75-
transition.markerName,
76-
transition.startTime,
70+
marker.transition.name,
71+
marker.name,
72+
marker.transition.startTime,
7773
endTime,
7874
);
7975
}
@@ -85,7 +81,7 @@ export function processTransitionCallbacks(
8581
transitionComplete.forEach(transition => {
8682
if (callbacks.onTransitionComplete != null) {
8783
callbacks.onTransitionComplete(
88-
transition.transitionName,
84+
transition.name,
8985
transition.startTime,
9086
endTime,
9187
);

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

+4-5
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
1616
import type {EventPriority} from './ReactEventPriorities.new';
1717
import type {
1818
PendingTransitionCallbacks,
19-
TransitionObject,
20-
MarkerTransitionObject,
19+
MarkerTransition,
2120
Transition,
2221
} from './ReactFiberTracingMarkerComponent.new';
2322
import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
@@ -334,7 +333,7 @@ export function getWorkInProgressTransitions() {
334333
let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
335334

336335
export function addTransitionStartCallbackToPendingTransition(
337-
transition: TransitionObject,
336+
transition: Transition,
338337
) {
339338
if (enableTransitionTracing) {
340339
if (currentPendingTransitionCallbacks === null) {
@@ -354,7 +353,7 @@ export function addTransitionStartCallbackToPendingTransition(
354353
}
355354

356355
export function addMarkerCompleteCallbackToPendingTransition(
357-
transition: MarkerTransitionObject,
356+
transition: MarkerTransition,
358357
) {
359358
if (enableTransitionTracing) {
360359
if (currentPendingTransitionCallbacks === null) {
@@ -374,7 +373,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
374373
}
375374

376375
export function addTransitionCompleteCallbackToPendingTransition(
377-
transition: TransitionObject,
376+
transition: Transition,
378377
) {
379378
if (enableTransitionTracing) {
380379
if (currentPendingTransitionCallbacks === null) {

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

+4-5
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
1717
import type {EventPriority} from './ReactEventPriorities.old';
1818
import type {
1919
PendingTransitionCallbacks,
20-
TransitionObject,
21-
MarkerTransitionObject,
20+
MarkerTransition,
2221
Transition,
2322
} from './ReactFiberTracingMarkerComponent.old';
2423

@@ -344,7 +343,7 @@ export function getWorkInProgressTransitions() {
344343
let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
345344

346345
export function addTransitionStartCallbackToPendingTransition(
347-
transition: TransitionObject,
346+
transition: Transition,
348347
) {
349348
if (enableTransitionTracing) {
350349
if (currentPendingTransitionCallbacks === null) {
@@ -364,7 +363,7 @@ export function addTransitionStartCallbackToPendingTransition(
364363
}
365364

366365
export function addMarkerCompleteCallbackToPendingTransition(
367-
transition: MarkerTransitionObject,
366+
transition: MarkerTransition,
368367
) {
369368
if (enableTransitionTracing) {
370369
if (currentPendingTransitionCallbacks === null) {
@@ -384,7 +383,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
384383
}
385384

386385
export function addTransitionCompleteCallbackToPendingTransition(
387-
transition: TransitionObject,
386+
transition: Transition,
388387
) {
389388
if (enableTransitionTracing) {
390389
if (currentPendingTransitionCallbacks === null) {

0 commit comments

Comments
 (0)