Skip to content

Commit 1b56e7d

Browse files
lunaruanlunaruan
committed
moved mutation code to passive
1 parent c89a15c commit 1b56e7d

File tree

6 files changed

+176
-104
lines changed

6 files changed

+176
-104
lines changed

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

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2206,32 +2206,6 @@ function commitMutationEffectsOnFiber(
22062206
// because of the shared reconciliation logic below.
22072207
const flags = finishedWork.flags;
22082208

2209-
if (enableTransitionTracing) {
2210-
switch (finishedWork.tag) {
2211-
case HostRoot: {
2212-
const state = finishedWork.memoizedState;
2213-
const transitions = state.transitions;
2214-
if (transitions !== null) {
2215-
transitions.forEach(transition => {
2216-
// TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
2217-
addTransitionStartCallbackToPendingTransition({
2218-
transitionName: transition.name,
2219-
startTime: transition.startTime,
2220-
});
2221-
2222-
addTransitionCompleteCallbackToPendingTransition({
2223-
transitionName: transition.name,
2224-
startTime: transition.startTime,
2225-
});
2226-
});
2227-
2228-
clearTransitionsForLanes(root, lanes);
2229-
state.transitions = null;
2230-
}
2231-
}
2232-
}
2233-
}
2234-
22352209
if (flags & ContentReset) {
22362210
commitResetTextContent(finishedWork);
22372211
}
@@ -2618,34 +2592,41 @@ function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
26182592
export function commitPassiveMountEffects(
26192593
root: FiberRoot,
26202594
finishedWork: Fiber,
2595+
committedLanes: Lanes,
26212596
): void {
26222597
nextEffect = finishedWork;
2623-
commitPassiveMountEffects_begin(finishedWork, root);
2598+
commitPassiveMountEffects_begin(finishedWork, root, committedLanes);
26242599
}
26252600

2626-
function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
2601+
function commitPassiveMountEffects_begin(
2602+
subtreeRoot: Fiber,
2603+
root: FiberRoot,
2604+
committedLanes: Lanes,
2605+
) {
26272606
while (nextEffect !== null) {
26282607
const fiber = nextEffect;
26292608
const firstChild = fiber.child;
26302609
if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
26312610
ensureCorrectReturnPointer(firstChild, fiber);
26322611
nextEffect = firstChild;
26332612
} else {
2634-
commitPassiveMountEffects_complete(subtreeRoot, root);
2613+
commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
26352614
}
26362615
}
26372616
}
26382617

