maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[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:
Luna Ruan 2022-07-06 09:37:46 -04:00 committed by GitHub
parent 82e9e99098
commit deab1263a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 40 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/react-reconciler/src/ReactFiberCommitWork.new.js
View File

@ -2861,10 +2861,7 @@ function commitPassiveMountOnFiber(
// Initial render
if (committedTransitions !== null) {
committedTransitions.forEach(transition => {
addTransitionStartCallbackToPendingTransition({
transitionName: transition.name,
startTime: transition.startTime,
});
addTransitionStartCallbackToPendingTransition(transition);
});
clearTransitionsForLanes(finishedRoot, committedLanes);
@ -2876,10 +2873,7 @@ function commitPassiveMountOnFiber(
pendingSuspenseBoundaries === null ||
pendingSuspenseBoundaries.size === 0
) {
addTransitionCompleteCallbackToPendingTransition({
transitionName: transition.name,
startTime: transition.startTime,
});
addTransitionCompleteCallbackToPendingTransition(transition);
incompleteTransitions.delete(transition);
}
},
@ -3026,9 +3020,8 @@ function commitPassiveMountOnFiber(
) {
instance.transitions.forEach(transition => {
addMarkerCompleteCallbackToPendingTransition({
transitionName: transition.name,
startTime: transition.startTime,
markerName: finishedWork.memoizedProps.name,
transition,
name: finishedWork.memoizedProps.name,
});
});
instance.transitions = null;

15
packages/react-reconciler/src/ReactFiberCommitWork.old.js
View File

@ -2816,10 +2816,7 @@ function commitPassiveMountOnFiber(
// Initial render
if (committedTransitions !== null) {
committedTransitions.forEach(transition => {
addTransitionStartCallbackToPendingTransition({
transitionName: transition.name,
startTime: transition.startTime,
});
addTransitionStartCallbackToPendingTransition(transition);
});
clearTransitionsForLanes(finishedRoot, committedLanes);
@ -2831,10 +2828,7 @@ function commitPassiveMountOnFiber(
pendingSuspenseBoundaries === null ||
pendingSuspenseBoundaries.size === 0
) {
addTransitionCompleteCallbackToPendingTransition({
transitionName: transition.name,
startTime: transition.startTime,
});
addTransitionCompleteCallbackToPendingTransition(transition);
incompleteTransitions.delete(transition);
}
},
@ -2981,9 +2975,8 @@ function commitPassiveMountOnFiber(
) {
instance.transitions.forEach(transition => {
addMarkerCompleteCallbackToPendingTransition({
transitionName: transition.name,
startTime: transition.startTime,
markerName: finishedWork.memoizedProps.name,
transition,
name: finishedWork.memoizedProps.name,
});
});
instance.transitions = null;

28
packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
View File

@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
export type SuspenseInfo = {name: string | null};
export type TransitionObject = {
transitionName: string,
startTime: number,
export type MarkerTransition = {
transition: Transition,
name: string,
};
export type MarkerTransitionObject = TransitionObject & {markerName: string};
export type PendingTransitionCallbacks = {
transitionStart: Array<TransitionObject> | null,
transitionComplete: Array<TransitionObject> | null,
markerComplete: Array<MarkerTransitionObject> | null,
transitionStart: Array<Transition> | null,
transitionComplete: Array<Transition> | null,
markerComplete: Array<MarkerTransition> | null,
};
export type Transition = {
@ -58,22 +57,19 @@ export function processTransitionCallbacks(
if (transitionStart !== null) {
transitionStart.forEach(transition => {
if (callbacks.onTransitionStart != null) {
callbacks.onTransitionStart(
transition.transitionName,
transition.startTime,
);
callbacks.onTransitionStart(transition.name, transition.startTime);
}
});
}
const markerComplete = pendingTransitions.markerComplete;
if (markerComplete !== null) {
markerComplete.forEach(transition => {
markerComplete.forEach(marker => {
if (callbacks.onMarkerComplete != null) {
callbacks.onMarkerComplete(
transition.transitionName,
transition.markerName,
transition.startTime,
marker.transition.name,
marker.name,
marker.transition.startTime,
endTime,
);
}
@ -85,7 +81,7 @@ export function processTransitionCallbacks(
transitionComplete.forEach(transition => {
if (callbacks.onTransitionComplete != null) {
callbacks.onTransitionComplete(
transition.transitionName,
transition.name,
transition.startTime,
endTime,
);

28
packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
View File

@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
export type SuspenseInfo = {name: string | null};
export type TransitionObject = {
transitionName: string,
startTime: number,
export type MarkerTransition = {
transition: Transition,
name: string,
};
export type MarkerTransitionObject = TransitionObject & {markerName: string};
export type PendingTransitionCallbacks = {
transitionStart: Array<TransitionObject> | null,
transitionComplete: Array<TransitionObject> | null,
markerComplete: Array<MarkerTransitionObject> | null,
transitionStart: Array<Transition> | null,
transitionComplete: Array<Transition> | null,
markerComplete: Array<MarkerTransition> | null,
};
export type Transition = {
@ -58,22 +57,19 @@ export function processTransitionCallbacks(
if (transitionStart !== null) {
transitionStart.forEach(transition => {
if (callbacks.onTransitionStart != null) {
callbacks.onTransitionStart(
transition.transitionName,
transition.startTime,
);
callbacks.onTransitionStart(transition.name, transition.startTime);
}
});
}
const markerComplete = pendingTransitions.markerComplete;
if (markerComplete !== null) {
markerComplete.forEach(transition => {
markerComplete.forEach(marker => {
if (callbacks.onMarkerComplete != null) {
callbacks.onMarkerComplete(
transition.transitionName,
transition.markerName,
transition.startTime,
marker.transition.name,
marker.name,
marker.transition.startTime,
endTime,
);
}
@ -85,7 +81,7 @@ export function processTransitionCallbacks(
transitionComplete.forEach(transition => {
if (callbacks.onTransitionComplete != null) {
callbacks.onTransitionComplete(
transition.transitionName,
transition.name,
transition.startTime,
endTime,
);

9
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
View File

@ -16,8 +16,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
import type {EventPriority} from './ReactEventPriorities.new';
import type {
PendingTransitionCallbacks,
TransitionObject,
MarkerTransitionObject,
MarkerTransition,
Transition,
} from './ReactFiberTracingMarkerComponent.new';
import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
@ -334,7 +333,7 @@ export function getWorkInProgressTransitions() {
let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
export function addTransitionStartCallbackToPendingTransition(
transition: TransitionObject,
transition: Transition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
@ -354,7 +353,7 @@ export function addTransitionStartCallbackToPendingTransition(
}
export function addMarkerCompleteCallbackToPendingTransition(
transition: MarkerTransitionObject,
transition: MarkerTransition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
@ -374,7 +373,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
}
export function addTransitionCompleteCallbackToPendingTransition(
transition: TransitionObject,
transition: Transition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {

9
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
View File

@ -17,8 +17,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
import type {EventPriority} from './ReactEventPriorities.old';
import type {
PendingTransitionCallbacks,
TransitionObject,
MarkerTransitionObject,
MarkerTransition,
Transition,
} from './ReactFiberTracingMarkerComponent.old';
@ -344,7 +343,7 @@ export function getWorkInProgressTransitions() {
let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
export function addTransitionStartCallbackToPendingTransition(
transition: TransitionObject,
transition: Transition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
@ -364,7 +363,7 @@ export function addTransitionStartCallbackToPendingTransition(
}
export function addMarkerCompleteCallbackToPendingTransition(
transition: MarkerTransitionObject,
transition: MarkerTransition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
@ -384,7 +383,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
}
export function addTransitionCompleteCallbackToPendingTransition(
transition: TransitionObject,
transition: Transition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {