[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
This commit is contained in:
parent
82e9e99098
commit
deab1263a8
|
@ -2861,10 +2861,7 @@ function commitPassiveMountOnFiber(
|
||||||
// Initial render
|
// Initial render
|
||||||
if (committedTransitions !== null) {
|
if (committedTransitions !== null) {
|
||||||
committedTransitions.forEach(transition => {
|
committedTransitions.forEach(transition => {
|
||||||
addTransitionStartCallbackToPendingTransition({
|
addTransitionStartCallbackToPendingTransition(transition);
|
||||||
transitionName: transition.name,
|
|
||||||
startTime: transition.startTime,
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
clearTransitionsForLanes(finishedRoot, committedLanes);
|
clearTransitionsForLanes(finishedRoot, committedLanes);
|
||||||
|
@ -2876,10 +2873,7 @@ function commitPassiveMountOnFiber(
|
||||||
pendingSuspenseBoundaries === null ||
|
pendingSuspenseBoundaries === null ||
|
||||||
pendingSuspenseBoundaries.size === 0
|
pendingSuspenseBoundaries.size === 0
|
||||||
) {
|
) {
|
||||||
addTransitionCompleteCallbackToPendingTransition({
|
addTransitionCompleteCallbackToPendingTransition(transition);
|
||||||
transitionName: transition.name,
|
|
||||||
startTime: transition.startTime,
|
|
||||||
});
|
|
||||||
incompleteTransitions.delete(transition);
|
incompleteTransitions.delete(transition);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -3026,9 +3020,8 @@ function commitPassiveMountOnFiber(
|
||||||
) {
|
) {
|
||||||
instance.transitions.forEach(transition => {
|
instance.transitions.forEach(transition => {
|
||||||
addMarkerCompleteCallbackToPendingTransition({
|
addMarkerCompleteCallbackToPendingTransition({
|
||||||
transitionName: transition.name,
|
transition,
|
||||||
startTime: transition.startTime,
|
name: finishedWork.memoizedProps.name,
|
||||||
markerName: finishedWork.memoizedProps.name,
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
instance.transitions = null;
|
instance.transitions = null;
|
||||||
|
|
|
@ -2816,10 +2816,7 @@ function commitPassiveMountOnFiber(
|
||||||
// Initial render
|
// Initial render
|
||||||
if (committedTransitions !== null) {
|
if (committedTransitions !== null) {
|
||||||
committedTransitions.forEach(transition => {
|
committedTransitions.forEach(transition => {
|
||||||
addTransitionStartCallbackToPendingTransition({
|
addTransitionStartCallbackToPendingTransition(transition);
|
||||||
transitionName: transition.name,
|
|
||||||
startTime: transition.startTime,
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
clearTransitionsForLanes(finishedRoot, committedLanes);
|
clearTransitionsForLanes(finishedRoot, committedLanes);
|
||||||
|
@ -2831,10 +2828,7 @@ function commitPassiveMountOnFiber(
|
||||||
pendingSuspenseBoundaries === null ||
|
pendingSuspenseBoundaries === null ||
|
||||||
pendingSuspenseBoundaries.size === 0
|
pendingSuspenseBoundaries.size === 0
|
||||||
) {
|
) {
|
||||||
addTransitionCompleteCallbackToPendingTransition({
|
addTransitionCompleteCallbackToPendingTransition(transition);
|
||||||
transitionName: transition.name,
|
|
||||||
startTime: transition.startTime,
|
|
||||||
});
|
|
||||||
incompleteTransitions.delete(transition);
|
incompleteTransitions.delete(transition);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -2981,9 +2975,8 @@ function commitPassiveMountOnFiber(
|
||||||
) {
|
) {
|
||||||
instance.transitions.forEach(transition => {
|
instance.transitions.forEach(transition => {
|
||||||
addMarkerCompleteCallbackToPendingTransition({
|
addMarkerCompleteCallbackToPendingTransition({
|
||||||
transitionName: transition.name,
|
transition,
|
||||||
startTime: transition.startTime,
|
name: finishedWork.memoizedProps.name,
|
||||||
markerName: finishedWork.memoizedProps.name,
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
instance.transitions = null;
|
instance.transitions = null;
|
||||||
|
|
|
@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
|
||||||
|
|
||||||
export type SuspenseInfo = {name: string | null};
|
export type SuspenseInfo = {name: string | null};
|
||||||
|
|
||||||
export type TransitionObject = {
|
export type MarkerTransition = {
|
||||||
transitionName: string,
|
transition: Transition,
|
||||||
startTime: number,
|
name: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
export type MarkerTransitionObject = TransitionObject & {markerName: string};
|
|
||||||
export type PendingTransitionCallbacks = {
|
export type PendingTransitionCallbacks = {
|
||||||
transitionStart: Array<TransitionObject> | null,
|
transitionStart: Array<Transition> | null,
|
||||||
transitionComplete: Array<TransitionObject> | null,
|
transitionComplete: Array<Transition> | null,
|
||||||
markerComplete: Array<MarkerTransitionObject> | null,
|
markerComplete: Array<MarkerTransition> | null,
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Transition = {
|
export type Transition = {
|
||||||
|
@ -58,22 +57,19 @@ export function processTransitionCallbacks(
|
||||||
if (transitionStart !== null) {
|
if (transitionStart !== null) {
|
||||||
transitionStart.forEach(transition => {
|
transitionStart.forEach(transition => {
|
||||||
if (callbacks.onTransitionStart != null) {
|
if (callbacks.onTransitionStart != null) {
|
||||||
callbacks.onTransitionStart(
|
callbacks.onTransitionStart(transition.name, transition.startTime);
|
||||||
transition.transitionName,
|
|
||||||
transition.startTime,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const markerComplete = pendingTransitions.markerComplete;
|
const markerComplete = pendingTransitions.markerComplete;
|
||||||
if (markerComplete !== null) {
|
if (markerComplete !== null) {
|
||||||
markerComplete.forEach(transition => {
|
markerComplete.forEach(marker => {
|
||||||
if (callbacks.onMarkerComplete != null) {
|
if (callbacks.onMarkerComplete != null) {
|
||||||
callbacks.onMarkerComplete(
|
callbacks.onMarkerComplete(
|
||||||
transition.transitionName,
|
marker.transition.name,
|
||||||
transition.markerName,
|
marker.name,
|
||||||
transition.startTime,
|
marker.transition.startTime,
|
||||||
endTime,
|
endTime,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -85,7 +81,7 @@ export function processTransitionCallbacks(
|
||||||
transitionComplete.forEach(transition => {
|
transitionComplete.forEach(transition => {
|
||||||
if (callbacks.onTransitionComplete != null) {
|
if (callbacks.onTransitionComplete != null) {
|
||||||
callbacks.onTransitionComplete(
|
callbacks.onTransitionComplete(
|
||||||
transition.transitionName,
|
transition.name,
|
||||||
transition.startTime,
|
transition.startTime,
|
||||||
endTime,
|
endTime,
|
||||||
);
|
);
|
||||||
|
|
|
@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
|
||||||
|
|
||||||
export type SuspenseInfo = {name: string | null};
|
export type SuspenseInfo = {name: string | null};
|
||||||
|
|
||||||
export type TransitionObject = {
|
export type MarkerTransition = {
|
||||||
transitionName: string,
|
transition: Transition,
|
||||||
startTime: number,
|
name: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
export type MarkerTransitionObject = TransitionObject & {markerName: string};
|
|
||||||
export type PendingTransitionCallbacks = {
|
export type PendingTransitionCallbacks = {
|
||||||
transitionStart: Array<TransitionObject> | null,
|
transitionStart: Array<Transition> | null,
|
||||||
transitionComplete: Array<TransitionObject> | null,
|
transitionComplete: Array<Transition> | null,
|
||||||
markerComplete: Array<MarkerTransitionObject> | null,
|
markerComplete: Array<MarkerTransition> | null,
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Transition = {
|
export type Transition = {
|
||||||
|
@ -58,22 +57,19 @@ export function processTransitionCallbacks(
|
||||||
if (transitionStart !== null) {
|
if (transitionStart !== null) {
|
||||||
transitionStart.forEach(transition => {
|
transitionStart.forEach(transition => {
|
||||||
if (callbacks.onTransitionStart != null) {
|
if (callbacks.onTransitionStart != null) {
|
||||||
callbacks.onTransitionStart(
|
callbacks.onTransitionStart(transition.name, transition.startTime);
|
||||||
transition.transitionName,
|
|
||||||
transition.startTime,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const markerComplete = pendingTransitions.markerComplete;
|
const markerComplete = pendingTransitions.markerComplete;
|
||||||
if (markerComplete !== null) {
|
if (markerComplete !== null) {
|
||||||
markerComplete.forEach(transition => {
|
markerComplete.forEach(marker => {
|
||||||
if (callbacks.onMarkerComplete != null) {
|
if (callbacks.onMarkerComplete != null) {
|
||||||
callbacks.onMarkerComplete(
|
callbacks.onMarkerComplete(
|
||||||
transition.transitionName,
|
marker.transition.name,
|
||||||
transition.markerName,
|
marker.name,
|
||||||
transition.startTime,
|
marker.transition.startTime,
|
||||||
endTime,
|
endTime,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -85,7 +81,7 @@ export function processTransitionCallbacks(
|
||||||
transitionComplete.forEach(transition => {
|
transitionComplete.forEach(transition => {
|
||||||
if (callbacks.onTransitionComplete != null) {
|
if (callbacks.onTransitionComplete != null) {
|
||||||
callbacks.onTransitionComplete(
|
callbacks.onTransitionComplete(
|
||||||
transition.transitionName,
|
transition.name,
|
||||||
transition.startTime,
|
transition.startTime,
|
||||||
endTime,
|
endTime,
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,8 +16,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
|
||||||
import type {EventPriority} from './ReactEventPriorities.new';
|
import type {EventPriority} from './ReactEventPriorities.new';
|
||||||
import type {
|
import type {
|
||||||
PendingTransitionCallbacks,
|
PendingTransitionCallbacks,
|
||||||
TransitionObject,
|
MarkerTransition,
|
||||||
MarkerTransitionObject,
|
|
||||||
Transition,
|
Transition,
|
||||||
} from './ReactFiberTracingMarkerComponent.new';
|
} from './ReactFiberTracingMarkerComponent.new';
|
||||||
import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
|
import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
|
||||||
|
@ -334,7 +333,7 @@ export function getWorkInProgressTransitions() {
|
||||||
let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
|
let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
|
||||||
|
|
||||||
export function addTransitionStartCallbackToPendingTransition(
|
export function addTransitionStartCallbackToPendingTransition(
|
||||||
transition: TransitionObject,
|
transition: Transition,
|
||||||
) {
|
) {
|
||||||
if (enableTransitionTracing) {
|
if (enableTransitionTracing) {
|
||||||
if (currentPendingTransitionCallbacks === null) {
|
if (currentPendingTransitionCallbacks === null) {
|
||||||
|
@ -354,7 +353,7 @@ export function addTransitionStartCallbackToPendingTransition(
|
||||||
}
|
}
|
||||||
|
|
||||||
export function addMarkerCompleteCallbackToPendingTransition(
|
export function addMarkerCompleteCallbackToPendingTransition(
|
||||||
transition: MarkerTransitionObject,
|
transition: MarkerTransition,
|
||||||
) {
|
) {
|
||||||
if (enableTransitionTracing) {
|
if (enableTransitionTracing) {
|
||||||
if (currentPendingTransitionCallbacks === null) {
|
if (currentPendingTransitionCallbacks === null) {
|
||||||
|
@ -374,7 +373,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
|
||||||
}
|
}
|
||||||
|
|
||||||
export function addTransitionCompleteCallbackToPendingTransition(
|
export function addTransitionCompleteCallbackToPendingTransition(
|
||||||
transition: TransitionObject,
|
transition: Transition,
|
||||||
) {
|
) {
|
||||||
if (enableTransitionTracing) {
|
if (enableTransitionTracing) {
|
||||||
if (currentPendingTransitionCallbacks === null) {
|
if (currentPendingTransitionCallbacks === null) {
|
||||||
|
|
|
@ -17,8 +17,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
|
||||||
import type {EventPriority} from './ReactEventPriorities.old';
|
import type {EventPriority} from './ReactEventPriorities.old';
|
||||||
import type {
|
import type {
|
||||||
PendingTransitionCallbacks,
|
PendingTransitionCallbacks,
|
||||||
TransitionObject,
|
MarkerTransition,
|
||||||
MarkerTransitionObject,
|
|
||||||
Transition,
|
Transition,
|
||||||
} from './ReactFiberTracingMarkerComponent.old';
|
} from './ReactFiberTracingMarkerComponent.old';
|
||||||
|
|
||||||
|
@ -344,7 +343,7 @@ export function getWorkInProgressTransitions() {
|
||||||
let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
|
let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
|
||||||
|
|
||||||
export function addTransitionStartCallbackToPendingTransition(
|
export function addTransitionStartCallbackToPendingTransition(
|
||||||
transition: TransitionObject,
|
transition: Transition,
|
||||||
) {
|
) {
|
||||||
if (enableTransitionTracing) {
|
if (enableTransitionTracing) {
|
||||||
if (currentPendingTransitionCallbacks === null) {
|
if (currentPendingTransitionCallbacks === null) {
|
||||||
|
@ -364,7 +363,7 @@ export function addTransitionStartCallbackToPendingTransition(
|
||||||
}
|
}
|
||||||
|
|
||||||
export function addMarkerCompleteCallbackToPendingTransition(
|
export function addMarkerCompleteCallbackToPendingTransition(
|
||||||
transition: MarkerTransitionObject,
|
transition: MarkerTransition,
|
||||||
) {
|
) {
|
||||||
if (enableTransitionTracing) {
|
if (enableTransitionTracing) {
|
||||||
if (currentPendingTransitionCallbacks === null) {
|
if (currentPendingTransitionCallbacks === null) {
|
||||||
|
@ -384,7 +383,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
|
||||||
}
|
}
|
||||||
|
|
||||||
export function addTransitionCompleteCallbackToPendingTransition(
|
export function addTransitionCompleteCallbackToPendingTransition(
|
||||||
transition: TransitionObject,
|
transition: Transition,
|
||||||
) {
|
) {
|
||||||
if (enableTransitionTracing) {
|
if (enableTransitionTracing) {
|
||||||
if (currentPendingTransitionCallbacks === null) {
|
if (currentPendingTransitionCallbacks === null) {
|
||||||
|
|
Loading…
Reference in New Issue