Skip to content
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

[Transition Tracing] Add pendingPassiveTransitions #24320

Merged
merged 1 commit into from
Apr 8, 2022
Merged

[Transition Tracing] Add pendingPassiveTransitions #24320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
26 changes: 23 additions & 3 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 @@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent';
import type {HookFlags} from './ReactHookEffectTags';
import type {Cache} from './ReactFiberCacheComponent.new';
import type {RootState} from './ReactFiberRoot.new';
import type {Transition} from './ReactFiberTracingMarkerComponent.new';

import {
enableCreateEventHandleAPI,
Expand Down Expand Up @@ -2614,15 +2615,22 @@ export function commitPassiveMountEffects(
root: FiberRoot,
finishedWork: Fiber,
committedLanes: Lanes,
committedTransitions: Array<Transition> | null,
): void {
nextEffect = finishedWork;
commitPassiveMountEffects_begin(finishedWork, root, committedLanes);
commitPassiveMountEffects_begin(
finishedWork,
root,
committedLanes,
committedTransitions,
);
}

function commitPassiveMountEffects_begin(
subtreeRoot: Fiber,
root: FiberRoot,
committedLanes: Lanes,
committedTransitions: Array<Transition> | null,
) {
while (nextEffect !== null) {
const fiber = nextEffect;
Expand All @@ -2631,7 +2639,12 @@ function commitPassiveMountEffects_begin(
ensureCorrectReturnPointer(firstChild, fiber);
nextEffect = firstChild;
} else {
commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
commitPassiveMountEffects_complete(
subtreeRoot,
root,
committedLanes,
committedTransitions,
);
}
}
}
Expand All @@ -2640,14 +2653,20 @@ function commitPassiveMountEffects_complete(
subtreeRoot: Fiber,
root: FiberRoot,
committedLanes: Lanes,
committedTransitions: Array<Transition> | null,
) {
while (nextEffect !== null) {
const fiber = nextEffect;

if ((fiber.flags & Passive) !== NoFlags) {
setCurrentDebugFiberInDEV(fiber);
try {
commitPassiveMountOnFiber(root, fiber, committedLanes);
commitPassiveMountOnFiber(
root,
fiber,
committedLanes,
committedTransitions,
);
} catch (error) {
reportUncaughtErrorInDEV(error);
captureCommitPhaseError(fiber, fiber.return, error);
Expand Down Expand Up @@ -2675,6 +2694,7 @@ function commitPassiveMountOnFiber(
finishedRoot: FiberRoot,
finishedWork: Fiber,
committedLanes: Lanes,
committedTransitions: Array<Transition> | null,
): void {
switch (finishedWork.tag) {
case FunctionComponent:
Expand Down
26 changes: 23 additions & 3 deletions packages/react-reconciler/src/ReactFiberCommitWork.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent';
import type {HookFlags} from './ReactHookEffectTags';
import type {Cache} from './ReactFiberCacheComponent.old';
import type {RootState} from './ReactFiberRoot.old';
import type {Transition} from './ReactFiberTracingMarkerComponent.old';

import {
enableCreateEventHandleAPI,
Expand Down Expand Up @@ -2614,15 +2615,22 @@ export function commitPassiveMountEffects(
root: FiberRoot,
finishedWork: Fiber,
committedLanes: Lanes,
committedTransitions: Array<Transition> | null,
): void {
nextEffect = finishedWork;
commitPassiveMountEffects_begin(finishedWork, root, committedLanes);
commitPassiveMountEffects_begin(
finishedWork,
root,
committedLanes,
committedTransitions,
);
}

function commitPassiveMountEffects_begin(
subtreeRoot: Fiber,
root: FiberRoot,
committedLanes: Lanes,
committedTransitions: Array<Transition> | null,
) {
while (nextEffect !== null) {
const fiber = nextEffect;
Expand All @@ -2631,7 +2639,12 @@ function commitPassiveMountEffects_begin(
ensureCorrectReturnPointer(firstChild, fiber);
nextEffect = firstChild;
} else {
commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
commitPassiveMountEffects_complete(
subtreeRoot,
root,
committedLanes,
committedTransitions,
);
}
}
}
Expand All @@ -2640,14 +2653,20 @@ function commitPassiveMountEffects_complete(
subtreeRoot: Fiber,
root: FiberRoot,
committedLanes: Lanes,
committedTransitions: Array<Transition> | null,
) {
while (nextEffect !== null) {
const fiber = nextEffect;

if ((fiber.flags & Passive) !== NoFlags) {
setCurrentDebugFiberInDEV(fiber);
try {
commitPassiveMountOnFiber(root, fiber, committedLanes);
commitPassiveMountOnFiber(
root,
fiber,
committedLanes,
committedTransitions,
);
} catch (error) {
reportUncaughtErrorInDEV(error);
captureCommitPhaseError(fiber, fiber.return, error);
Expand Down Expand Up @@ -2675,6 +2694,7 @@ function commitPassiveMountOnFiber(
finishedRoot: FiberRoot,
finishedWork: Fiber,
committedLanes: Lanes,
committedTransitions: Array<Transition> | null,
): void {
switch (finishedWork.tag) {
case FunctionComponent:
Expand Down
72 changes: 62 additions & 10 deletions packages/react-reconciler/src/ReactFiberWorkLoop.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,6 +391,7 @@ let rootWithPendingPassiveEffects: FiberRoot | null = null;
let pendingPassiveEffectsLanes: Lanes = NoLanes;
let pendingPassiveProfilerEffects: Array<Fiber> = [];
let pendingPassiveEffectsRemainingLanes: Lanes = NoLanes;
let pendingPassiveTransitions: Array<Transition> | null = null;

// Use these to prevent an infinite loop of nested updates
const NESTED_UPDATE_LIMIT = 50;
Expand Down Expand Up @@ -1074,7 +1075,11 @@ function finishConcurrentRender(root, exitStatus, lanes) {
case RootErrored: {
// We should have already attempted to retry this tree. If we reached
// this point, it errored again. Commit it.
commitRoot(root, workInProgressRootRecoverableErrors);
commitRoot(
root,
workInProgressRootRecoverableErrors,
workInProgressTransitions,
);
break;
}
case RootSuspended: {
Expand Down Expand Up @@ -1114,14 +1119,23 @@ function finishConcurrentRender(root, exitStatus, lanes) {
// lower priority work to do. Instead of committing the fallback
// immediately, wait for more data to arrive.
root.timeoutHandle = scheduleTimeout(
commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
commitRoot.bind(
null,
root,
workInProgressRootRecoverableErrors,
workInProgressTransitions,
),
msUntilTimeout,
);
break;
}
}
// The work expired. Commit immediately.
commitRoot(root, workInProgressRootRecoverableErrors);
commitRoot(
root,
workInProgressRootRecoverableErrors,
workInProgressTransitions,
);
break;
}
case RootSuspendedWithDelay: {
Expand Down Expand Up @@ -1152,20 +1166,33 @@ function finishConcurrentRender(root, exitStatus, lanes) {
// Instead of committing the fallback immediately, wait for more data
// to arrive.
root.timeoutHandle = scheduleTimeout(
commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
commitRoot.bind(
null,
root,
workInProgressRootRecoverableErrors,
workInProgressTransitions,
),
msUntilTimeout,
);
break;
}
}

// Commit the placeholder.
commitRoot(root, workInProgressRootRecoverableErrors);
commitRoot(
root,
workInProgressRootRecoverableErrors,
workInProgressTransitions,
);
break;
}
case RootCompleted: {
// The work completed. Ready to commit.
commitRoot(root, workInProgressRootRecoverableErrors);
commitRoot(
root,
workInProgressRootRecoverableErrors,
workInProgressTransitions,
);
break;
}
default: {
Expand Down Expand Up @@ -1289,7 +1316,11 @@ function performSyncWorkOnRoot(root) {
const finishedWork: Fiber = (root.current.alternate: any);
root.finishedWork = finishedWork;
root.finishedLanes = lanes;
commitRoot(root, workInProgressRootRecoverableErrors);
commitRoot(
root,
workInProgressRootRecoverableErrors,
workInProgressTransitions,
);

// Before exiting, make sure there's a callback scheduled for the next
// pending level.
Expand Down Expand Up @@ -1971,7 +2002,11 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
}
}

function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
function commitRoot(
root: FiberRoot,
recoverableErrors: null | Array<mixed>,
transitions: Array<Transition> | null,
) {
// TODO: This no longer makes any sense. We already wrap the mutation and
// layout phases. Should be able to remove.
const previousUpdateLanePriority = getCurrentUpdatePriority();
Expand All @@ -1980,7 +2015,12 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
try {
ReactCurrentBatchConfig.transition = null;
setCurrentUpdatePriority(DiscreteEventPriority);
commitRootImpl(root, recoverableErrors, previousUpdateLanePriority);
commitRootImpl(
root,
recoverableErrors,
transitions,
previousUpdateLanePriority,
);
} finally {
ReactCurrentBatchConfig.transition = prevTransition;
setCurrentUpdatePriority(previousUpdateLanePriority);
Expand All @@ -1992,6 +2032,7 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
function commitRootImpl(
root: FiberRoot,
recoverableErrors: null | Array<mixed>,
transitions: Array<Transition> | null,
renderPriorityLevel: EventPriority,
) {
do {
Expand Down Expand Up @@ -2087,6 +2128,13 @@ function commitRootImpl(
if (!rootDoesHavePassiveEffects) {
rootDoesHavePassiveEffects = true;
pendingPassiveEffectsRemainingLanes = remainingLanes;
// workInProgressTransitions might be overwritten, so we want
// to store it in pendingPassiveTransitions until they get processed
// We need to pass this through as an argument to commitRoot
// because workInProgressTransitions might have changed between
// the previous render and commit if we throttle the commit
// with setTimeout
pendingPassiveTransitions = transitions;
scheduleCallback(NormalSchedulerPriority, () => {
flushPassiveEffects();
// This render triggered passive effects: release the root cache pool
Expand Down Expand Up @@ -2407,6 +2455,10 @@ function flushPassiveEffectsImpl() {
return false;
}

// Cache and clear the transitions flag
const transitions = pendingPassiveTransitions;
pendingPassiveTransitions = null;

const root = rootWithPendingPassiveEffects;
const lanes = pendingPassiveEffectsLanes;
rootWithPendingPassiveEffects = null;
Expand Down Expand Up @@ -2436,7 +2488,7 @@ function flushPassiveEffectsImpl() {
executionContext |= CommitContext;

commitPassiveUnmountEffects(root.current);
commitPassiveMountEffects(root, root.current, lanes);
commitPassiveMountEffects(root, root.current, lanes, transitions);

// TODO: Move to commitPassiveMountEffects
if (enableProfilerTimer && enableProfilerCommitHooks) {
Expand Down
Loading