Skip to content

Commit 78a1f13

Browse files
lunaruanlunaruan
committed
add pendingPassiveTransitions
1 parent 8dcedba commit 78a1f13

File tree

4 files changed

+170
-26
lines changed

4 files changed

+170
-26
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: 62 additions & 10 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: {
@@ -1152,20 +1166,33 @@ function finishConcurrentRender(root, exitStatus, lanes) {
11521166
// Instead of committing the fallback immediately, wait for more data
11531167
// to arrive.
11541168
root.timeoutHandle = scheduleTimeout(
1155-
commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
1169+
commitRoot.bind(
1170+
null,
1171+
root,
1172+
workInProgressRootRecoverableErrors,
1173+
workInProgressTransitions,
1174+
),
11561175
msUntilTimeout,
11571176
);
11581177
break;
11591178
}
11601179
}
11611180

11621181
// Commit the placeholder.
1163-
commitRoot(root, workInProgressRootRecoverableErrors);
1182+
commitRoot(
1183+
root,
1184+
workInProgressRootRecoverableErrors,
1185+
workInProgressTransitions,
1186+
);
11641187
break;
11651188
}
11661189
case RootCompleted: {
11671190
// The work completed. Ready to commit.
1168-
commitRoot(root, workInProgressRootRecoverableErrors);
1191+
commitRoot(
1192+
root,
1193+
workInProgressRootRecoverableErrors,
1194+
workInProgressTransitions,
1195+
);
11691196
break;
11701197
}
11711198
default: {
@@ -1289,7 +1316,11 @@ function performSyncWorkOnRoot(root) {
12891316
const finishedWork: Fiber = (root.current.alternate: any);
12901317
root.finishedWork = finishedWork;
12911318
root.finishedLanes = lanes;
1292-
commitRoot(root, workInProgressRootRecoverableErrors);
1319+
commitRoot(
1320+
root,
1321+
workInProgressRootRecoverableErrors,
1322+
workInProgressTransitions,
1323+
);
12931324

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

1974-
function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
2005+
function commitRoot(
2006+
root: FiberRoot,
2007+
recoverableErrors: null | Array<mixed>,
2008+
transitions: Array<Transition> | null,
2009+
) {
19752010
// TODO: This no longer makes any sense. We already wrap the mutation and
19762011
// layout phases. Should be able to remove.
19772012
const previousUpdateLanePriority = getCurrentUpdatePriority();
@@ -1980,7 +2015,12 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
19802015
try {
19812016
ReactCurrentBatchConfig.transition = null;
19822017
setCurrentUpdatePriority(DiscreteEventPriority);
1983-
commitRootImpl(root, recoverableErrors, previousUpdateLanePriority);
2018+
commitRootImpl(
2019+
root,
2020+
recoverableErrors,
2021+
transitions,
2022+
previousUpdateLanePriority,
2023+
);
19842024
} finally {
19852025
ReactCurrentBatchConfig.transition = prevTransition;
19862026
setCurrentUpdatePriority(previousUpdateLanePriority);
@@ -1992,6 +2032,7 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
19922032
function commitRootImpl(
19932033
root: FiberRoot,
19942034
recoverableErrors: null | Array<mixed>,
2035+
transitions: Array<Transition> | null,
19952036
renderPriorityLevel: EventPriority,
19962037
) {
19972038
do {
@@ -2087,6 +2128,13 @@ function commitRootImpl(
20872128
if (!rootDoesHavePassiveEffects) {
20882129
rootDoesHavePassiveEffects = true;
20892130
pendingPassiveEffectsRemainingLanes = remainingLanes;
2131+
// workInProgressTransitions might be overwritten, so we want
2132+
// to store it in pendingPassiveTransitions until they get processed
2133+
// We need to pass this through as an argument to commitRoot
2134+
// because workInProgressTransitions might have changed between
2135+
// the previous render and commit if we throttle the commit
2136+
// with setTimeout
2137+
pendingPassiveTransitions = transitions;
20902138
scheduleCallback(NormalSchedulerPriority, () => {
20912139
flushPassiveEffects();
20922140
// This render triggered passive effects: release the root cache pool
@@ -2407,6 +2455,10 @@ function flushPassiveEffectsImpl() {
24072455
return false;
24082456
}
24092457

2458+
// Cache and clear the transitions flag
2459+
const transitions = pendingPassiveTransitions;
2460+
pendingPassiveTransitions = null;
2461+
24102462
const root = rootWithPendingPassiveEffects;
24112463
const lanes = pendingPassiveEffectsLanes;
24122464
rootWithPendingPassiveEffects = null;
@@ -2436,7 +2488,7 @@ function flushPassiveEffectsImpl() {
24362488
executionContext |= CommitContext;
24372489

24382490
commitPassiveUnmountEffects(root.current);
2439-
commitPassiveMountEffects(root, root.current, lanes);
2491+
commitPassiveMountEffects(root, root.current, lanes, transitions);
24402492

24412493
// TODO: Move to commitPassiveMountEffects
24422494
if (enableProfilerTimer && enableProfilerCommitHooks) {

0 commit comments

Comments
 (0)