Skip to content

[Transition Tracing] Add Support for Multiple Transitions on Root #24732

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 17, 2022
Merged

[Transition Tracing] Add Support for Multiple Transitions on Root #24732

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
74debbf
add support for multiple roots
lunaruan Jun 15, 2022
e8bf4f6
old
lunaruan Jun 15, 2022
0d186bb
fixed nits
lunaruan Jun 17, 2022
dd962d3
fixed nits old
lunaruan Jun 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/react-reconciler/src/ReactFiber.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -717,6 +717,8 @@ export function createFiberFromOffscreen(
fiber.lanes = lanes;
const primaryChildInstance: OffscreenInstance = {
isHidden: false,
pendingMarkers: null,
transitions: null,
};
fiber.stateNode = primaryChildInstance;
return fiber;
Expand Down
2 changes: 2 additions & 0 deletions packages/react-reconciler/src/ReactFiber.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -717,6 +717,8 @@ export function createFiberFromOffscreen(
fiber.lanes = lanes;
const primaryChildInstance: OffscreenInstance = {
isHidden: false,
pendingMarkers: null,
transitions: null,
};
fiber.stateNode = primaryChildInstance;
return fiber;
Expand Down
21 changes: 7 additions & 14 deletions packages/react-reconciler/src/ReactFiberBeginWork.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -675,7 +675,6 @@ function updateOffscreenComponent(
const nextState: OffscreenState = {
baseLanes: NoLanes,
cachePool: null,
transitions: null,
};
workInProgress.memoizedState = nextState;
if (enableCache) {
Expand Down Expand Up @@ -709,7 +708,6 @@ function updateOffscreenComponent(
const nextState: OffscreenState = {
baseLanes: nextBaseLanes,
cachePool: spawnedCachePool,
transitions: null,
};
workInProgress.memoizedState = nextState;
workInProgress.updateQueue = null;
Expand Down Expand Up @@ -745,7 +743,6 @@ function updateOffscreenComponent(
const nextState: OffscreenState = {
baseLanes: NoLanes,
cachePool: null,
transitions: null,
};
workInProgress.memoizedState = nextState;
// Push the lanes that were skipped when we bailed out.
Expand Down Expand Up @@ -780,13 +777,12 @@ function updateOffscreenComponent(
}

let transitions = null;
if (
workInProgress.memoizedState !== null &&
workInProgress.memoizedState.transitions !== null
) {
// We have now gone from hidden to visible, so any transitions should
// be added to the stack to get added to any Offscreen/suspense children
transitions = workInProgress.memoizedState.transitions;
if (enableTransitionTracing) {
if (workInProgress.stateNode.transitions !== null) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need to check if it's null, right? It can just pass through

// We have now gone from hidden to visible, so any transitions should
// be added to the stack to get added to any Offscreen/suspense children
transitions = workInProgress.stateNode.transitions;
}
}

pushTransition(workInProgress, prevCachePool, transitions);
Expand Down Expand Up @@ -1323,8 +1319,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
element: nextChildren,
isDehydrated: false,
cache: nextState.cache,
pendingSuspenseBoundaries: nextState.pendingSuspenseBoundaries,
transitions: nextState.transitions,
incompleteTransitions: nextState.incompleteTransitions,
};
const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
// `baseState` can always be the last state because the root doesn't
Expand Down Expand Up @@ -1920,7 +1915,6 @@ function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
return {
baseLanes: renderLanes,
cachePool: getSuspendedCache(),
transitions: null,
};
}

Expand Down Expand Up @@ -1955,7 +1949,6 @@ function updateSuspenseOffscreenState(
return {
baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
cachePool,
transitions: prevOffscreenState.transitions,
};
}

Expand Down
21 changes: 7 additions & 14 deletions packages/react-reconciler/src/ReactFiberBeginWork.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -675,7 +675,6 @@ function updateOffscreenComponent(
const nextState: OffscreenState = {
baseLanes: NoLanes,
cachePool: null,
transitions: null,
};
workInProgress.memoizedState = nextState;
if (enableCache) {
Expand Down Expand Up @@ -709,7 +708,6 @@ function updateOffscreenComponent(
const nextState: OffscreenState = {
baseLanes: nextBaseLanes,
cachePool: spawnedCachePool,
transitions: null,
};
workInProgress.memoizedState = nextState;
workInProgress.updateQueue = null;
Expand Down Expand Up @@ -745,7 +743,6 @@ function updateOffscreenComponent(
const nextState: OffscreenState = {
baseLanes: NoLanes,
cachePool: null,
transitions: null,
};
workInProgress.memoizedState = nextState;
// Push the lanes that were skipped when we bailed out.
Expand Down Expand Up @@ -780,13 +777,12 @@ function updateOffscreenComponent(
}

let transitions = null;
if (
workInProgress.memoizedState !== null &&
workInProgress.memoizedState.transitions !== null
) {
// We have now gone from hidden to visible, so any transitions should
// be added to the stack to get added to any Offscreen/suspense children
transitions = workInProgress.memoizedState.transitions;
if (enableTransitionTracing) {
if (workInProgress.stateNode.transitions !== null) {
// We have now gone from hidden to visible, so any transitions should
// be added to the stack to get added to any Offscreen/suspense children
transitions = workInProgress.stateNode.transitions;
}
}

pushTransition(workInProgress, prevCachePool, transitions);
Expand Down Expand Up @@ -1323,8 +1319,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
element: nextChildren,
isDehydrated: false,
cache: nextState.cache,
pendingSuspenseBoundaries: nextState.pendingSuspenseBoundaries,
transitions: nextState.transitions,
incompleteTransitions: nextState.incompleteTransitions,
};
const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
// `baseState` can always be the last state because the root doesn't
Expand Down Expand Up @@ -1920,7 +1915,6 @@ function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
return {
baseLanes: renderLanes,
cachePool: getSuspendedCache(),
transitions: null,
};
}

Expand Down Expand Up @@ -1955,7 +1949,6 @@ function updateSuspenseOffscreenState(
return {
baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
cachePool,
transitions: prevOffscreenState.transitions,
};
}

Expand Down
160 changes: 80 additions & 80 deletions packages/react-reconciler/src/ReactFiberCommitWork.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1066,10 +1066,7 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
}
}

function commitTransitionProgress(
finishedRoot: FiberRoot,
offscreenFiber: Fiber,
) {
function commitTransitionProgress(offscreenFiber: Fiber) {
if (enableTransitionTracing) {
// This function adds suspense boundaries to the root
// or tracing marker's pendingSuspenseBoundaries map.
Expand All @@ -1094,12 +1091,7 @@ function commitTransitionProgress(
const wasHidden = prevState !== null;
const isHidden = nextState !== null;

const rootState: RootState = finishedRoot.current.memoizedState;
// TODO(luna) move pendingSuspenseBoundaries and transitions from
// HostRoot fiber to FiberRoot
const rootPendingBoundaries = rootState.pendingSuspenseBoundaries;
const rootTransitions = rootState.transitions;

const pendingMarkers = offscreenInstance.pendingMarkers;
// If there is a name on the suspense boundary, store that in
// the pending boundaries.
let name = null;
Expand All @@ -1112,38 +1104,26 @@ function commitTransitionProgress(
name = parent.memoizedProps.unstable_name;
}

if (rootPendingBoundaries !== null) {
if (previousFiber === null) {
// Initial mount
if (isHidden) {
rootPendingBoundaries.set(offscreenInstance, {
if (!wasHidden && isHidden) {
// The suspense boundaries was just hidden. Add the boundary
// to the pending boundary set if it's there
if (pendingMarkers !== null) {
pendingMarkers.forEach(pendingBoundaries => {
pendingBoundaries.set(offscreenInstance, {
name,
});
}
} else {
if (wasHidden && !isHidden) {
// The suspense boundary went from hidden to visible. Remove
// the boundary from the pending suspense boundaries set
// if it's there
if (rootPendingBoundaries.has(offscreenInstance)) {
rootPendingBoundaries.delete(offscreenInstance);

if (rootPendingBoundaries.size === 0 && rootTransitions !== null) {
rootTransitions.forEach(transition => {
addTransitionCompleteCallbackToPendingTransition({
transitionName: transition.name,
startTime: transition.startTime,
});
});
}
});
}
} else if (wasHidden && !isHidden) {
// The suspense boundary went from hidden to visible. Remove
// the boundary from the pending suspense boundaries set
// if it's there
if (pendingMarkers !== null) {
pendingMarkers.forEach(pendingBoundaries => {
if (pendingBoundaries.has(offscreenInstance)) {
pendingBoundaries.delete(offscreenInstance);
}
} else if (!wasHidden && isHidden) {
// The suspense boundaries was just hidden. Add the boundary
// to the pending boundary set if it's there
rootPendingBoundaries.set(offscreenInstance, {
name,
});
}
});
}
}
}
Expand Down Expand Up @@ -2830,45 +2810,46 @@ function commitPassiveMountOnFiber(
// Get the transitions that were initiatized during the render
// and add a start transition callback for each of them
const state = finishedWork.memoizedState;
// TODO Since it's a mutable field, this should live on the FiberRoot
if (state.transitions === null) {
state.transitions = new Set([]);
}
const pendingTransitions = state.transitions;
const pendingSuspenseBoundaries = state.pendingSuspenseBoundaries;

let incompleteTransitions = state.incompleteTransitions;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will move this code to the HostRoot in a separate PR

// Initial render
if (committedTransitions !== null) {
if (state.incompleteTransitions === null) {
state.incompleteTransitions = incompleteTransitions = new Map();
}

committedTransitions.forEach(transition => {
addTransitionStartCallbackToPendingTransition({
transitionName: transition.name,
startTime: transition.startTime,
});
pendingTransitions.add(transition);

if (!incompleteTransitions.has(transition)) {
incompleteTransitions.set(transition, null);
}
});

if (
pendingSuspenseBoundaries === null ||
pendingSuspenseBoundaries.size === 0
) {
pendingTransitions.forEach(transition => {
clearTransitionsForLanes(finishedRoot, committedLanes);
}

if (incompleteTransitions !== null) {
incompleteTransitions.forEach((pendingBoundaries, transition) => {
if (pendingBoundaries === null || pendingBoundaries.size === 0) {
addTransitionCompleteCallbackToPendingTransition({
transitionName: transition.name,
startTime: transition.startTime,
});
});
}

clearTransitionsForLanes(finishedRoot, committedLanes);
incompleteTransitions.delete(transition);
}
});
}

// If there are no more pending suspense boundaries we
// clear the transitions because they are all complete.
if (
pendingSuspenseBoundaries === null ||
pendingSuspenseBoundaries.size === 0
incompleteTransitions === null ||
incompleteTransitions.size === 0
) {
state.transitions = null;
state.incompleteTransitions = null;
}
}
break;
Expand Down Expand Up @@ -2909,39 +2890,58 @@ function commitPassiveMountOnFiber(
const isFallback = finishedWork.memoizedState;
const queue = (finishedWork.updateQueue: any);
const rootMemoizedState = finishedRoot.current.memoizedState;
const instance = finishedWork.stateNode;

if (queue !== null) {
// We have one instance of the pendingSuspenseBoundaries map.
// We only need one because we update it during the commit phase.
// We instantiate a new Map if we haven't already
if (rootMemoizedState.pendingSuspenseBoundaries === null) {
rootMemoizedState.pendingSuspenseBoundaries = new Map();
}

if (isFallback) {
const transitions = queue.transitions;
let prevTransitions = finishedWork.memoizedState.transitions;
// Add all the transitions saved in the update queue during
// the render phase (ie the transitions associated with this boundary)
// into the transitions set.
if (transitions !== null) {
if (prevTransitions === null) {
// We only have one instance of the transitions set
// because we update it only during the commit phase. We
// will create the set on a as needed basis in the commit phase
finishedWork.memoizedState.transitions = prevTransitions = new Set();
}
let prevTransitions = instance.transitions;
let rootIncompleteTransitions =
rootMemoizedState.incompleteTransitions;

// We lazily instantiate transition tracing relevant maps
// and sets in the commit phase as we need to use them. We only
// instantiate them in the fallback phase on an as needed basis
if (rootMemoizedState.incompleteTransitions === null) {
rootMemoizedState.incompleteTransitions = rootIncompleteTransitions = new Map();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add a TODO here to move this to the FiberRoot?

}
if (instance.pendingMarkers === null) {
instance.pendingMarkers = new Set();
}
if (transitions !== null && prevTransitions === null) {
instance.transitions = prevTransitions = new Set();
}

if (transitions !== null) {
transitions.forEach(transition => {
// Add all the transitions saved in the update queue during
// the render phase (ie the transitions associated with this boundary)
// into the transitions set.
prevTransitions.add(transition);

// Add the root transition's pending suspense boundary set to
// the queue's marker set. We will iterate through the marker
// set when we toggle state on the suspense boundary and
// add or remove the pending suspense boundaries as needed.
if (!rootIncompleteTransitions.has(transition)) {
rootIncompleteTransitions.set(transition, new Map());
}
instance.pendingMarkers.add(
rootIncompleteTransitions.get(transition),
);
});
}
}
}

commitTransitionProgress(finishedRoot, finishedWork);
commitTransitionProgress(finishedWork);

finishedWork.updateQueue = null;
if (
instance.pendingMarkers === null ||
instance.pendingMarkers.size === 0
) {
finishedWork.updateQueue = null;
}
}
}

break;
Expand Down
Loading