@samitouri / QOS-React-2 / commits / deab1263a8

[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

Luna Ruan committed Jul 6, 2022 at 09:37 UTC deab1263a8b8a2cea96bcbff27358570cccc7284
6 files changed +40 -64
packages/react-reconciler/src/ReactFiberCommitWork.new.js
+4 -11
@@ -2861,10 +2861,7 @@ function commitPassiveMountOnFiber(
2861 // Initial render
2862 if (committedTransitions !== null) {
2863 committedTransitions.forEach(transition => {
2864 - addTransitionStartCallbackToPendingTransition({
2865 - transitionName: transition.name,
2866 - startTime: transition.startTime,
2867 - });
2864 + addTransitionStartCallbackToPendingTransition(transition);
2865 });
2866
2867 clearTransitionsForLanes(finishedRoot, committedLanes);
@@ -2876,10 +2873,7 @@ function commitPassiveMountOnFiber(
2873 pendingSuspenseBoundaries === null ||
2874 pendingSuspenseBoundaries.size === 0
2875 ) {
2879 - addTransitionCompleteCallbackToPendingTransition({
2880 - transitionName: transition.name,
2881 - startTime: transition.startTime,
2882 - });
2876 + addTransitionCompleteCallbackToPendingTransition(transition);
2877 incompleteTransitions.delete(transition);
2878 }
2879 },
@@ -3026,9 +3020,8 @@ function commitPassiveMountOnFiber(
3020 ) {
3021 instance.transitions.forEach(transition => {
3022 addMarkerCompleteCallbackToPendingTransition({
3029 - transitionName: transition.name,
3030 - startTime: transition.startTime,
3031 - markerName: finishedWork.memoizedProps.name,
3023 + transition,
3024 + name: finishedWork.memoizedProps.name,
3025 });
3026 });
3027 instance.transitions = null;
packages/react-reconciler/src/ReactFiberCommitWork.old.js
+4 -11
@@ -2816,10 +2816,7 @@ function commitPassiveMountOnFiber(
2816 // Initial render
2817 if (committedTransitions !== null) {
2818 committedTransitions.forEach(transition => {
2819 - addTransitionStartCallbackToPendingTransition({
2820 - transitionName: transition.name,
2821 - startTime: transition.startTime,
2822 - });
2819 + addTransitionStartCallbackToPendingTransition(transition);
2820 });
2821
2822 clearTransitionsForLanes(finishedRoot, committedLanes);
@@ -2831,10 +2828,7 @@ function commitPassiveMountOnFiber(
2828 pendingSuspenseBoundaries === null ||
2829 pendingSuspenseBoundaries.size === 0
2830 ) {
2834 - addTransitionCompleteCallbackToPendingTransition({
2835 - transitionName: transition.name,
2836 - startTime: transition.startTime,
2837 - });
2831 + addTransitionCompleteCallbackToPendingTransition(transition);
2832 incompleteTransitions.delete(transition);
2833 }
2834 },
@@ -2981,9 +2975,8 @@ function commitPassiveMountOnFiber(
2975 ) {
2976 instance.transitions.forEach(transition => {
2977 addMarkerCompleteCallbackToPendingTransition({
2984 - transitionName: transition.name,
2985 - startTime: transition.startTime,
2986 - markerName: finishedWork.memoizedProps.name,
2978 + transition,
2979 + name: finishedWork.memoizedProps.name,
2980 });
2981 });
2982 instance.transitions = null;
packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+12 -16
@@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
17
18 export type SuspenseInfo = {name: string | null};
19
20 -export type TransitionObject = {
21 - transitionName: string,
22 - startTime: number,
20 +export type MarkerTransition = {
21 + transition: Transition,
22 + name: string,
23 };
24
25 -export type MarkerTransitionObject = TransitionObject & {markerName: string};
25 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,
29 };
30
31 export type Transition = {
@@ -58,22 +57,19 @@ export function processTransitionCallbacks(
57 if (transitionStart !== null) {
58 transitionStart.forEach(transition => {
59 if (callbacks.onTransitionStart != null) {
61 - callbacks.onTransitionStart(
62 - transition.transitionName,
63 - transition.startTime,
64 - );
60 + callbacks.onTransitionStart(transition.name, transition.startTime);
61 }
62 });
63 }
64
65 const markerComplete = pendingTransitions.markerComplete;
66 if (markerComplete !== null) {
71 - markerComplete.forEach(transition => {
67 + markerComplete.forEach(marker => {
68 if (callbacks.onMarkerComplete != null) {
69 callbacks.onMarkerComplete(
74 - transition.transitionName,
75 - transition.markerName,
76 - transition.startTime,
70 + marker.transition.name,
71 + marker.name,
72 + marker.transition.startTime,
73 endTime,
74 );
75 }
@@ -85,7 +81,7 @@ export function processTransitionCallbacks(
81 transitionComplete.forEach(transition => {
82 if (callbacks.onTransitionComplete != null) {
83 callbacks.onTransitionComplete(
88 - transition.transitionName,
84 + transition.name,
85 transition.startTime,
86 endTime,
87 );
packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+12 -16
@@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
17
18 export type SuspenseInfo = {name: string | null};
19
20 -export type TransitionObject = {
21 - transitionName: string,
22 - startTime: number,
20 +export type MarkerTransition = {
21 + transition: Transition,
22 + name: string,
23 };
24
25 -export type MarkerTransitionObject = TransitionObject & {markerName: string};
25 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,
29 };
30
31 export type Transition = {
@@ -58,22 +57,19 @@ export function processTransitionCallbacks(
57 if (transitionStart !== null) {
58 transitionStart.forEach(transition => {
59 if (callbacks.onTransitionStart != null) {
61 - callbacks.onTransitionStart(
62 - transition.transitionName,
63 - transition.startTime,
64 - );
60 + callbacks.onTransitionStart(transition.name, transition.startTime);
61 }
62 });
63 }
64
65 const markerComplete = pendingTransitions.markerComplete;
66 if (markerComplete !== null) {
71 - markerComplete.forEach(transition => {
67 + markerComplete.forEach(marker => {
68 if (callbacks.onMarkerComplete != null) {
69 callbacks.onMarkerComplete(
74 - transition.transitionName,
75 - transition.markerName,
76 - transition.startTime,
70 + marker.transition.name,
71 + marker.name,
72 + marker.transition.startTime,
73 endTime,
74 );
75 }
@@ -85,7 +81,7 @@ export function processTransitionCallbacks(
81 transitionComplete.forEach(transition => {
82 if (callbacks.onTransitionComplete != null) {
83 callbacks.onTransitionComplete(
88 - transition.transitionName,
84 + transition.name,
85 transition.startTime,
86 endTime,
87 );
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+4 -5
@@ -16,8 +16,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
16 import type {EventPriority} from './ReactEventPriorities.new';
17 import type {
18 PendingTransitionCallbacks,
19 - TransitionObject,
20 - MarkerTransitionObject,
19 + MarkerTransition,
20 Transition,
21 } from './ReactFiberTracingMarkerComponent.new';
22 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
@@ -334,7 +333,7 @@ export function getWorkInProgressTransitions() {
333 let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
334
335 export function addTransitionStartCallbackToPendingTransition(
337 - transition: TransitionObject,
336 + transition: Transition,
337 ) {
338 if (enableTransitionTracing) {
339 if (currentPendingTransitionCallbacks === null) {
@@ -354,7 +353,7 @@ export function addTransitionStartCallbackToPendingTransition(
353 }
354
355 export function addMarkerCompleteCallbackToPendingTransition(
357 - transition: MarkerTransitionObject,
356 + transition: MarkerTransition,
357 ) {
358 if (enableTransitionTracing) {
359 if (currentPendingTransitionCallbacks === null) {
@@ -374,7 +373,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
373 }
374
375 export function addTransitionCompleteCallbackToPendingTransition(
377 - transition: TransitionObject,
376 + transition: Transition,
377 ) {
378 if (enableTransitionTracing) {
379 if (currentPendingTransitionCallbacks === null) {
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+4 -5
@@ -17,8 +17,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
17 import type {EventPriority} from './ReactEventPriorities.old';
18 import type {
19 PendingTransitionCallbacks,
20 - TransitionObject,
21 - MarkerTransitionObject,
20 + MarkerTransition,
21 Transition,
22 } from './ReactFiberTracingMarkerComponent.old';
23
@@ -344,7 +343,7 @@ export function getWorkInProgressTransitions() {
343 let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
344
345 export function addTransitionStartCallbackToPendingTransition(
347 - transition: TransitionObject,
346 + transition: Transition,
347 ) {
348 if (enableTransitionTracing) {
349 if (currentPendingTransitionCallbacks === null) {
@@ -364,7 +363,7 @@ export function addTransitionStartCallbackToPendingTransition(
363 }
364
365 export function addMarkerCompleteCallbackToPendingTransition(
367 - transition: MarkerTransitionObject,
366 + transition: MarkerTransition,
367 ) {
368 if (enableTransitionTracing) {
369 if (currentPendingTransitionCallbacks === null) {
@@ -384,7 +383,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
383 }
384
385 export function addTransitionCompleteCallbackToPendingTransition(
387 - transition: TransitionObject,
386 + transition: Transition,
387 ) {
388 if (enableTransitionTracing) {
389 if (currentPendingTransitionCallbacks === null) {