26392618
function commitPassiveMountEffects_complete(
26402619
subtreeRoot: Fiber,
26412620
root: FiberRoot,
2621+
committedLanes: Lanes,
26422622
) {
26432623
while (nextEffect !== null) {
26442624
const fiber = nextEffect;
2625+
26452626
if ((fiber.flags & Passive) !== NoFlags) {
26462627
setCurrentDebugFiberInDEV(fiber);
26472628
try {
2648-
commitPassiveMountOnFiber(root, fiber);
2629+
commitPassiveMountOnFiber(root, fiber, committedLanes);
26492630
} catch (error) {
26502631
reportUncaughtErrorInDEV(error);
26512632
captureCommitPhaseError(fiber, fiber.return, error);
@@ -2672,6 +2653,7 @@ function commitPassiveMountEffects_complete(
26722653
function commitPassiveMountOnFiber(
26732654
finishedRoot: FiberRoot,
26742655
finishedWork: Fiber,
2656+
committedLanes: Lanes,
26752657
): void {
26762658
switch (finishedWork.tag) {
26772659
case FunctionComponent:
@@ -2713,6 +2695,27 @@ function commitPassiveMountOnFiber(
27132695
}
27142696
}
27152697
}
2698+
2699+
if (enableTransitionTracing) {
2700+
const transitions = finishedWork.memoizedState.transitions;
2701+
if (transitions !== null) {
2702+
transitions.forEach(transition => {
2703+
// TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
2704+
addTransitionStartCallbackToPendingTransition({
2705+
transitionName: transition.name,
2706+
startTime: transition.startTime,
2707+
});
2708+
2709+
addTransitionCompleteCallbackToPendingTransition({
2710+
transitionName: transition.name,
2711+
startTime: transition.startTime,
2712+
});
2713+
});
2714+
2715+
clearTransitionsForLanes(finishedRoot, committedLanes);
2716+
finishedWork.memoizedState.transitions = null;
2717+
}
2718+
}
27162719
break;
27172720
}
27182721
case LegacyHiddenComponent:

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

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2206,32 +2206,6 @@ function commitMutationEffectsOnFiber(
22062206
// because of the shared reconciliation logic below.
22072207
const flags = finishedWork.flags;
22082208

2209-
if (enableTransitionTracing) {
2210-
switch (finishedWork.tag) {
2211-
case HostRoot: {
2212-
const state = finishedWork.memoizedState;
2213-
const transitions = state.transitions;
2214-
if (transitions !== null) {
2215-
transitions.forEach(transition => {
2216-
// TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
2217-
addTransitionStartCallbackToPendingTransition({
2218-
transitionName: transition.name,
2219-
startTime: transition.startTime,
2220-
});
2221-
2222-
addTransitionCompleteCallbackToPendingTransition({
2223-
transitionName: transition.name,
2224-
startTime: transition.startTime,
2225-
});
2226-
});
2227-
2228-
clearTransitionsForLanes(root, lanes);
2229-
state.transitions = null;
2230-
}
2231-
}
2232-
}
2233-
}
2234-
22352209
if (flags & ContentReset) {
22362210
commitResetTextContent(finishedWork);
22372211
}
@@ -2618,34 +2592,41 @@ function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
26182592
export function commitPassiveMountEffects(
26192593
root: FiberRoot,
26202594
finishedWork: Fiber,
2595+
committedLanes: Lanes,
26212596
): void {
26222597
nextEffect = finishedWork;
2623-
commitPassiveMountEffects_begin(finishedWork, root);
2598+
commitPassiveMountEffects_begin(finishedWork, root, committedLanes);
26242599
}
26252600

2626-
function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
2601+
function commitPassiveMountEffects_begin(
2602+
subtreeRoot: Fiber,
2603+
root: FiberRoot,
2604+
committedLanes: Lanes,
2605+
) {
26272606
while (nextEffect !== null) {
26282607
const fiber = nextEffect;
26292608
const firstChild = fiber.child;
26302609
if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
26312610
ensureCorrectReturnPointer(firstChild, fiber);
26322611
nextEffect = firstChild;
26332612
} else {
2634-
commitPassiveMountEffects_complete(subtreeRoot, root);
2613+
commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
26352614
}
26362615
}
26372616
}
26382617

26392618
function commitPassiveMountEffects_complete(
26402619
subtreeRoot: Fiber,
26412620
root: FiberRoot,
2621+
committedLanes: Lanes,
26422622
) {
26432623
while (nextEffect !== null) {
26442624
const fiber = nextEffect;
2625+
26452626
if ((fiber.flags & Passive) !== NoFlags) {
26462627
setCurrentDebugFiberInDEV(fiber);
26472628
try {
2648-
commitPassiveMountOnFiber(root, fiber);
2629+
commitPassiveMountOnFiber(root, fiber, committedLanes);
26492630
} catch (error) {
26502631
reportUncaughtErrorInDEV(error);
26512632
captureCommitPhaseError(fiber, fiber.return, error);
@@ -2672,6 +2653,7 @@ function commitPassiveMountEffects_complete(
26722653
function commitPassiveMountOnFiber(
26732654
finishedRoot: FiberRoot,
26742655
finishedWork: Fiber,
2656+
committedLanes: Lanes,
26752657
): void {
26762658
switch (finishedWork.tag) {
26772659
case FunctionComponent:
@@ -2713,6 +2695,27 @@ function commitPassiveMountOnFiber(
27132695
}
27142696
}
27152697
}
2698+
2699+
if (enableTransitionTracing) {
2700+
const transitions = finishedWork.memoizedState.transitions;
2701+
if (transitions !== null) {
2702+
transitions.forEach(transition => {
2703+
// TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
2704+
addTransitionStartCallbackToPendingTransition({
2705+
transitionName: transition.name,
2706+
startTime: transition.startTime,
2707+
});
2708+
2709+
addTransitionCompleteCallbackToPendingTransition({
2710+
transitionName: transition.name,
2711+
startTime: transition.startTime,
2712+
});
2713+
});
2714+
2715+
clearTransitionsForLanes(finishedRoot, committedLanes);
2716+
finishedWork.memoizedState.transitions = null;
2717+
}
2718+
}
27162719
break;
27172720
}
27182721
case LegacyHiddenComponent:

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ import {
153153
popRenderLanes,
154154
getRenderTargetTime,
155155
subtreeRenderLanes,
156+
getWorkInProgressTransitions,
156157
} from './ReactFiberWorkLoop.new';
157158
import {
158159
OffscreenLane,
@@ -862,6 +863,17 @@ function completeWork(
862863
}
863864
case HostRoot: {
864865
const fiberRoot = (workInProgress.stateNode: FiberRoot);
866+
867+
if (enableTransitionTracing) {
868+
const transitions = getWorkInProgressTransitions();
869+
// We set the Passive flag here because if there are new transitions,
870+
// we will need to schedule callbacks and process the transitions,
871+
// which we do in the passive phase
872+
if (transitions !== null) {
873+
workInProgress.flags |= Passive;
874+
}
875+
}
876+
865877
if (enableCache) {
866878
popRootTransition(fiberRoot, renderLanes);
867879

@@ -918,6 +930,14 @@ function completeWork(
918930
}
919931
updateHostContainer(current, workInProgress);
920932
bubbleProperties(workInProgress);
933+
if (enableTransitionTracing) {
934+
if ((workInProgress.subtreeFlags & Visibility) !== NoFlags) {
935+
// If any of our suspense children toggle visibility, this means that
936+
// the pending boundaries array needs to be updated, which we only
937+
// do in the passive phase.
938+
workInProgress.flags |= Passive;
939+
}
940+
}
921941
return null;
922942
}
923943
case HostComponent: {
@@ -1187,6 +1207,12 @@ function completeWork(
11871207
const offscreenFiber: Fiber = (workInProgress.child: any);
11881208
offscreenFiber.flags |= Visibility;
11891209

1210+
// If the suspended state of the boundary changes, we need to schedule
1211+
// a passive effect, which is when we process the transitions
1212+
if (enableTransitionTracing) {
1213+
offscreenFiber.flags |= Passive;
1214+
}
1215+
11901216
// TODO: This will still suspend a synchronous tree if anything
11911217
// in the concurrent tree already suspended during this render.
11921218
// This is a known bug.

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ import {
153153
popRenderLanes,
154154
getRenderTargetTime,
155155
subtreeRenderLanes,
156+
getWorkInProgressTransitions,
156157
} from './ReactFiberWorkLoop.old';
157158
import {
158159
OffscreenLane,
@@ -862,6 +863,17 @@ function completeWork(
862863
}
863864
case HostRoot: {
864865
const fiberRoot = (workInProgress.stateNode: FiberRoot);
866+
867+
if (enableTransitionTracing) {
868+
const transitions = getWorkInProgressTransitions();
869+
// We set the Passive flag here because if there are new transitions,
870+
// we will need to schedule callbacks and process the transitions,
871+
// which we do in the passive phase
872+
if (transitions !== null) {
873+
workInProgress.flags |= Passive;
874+
}
875+
}
876+
865877
if (enableCache) {
866878
popRootTransition(fiberRoot, renderLanes);
867879

@@ -918,6 +930,14 @@ function completeWork(
918930
}
919931
updateHostContainer(current, workInProgress);
920932
bubbleProperties(workInProgress);
933+
if (enableTransitionTracing) {
934+
if ((workInProgress.subtreeFlags & Visibility) !== NoFlags) {
935+
// If any of our suspense children toggle visibility, this means that
936+
// the pending boundaries array needs to be updated, which we only
937+
// do in the passive phase.
938+
workInProgress.flags |= Passive;
939+
}
940+
}
921941
return null;
922942
}
923943
case HostComponent: {
@@ -1187,6 +1207,12 @@ function completeWork(
11871207
const offscreenFiber: Fiber = (workInProgress.child: any);
11881208
offscreenFiber.flags |= Visibility;
11891209

1210+
// If the suspended state of the boundary changes, we need to schedule
1211+
// a passive effect, which is when we process the transitions
1212+
if (enableTransitionTracing) {
1213+
offscreenFiber.flags |= Passive;
1214+
}
1215+
11901216
// TODO: This will still suspend a synchronous tree if anything
11911217
// in the concurrent tree already suspended during this render.
11921218
// This is a known bug.

0 commit comments

Comments
 (0)