Skip to content

Commit a645139

Browse files
lunaruanlunaruan
committed
add pendingPassiveTransitions
1 parent 8dcedba commit a645139

File tree

4 files changed

+158
-24
lines changed

4 files changed

+158
-24
lines changed

‎packages/react-reconciler/src/ReactFiberCommitWork.new.js

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent';
2626
import type {HookFlags} from './ReactHookEffectTags';
2727
import type {Cache} from './ReactFiberCacheComponent.new';
2828
import type {RootState} from './ReactFiberRoot.new';
29+
import type {Transition} from './ReactFiberTracingMarkerComponent.new';
2930

3031
import {
3132
enableCreateEventHandleAPI,
@@ -2614,15 +2615,22 @@ export function commitPassiveMountEffects(
26142615
root: FiberRoot,
26152616
finishedWork: Fiber,
26162617
committedLanes: Lanes,
2618+
committedTransitions: Array<Transition> | null,
26172619
): void {
26182620
nextEffect = finishedWork;
2619-
commitPassiveMountEffects_begin(finishedWork, root, committedLanes);
2621+
commitPassiveMountEffects_begin(
2622+
finishedWork,
2623+
root,
2624+
committedLanes,
2625+
committedTransitions,
2626+
);
26202627
}
26212628

26222629
function commitPassiveMountEffects_begin(
26232630
subtreeRoot: Fiber,
26242631
root: FiberRoot,
26252632
committedLanes: Lanes,
2633+
committedTransitions: Array<Transition> | null,
26262634
) {
26272635
while (nextEffect !== null) {
26282636
const fiber = nextEffect;
@@ -2631,7 +2639,12 @@ function commitPassiveMountEffects_begin(
26312639
ensureCorrectReturnPointer(firstChild, fiber);
26322640
nextEffect = firstChild;
26332641
} else {
2634-
commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
2642+
commitPassiveMountEffects_complete(
2643+
subtreeRoot,
2644+
root,
2645+
committedLanes,
2646+
committedTransitions,
2647+
);
26352648
}
26362649
}
26372650
}
@@ -2640,14 +2653,20 @@ function commitPassiveMountEffects_complete(
26402653
subtreeRoot: Fiber,
26412654
root: FiberRoot,
26422655
committedLanes: Lanes,
2656+
committedTransitions: Array<Transition> | null,
26432657
) {
26442658
while (nextEffect !== null) {
26452659
const fiber = nextEffect;
26462660

26472661
if ((fiber.flags & Passive) !== NoFlags) {
26482662
setCurrentDebugFiberInDEV(fiber);
26492663
try {
2650-
commitPassiveMountOnFiber(root, fiber, committedLanes);
2664+
commitPassiveMountOnFiber(
2665+
root,
2666+
fiber,
2667+
committedLanes,
2668+
committedTransitions,
2669+
);
26512670
} catch (error) {
26522671
reportUncaughtErrorInDEV(error);
26532672
captureCommitPhaseError(fiber, fiber.return, error);
@@ -2675,6 +2694,7 @@ function commitPassiveMountOnFiber(
26752694
finishedRoot: FiberRoot,
26762695
finishedWork: Fiber,
26772696
committedLanes: Lanes,
2697+
committedTransitions: Array<Transition> | null,
26782698
): void {
26792699
switch (finishedWork.tag) {
26802700
case FunctionComponent:

‎packages/react-reconciler/src/ReactFiberCommitWork.old.js

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent';
2626
import type {HookFlags} from './ReactHookEffectTags';
2727
import type {Cache} from './ReactFiberCacheComponent.old';
2828
import type {RootState} from './ReactFiberRoot.old';
29+
import type {Transition} from './ReactFiberTracingMarkerComponent.old';
2930

3031
import {
3132
enableCreateEventHandleAPI,
@@ -2614,15 +2615,22 @@ export function commitPassiveMountEffects(
26142615
root: FiberRoot,
26152616
finishedWork: Fiber,
26162617
committedLanes: Lanes,
2618+
committedTransitions: Array<Transition> | null,
26172619
): void {
26182620
nextEffect = finishedWork;
2619-
commitPassiveMountEffects_begin(finishedWork, root, committedLanes);
2621+
commitPassiveMountEffects_begin(
2622+
finishedWork,
2623+
root,
2624+
committedLanes,
2625+
committedTransitions,
2626+
);
26202627
}
26212628

26222629
function commitPassiveMountEffects_begin(
26232630
subtreeRoot: Fiber,
26242631
root: FiberRoot,
26252632
committedLanes: Lanes,
2633+
committedTransitions: Array<Transition> | null,
26262634
) {
26272635
while (nextEffect !== null) {
26282636
const fiber = nextEffect;
@@ -2631,7 +2639,12 @@ function commitPassiveMountEffects_begin(
26312639
ensureCorrectReturnPointer(firstChild, fiber);
26322640
nextEffect = firstChild;
26332641
} else {
2634-
commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
2642+
commitPassiveMountEffects_complete(
2643+
subtreeRoot,
2644+
root,
2645+
committedLanes,
2646+
committedTransitions,
2647+
);
26352648
}
26362649
}
26372650
}
@@ -2640,14 +2653,20 @@ function commitPassiveMountEffects_complete(
26402653
subtreeRoot: Fiber,
26412654
root: FiberRoot,
26422655
committedLanes: Lanes,
2656+
committedTransitions: Array<Transition> | null,
26432657
) {
26442658
while (nextEffect !== null) {
26452659
const fiber = nextEffect;
26462660

26472661
if ((fiber.flags & Passive) !== NoFlags) {
26482662
setCurrentDebugFiberInDEV(fiber);
26492663
try {
2650-
commitPassiveMountOnFiber(root, fiber, committedLanes);
2664+
commitPassiveMountOnFiber(
2665+
root,
2666+
fiber,
2667+
committedLanes,
2668+
committedTransitions,
2669+
);
26512670
} catch (error) {
26522671
reportUncaughtErrorInDEV(error);
26532672
captureCommitPhaseError(fiber, fiber.return, error);
@@ -2675,6 +2694,7 @@ function commitPassiveMountOnFiber(
26752694
finishedRoot: FiberRoot,
26762695
finishedWork: Fiber,
26772696
committedLanes: Lanes,
2697+
committedTransitions: Array<Transition> | null,
26782698
): void {
26792699
switch (finishedWork.tag) {
26802700
case FunctionComponent:

‎packages/react-reconciler/src/ReactFiberWorkLoop.new.js

Lines changed: 56 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,7 @@ let rootWithPendingPassiveEffects: FiberRoot | null = null;
391391
let pendingPassiveEffectsLanes: Lanes = NoLanes;
392392
let pendingPassiveProfilerEffects: Array<Fiber> = [];
393393
let pendingPassiveEffectsRemainingLanes: Lanes = NoLanes;
394+
let pendingPassiveTransitions: Array<Transition> | null = null;
394395

395396
// Use these to prevent an infinite loop of nested updates
396397
const NESTED_UPDATE_LIMIT = 50;
@@ -1074,7 +1075,11 @@ function finishConcurrentRender(root, exitStatus, lanes) {
10741075
case RootErrored: {
10751076
// We should have already attempted to retry this tree. If we reached
10761077
// this point, it errored again. Commit it.
1077-
commitRoot(root, workInProgressRootRecoverableErrors);
1078+
commitRoot(
1079+
root,
1080+
workInProgressRootRecoverableErrors,
1081+
workInProgressTransitions,
1082+
);
10781083
break;
10791084
}
10801085
case RootSuspended: {
@@ -1114,14 +1119,23 @@ function finishConcurrentRender(root, exitStatus, lanes) {
11141119
// lower priority work to do. Instead of committing the fallback
11151120
// immediately, wait for more data to arrive.
11161121
root.timeoutHandle = scheduleTimeout(
1117-
commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
1122+
commitRoot.bind(
1123+
null,
1124+
root,
1125+
workInProgressRootRecoverableErrors,
1126+
workInProgressTransitions,
1127+
),
11181128
msUntilTimeout,
11191129
);
11201130
break;
11211131
}
11221132
}
11231133
// The work expired. Commit immediately.
1124-
commitRoot(root, workInProgressRootRecoverableErrors);
1134+
commitRoot(
1135+
root,
1136+
workInProgressRootRecoverableErrors,
1137+
workInProgressTransitions,
1138+
);
11251139
break;
11261140
}
11271141
case RootSuspendedWithDelay: {
@@ -1160,12 +1174,20 @@ function finishConcurrentRender(root, exitStatus, lanes) {
11601174
}
11611175

11621176
// Commit the placeholder.
1163-
commitRoot(root, workInProgressRootRecoverableErrors);
1177+
commitRoot(
1178+
root,
1179+
workInProgressRootRecoverableErrors,
1180+
workInProgressTransitions,
1181+
);
11641182
break;
11651183
}
11661184
case RootCompleted: {
11671185
// The work completed. Ready to commit.
1168-
commitRoot(root, workInProgressRootRecoverableErrors);
1186+
commitRoot(
1187+
root,
1188+
workInProgressRootRecoverableErrors,
1189+
workInProgressTransitions,
1190+
);
11691191
break;
11701192
}
11711193
default: {
@@ -1289,7 +1311,11 @@ function performSyncWorkOnRoot(root) {
12891311
const finishedWork: Fiber = (root.current.alternate: any);
12901312
root.finishedWork = finishedWork;
12911313
root.finishedLanes = lanes;
1292-
commitRoot(root, workInProgressRootRecoverableErrors);
1314+
commitRoot(
1315+
root,
1316+
workInProgressRootRecoverableErrors,
1317+
workInProgressTransitions,
1318+
);
12931319

12941320
// Before exiting, make sure there's a callback scheduled for the next
12951321
// pending level.
@@ -1971,7 +1997,11 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
19711997
}
19721998
}
19731999

1974-
function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
2000+
function commitRoot(
2001+
root: FiberRoot,
2002+
recoverableErrors: null | Array<mixed>,
2003+
transitions: Array<Transition> | null,
2004+
) {
19752005
// TODO: This no longer makes any sense. We already wrap the mutation and
19762006
// layout phases. Should be able to remove.
19772007
const previousUpdateLanePriority = getCurrentUpdatePriority();
@@ -1980,7 +2010,12 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
19802010
try {
19812011
ReactCurrentBatchConfig.transition = null;
19822012
setCurrentUpdatePriority(DiscreteEventPriority);
1983-
commitRootImpl(root, recoverableErrors, previousUpdateLanePriority);
2013+
commitRootImpl(
2014+
root,
2015+
recoverableErrors,
2016+
transitions,
2017+
previousUpdateLanePriority,
2018+
);
19842019
} finally {
19852020
ReactCurrentBatchConfig.transition = prevTransition;
19862021
setCurrentUpdatePriority(previousUpdateLanePriority);
@@ -1992,6 +2027,7 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
19922027
function commitRootImpl(
19932028
root: FiberRoot,
19942029
recoverableErrors: null | Array<mixed>,
2030+
transitions: Array<Transition> | null,
19952031
renderPriorityLevel: EventPriority,
19962032
) {
19972033
do {
@@ -2087,6 +2123,13 @@ function commitRootImpl(
20872123
if (!rootDoesHavePassiveEffects) {
20882124
rootDoesHavePassiveEffects = true;
20892125
pendingPassiveEffectsRemainingLanes = remainingLanes;
2126+
// workInProgressTransitions might be overwritten, so we want
2127+
// to store it in pendingPassiveTransitions until they get processed
2128+
// We need to pass this through as an argument to commitRoot
2129+
// because workInProgressTransitions might have changed between
2130+
// the previous render and commit if we throttle the commit
2131+
// with setTimeout
2132+
pendingPassiveTransitions = transitions;
20902133
scheduleCallback(NormalSchedulerPriority, () => {
20912134
flushPassiveEffects();
20922135
// This render triggered passive effects: release the root cache pool
@@ -2407,6 +2450,10 @@ function flushPassiveEffectsImpl() {
24072450
return false;
24082451
}
24092452

2453+
// Cache and clear the transitions flag
2454+
const transitions = pendingPassiveTransitions;
2455+
pendingPassiveTransitions = null;
2456+
24102457
const root = rootWithPendingPassiveEffects;
24112458
const lanes = pendingPassiveEffectsLanes;
24122459
rootWithPendingPassiveEffects = null;
@@ -2436,7 +2483,7 @@ function flushPassiveEffectsImpl() {
24362483
executionContext |= CommitContext;
24372484

24382485
commitPassiveUnmountEffects(root.current);
2439-
commitPassiveMountEffects(root, root.current, lanes);
2486+
commitPassiveMountEffects(root, root.current, lanes, transitions);
24402487

24412488
// TODO: Move to commitPassiveMountEffects
24422489
if (enableProfilerTimer && enableProfilerCommitHooks) {

0 commit comments

Comments
 (0)