Skip to content

Commit

Permalink
[Transition Tracing] Change Transition Type Passed Pending Transitions (
Browse files Browse the repository at this point in the history 
#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
  • Loading branch information
@lunaruan
lunaruan committed Jul 6, 2022
1 parent 82e9e99 commit deab126
Show file tree
Hide file tree
Showing 6 changed files with 40 additions and 64 deletions.
15 changes: 4 additions & 11 deletions packages/react-reconciler/src/ReactFiberCommitWork.new.js
View file
Expand Up @@ -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);
Expand All @@ -2876,10 +2873,7 @@ function commitPassiveMountOnFiber(
pendingSuspenseBoundaries === null ||
pendingSuspenseBoundaries.size === 0
) {
addTransitionCompleteCallbackToPendingTransition({
transitionName: transition.name,
startTime: transition.startTime,
});
addTransitionCompleteCallbackToPendingTransition(transition);
incompleteTransitions.delete(transition);
}
},
Expand Down Expand Up @@ -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;
Expand Down
15 changes: 4 additions & 11 deletions packages/react-reconciler/src/ReactFiberCommitWork.old.js
View file
Expand Up @@ -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);
Expand All @@ -2831,10 +2828,7 @@ function commitPassiveMountOnFiber(
pendingSuspenseBoundaries === null ||
pendingSuspenseBoundaries.size === 0
) {
addTransitionCompleteCallbackToPendingTransition({
transitionName: transition.name,
startTime: transition.startTime,
});
addTransitionCompleteCallbackToPendingTransition(transition);
incompleteTransitions.delete(transition);
}
},
Expand Down Expand Up @@ -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;
Expand Down
28 changes: 12 additions & 16 deletions packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
View file
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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,
);
}
Expand All @@ -85,7 +81,7 @@ export function processTransitionCallbacks(
transitionComplete.forEach(transition => {
if (callbacks.onTransitionComplete != null) {
callbacks.onTransitionComplete(
transition.transitionName,
transition.name,
transition.startTime,
endTime,
);
Expand Down
28 changes: 12 additions & 16 deletions packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
View file
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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,
);
}
Expand All @@ -85,7 +81,7 @@ export function processTransitionCallbacks(
transitionComplete.forEach(transition => {
if (callbacks.onTransitionComplete != null) {
callbacks.onTransitionComplete(
transition.transitionName,
transition.name,
transition.startTime,
endTime,
);
Expand Down
9 changes: 4 additions & 5 deletions packages/react-reconciler/src/ReactFiberWorkLoop.new.js
View file
Expand Up @@ -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';
Expand Down Expand Up @@ -334,7 +333,7 @@ export function getWorkInProgressTransitions() {
let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;

export function addTransitionStartCallbackToPendingTransition(
transition: TransitionObject,
transition: Transition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
Expand All @@ -354,7 +353,7 @@ export function addTransitionStartCallbackToPendingTransition(
}

export function addMarkerCompleteCallbackToPendingTransition(
transition: MarkerTransitionObject,
transition: MarkerTransition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
Expand All @@ -374,7 +373,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
}

export function addTransitionCompleteCallbackToPendingTransition(
transition: TransitionObject,
transition: Transition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
Expand Down
9 changes: 4 additions & 5 deletions packages/react-reconciler/src/ReactFiberWorkLoop.old.js
View file
Expand Up @@ -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';

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

export function addTransitionStartCallbackToPendingTransition(
transition: TransitionObject,
transition: Transition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
Expand All @@ -364,7 +363,7 @@ export function addTransitionStartCallbackToPendingTransition(
}

export function addMarkerCompleteCallbackToPendingTransition(
transition: MarkerTransitionObject,
transition: MarkerTransition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
Expand All @@ -384,7 +383,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
}

export function addTransitionCompleteCallbackToPendingTransition(
transition: TransitionObject,
transition: Transition,
) {
if (enableTransitionTracing) {
if (currentPendingTransitionCallbacks === null) {
Expand Down

0 comments on commit deab126

Please sign in to comment.