Skip to content

Commit 7a4336c

Browse files
acdliteacdlite
committed
Use recursion to traverse during passive mount phase
This converts the layout phase to iterate over its effects recursively instead of iteratively. This makes it easier to track contextual information, like whether a fiber is inside a hidden tree. We already made this change for the mutation phase. See 481dece for more context.
1 parent bb1357b commit 7a4336c

2 files changed

Lines changed: 112 additions & 96 deletions

File tree

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

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2843,70 +2843,37 @@ export function commitPassiveMountEffects(
28432843
committedLanes: Lanes,
28442844
committedTransitions: Array<Transition> | null,
28452845
): void {
2846-
nextEffect = finishedWork;
2847-
commitPassiveMountEffects_begin(
2848-
finishedWork,
2846+
setCurrentDebugFiberInDEV(finishedWork);
2847+
commitPassiveMountOnFiber(
28492848
root,
2849+
finishedWork,
28502850
committedLanes,
28512851
committedTransitions,
28522852
);
2853+
resetCurrentDebugFiberInDEV();
28532854
}
28542855

2855-
function commitPassiveMountEffects_begin(
2856-
subtreeRoot: Fiber,
2856+
function recursivelyTraversePassiveMountEffects(
28572857
root: FiberRoot,
2858+
parentFiber: Fiber,
28582859
committedLanes: Lanes,
28592860
committedTransitions: Array<Transition> | null,
28602861
) {
2861-
while (nextEffect !== null) {
2862-
const fiber = nextEffect;
2863-
const firstChild = fiber.child;
2864-
if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
2865-
firstChild.return = fiber;
2866-
nextEffect = firstChild;
2867-
} else {
2868-
commitPassiveMountEffects_complete(
2869-
subtreeRoot,
2862+
const prevDebugFiber = getCurrentDebugFiberInDEV();
2863+
if (parentFiber.subtreeFlags & PassiveMask) {
2864+
let child = parentFiber.child;
2865+
while (child !== null) {
2866+
setCurrentDebugFiberInDEV(child);
2867+
commitPassiveMountOnFiber(
28702868
root,
2869+
child,
28712870
committedLanes,
28722871
committedTransitions,
28732872
);
2873+
child = child.sibling;
28742874
}
28752875
}
2876-
}
2877-
2878-
function commitPassiveMountEffects_complete(
2879-
subtreeRoot: Fiber,
2880-
root: FiberRoot,
2881-
committedLanes: Lanes,
2882-
committedTransitions: Array<Transition> | null,
2883-
) {
2884-
while (nextEffect !== null) {
2885-
const fiber = nextEffect;
2886-
2887-
setCurrentDebugFiberInDEV(fiber);
2888-
commitPassiveMountOnFiber(
2889-
root,
2890-
fiber,
2891-
committedLanes,
2892-
committedTransitions,
2893-
);
2894-
resetCurrentDebugFiberInDEV();
2895-
2896-
if (fiber === subtreeRoot) {
2897-
nextEffect = null;
2898-
return;
2899-
}
2900-
2901-
const sibling = fiber.sibling;
2902-
if (sibling !== null) {
2903-
sibling.return = fiber.return;
2904-
nextEffect = sibling;
2905-
return;
2906-
}
2907-
2908-
nextEffect = fiber.return;
2909-
}
2876+
setCurrentDebugFiberInDEV(prevDebugFiber);
29102877
}
29112878

29122879
function commitPassiveMountOnFiber(
@@ -2920,6 +2887,12 @@ function commitPassiveMountOnFiber(
29202887
case FunctionComponent:
29212888
case ForwardRef:
29222889
case SimpleMemoComponent: {
2890+
recursivelyTraversePassiveMountEffects(
2891+
finishedRoot,
2892+
finishedWork,
2893+
committedLanes,
2894+
committedTransitions,
2895+
);
29232896
if (flags & Passive) {
29242897
if (
29252898
enableProfilerTimer &&
@@ -2950,6 +2923,12 @@ function commitPassiveMountOnFiber(
29502923
break;
29512924
}
29522925
case HostRoot: {
2926+
recursivelyTraversePassiveMountEffects(
2927+
finishedRoot,
2928+
finishedWork,
2929+
committedLanes,
2930+
committedTransitions,
2931+
);
29532932
if (flags & Passive) {
29542933
if (enableCache) {
29552934
let previousCache: Cache | null = null;
@@ -3000,6 +2979,12 @@ function commitPassiveMountOnFiber(
30002979
}
30012980
case LegacyHiddenComponent:
30022981
case OffscreenComponent: {
2982+
recursivelyTraversePassiveMountEffects(
2983+
finishedRoot,
2984+
finishedWork,
2985+
committedLanes,
2986+
committedTransitions,
2987+
);
30032988
if (flags & Passive) {
30042989
if (enableCache) {
30052990
let previousCache: Cache | null = null;
@@ -3087,6 +3072,12 @@ function commitPassiveMountOnFiber(
30873072
break;
30883073
}
30893074
case CacheComponent: {
3075+
recursivelyTraversePassiveMountEffects(
3076+
finishedRoot,
3077+
finishedWork,
3078+
committedLanes,
3079+
committedTransitions,
3080+
);
30903081
if (flags & Passive) {
30913082
if (enableCache) {
30923083
let previousCache: Cache | null = null;
@@ -3111,6 +3102,12 @@ function commitPassiveMountOnFiber(
31113102
}
31123103
case TracingMarkerComponent: {
31133104
if (enableTransitionTracing) {
3105+
recursivelyTraversePassiveMountEffects(
3106+
finishedRoot,
3107+
finishedWork,
3108+
committedLanes,
3109+
committedTransitions,
3110+
);
31143111
if (flags & Passive) {
31153112
// Get the transitions that were initiatized during the render
31163113
// and add a start transition callback for each of them
@@ -3130,7 +3127,18 @@ function commitPassiveMountOnFiber(
31303127
instance.pendingBoundaries = null;
31313128
}
31323129
}
3130+
break;
31333131
}
3132+
// Intentional fallthrough to next branch
3133+
}
3134+
// eslint-disable-next-line-no-fallthrough
3135+
default: {
3136+
recursivelyTraversePassiveMountEffects(
3137+
finishedRoot,
3138+
finishedWork,
3139+
committedLanes,
3140+
committedTransitions,
3141+
);
31343142
break;
31353143
}
31363144
}

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

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2843,70 +2843,37 @@ export function commitPassiveMountEffects(
28432843
committedLanes: Lanes,
28442844
committedTransitions: Array<Transition> | null,
28452845
): void {
2846-
nextEffect = finishedWork;
2847-
commitPassiveMountEffects_begin(
2848-
finishedWork,
2846+
setCurrentDebugFiberInDEV(finishedWork);
2847+
commitPassiveMountOnFiber(
28492848
root,
2849+
finishedWork,
28502850
committedLanes,
28512851
committedTransitions,
28522852
);
2853+
resetCurrentDebugFiberInDEV();
28532854
}
28542855

2855-
function commitPassiveMountEffects_begin(
2856-
subtreeRoot: Fiber,
2856+
function recursivelyTraversePassiveMountEffects(
28572857
root: FiberRoot,
2858+
parentFiber: Fiber,
28582859
committedLanes: Lanes,
28592860
committedTransitions: Array<Transition> | null,
28602861
) {
2861-
while (nextEffect !== null) {
2862-
const fiber = nextEffect;
2863-
const firstChild = fiber.child;
2864-
if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
2865-
firstChild.return = fiber;
2866-
nextEffect = firstChild;
2867-
} else {
2868-
commitPassiveMountEffects_complete(
2869-
subtreeRoot,
2862+
const prevDebugFiber = getCurrentDebugFiberInDEV();
2863+
if (parentFiber.subtreeFlags & PassiveMask) {
2864+
let child = parentFiber.child;
2865+
while (child !== null) {
2866+
setCurrentDebugFiberInDEV(child);
2867+
commitPassiveMountOnFiber(
28702868
root,
2869+
child,
28712870
committedLanes,
28722871
committedTransitions,
28732872
);
2873+
child = child.sibling;
28742874
}
28752875
}
2876-
}
2877-
2878-
function commitPassiveMountEffects_complete(
2879-
subtreeRoot: Fiber,
2880-
root: FiberRoot,
2881-
committedLanes: Lanes,
2882-
committedTransitions: Array<Transition> | null,
2883-
) {
2884-
while (nextEffect !== null) {
2885-
const fiber = nextEffect;
2886-
2887-
setCurrentDebugFiberInDEV(fiber);
2888-
commitPassiveMountOnFiber(
2889-
root,
2890-
fiber,
2891-
committedLanes,
2892-
committedTransitions,
2893-
);
2894-
resetCurrentDebugFiberInDEV();
2895-
2896-
if (fiber === subtreeRoot) {
2897-
nextEffect = null;
2898-
return;
2899-
}
2900-
2901-
const sibling = fiber.sibling;
2902-
if (sibling !== null) {
2903-
sibling.return = fiber.return;
2904-
nextEffect = sibling;
2905-
return;
2906-
}
2907-
2908-
nextEffect = fiber.return;
2909-
}
2876+
setCurrentDebugFiberInDEV(prevDebugFiber);
29102877
}
29112878

29122879
function commitPassiveMountOnFiber(
@@ -2920,6 +2887,12 @@ function commitPassiveMountOnFiber(
29202887
case FunctionComponent:
29212888
case ForwardRef:
29222889
case SimpleMemoComponent: {
2890+
recursivelyTraversePassiveMountEffects(
2891+
finishedRoot,
2892+
finishedWork,
2893+
committedLanes,
2894+
committedTransitions,
2895+
);
29232896
if (flags & Passive) {
29242897
if (
29252898
enableProfilerTimer &&
@@ -2950,6 +2923,12 @@ function commitPassiveMountOnFiber(
29502923
break;
29512924
}
29522925
case HostRoot: {
2926+
recursivelyTraversePassiveMountEffects(
2927+
finishedRoot,
2928+
finishedWork,
2929+
committedLanes,
2930+
committedTransitions,
2931+
);
29532932
if (flags & Passive) {
29542933
if (enableCache) {
29552934
let previousCache: Cache | null = null;
@@ -3000,6 +2979,12 @@ function commitPassiveMountOnFiber(
30002979
}
30012980
case LegacyHiddenComponent:
30022981
case OffscreenComponent: {
2982+
recursivelyTraversePassiveMountEffects(
2983+
finishedRoot,
2984+
finishedWork,
2985+
committedLanes,
2986+
committedTransitions,
2987+
);
30032988
if (flags & Passive) {
30042989
if (enableCache) {
30052990
let previousCache: Cache | null = null;
@@ -3087,6 +3072,12 @@ function commitPassiveMountOnFiber(
30873072
break;
30883073
}
30893074
case CacheComponent: {
3075+
recursivelyTraversePassiveMountEffects(
3076+
finishedRoot,
3077+
finishedWork,
3078+
committedLanes,
3079+
committedTransitions,
3080+
);
30903081
if (flags & Passive) {
30913082
if (enableCache) {
30923083
let previousCache: Cache | null = null;
@@ -3111,6 +3102,12 @@ function commitPassiveMountOnFiber(
31113102
}
31123103
case TracingMarkerComponent: {
31133104
if (enableTransitionTracing) {
3105+
recursivelyTraversePassiveMountEffects(
3106+
finishedRoot,
3107+
finishedWork,
3108+
committedLanes,
3109+
committedTransitions,
3110+
);
31143111
if (flags & Passive) {
31153112
// Get the transitions that were initiatized during the render
31163113
// and add a start transition callback for each of them
@@ -3130,7 +3127,18 @@ function commitPassiveMountOnFiber(
31303127
instance.pendingBoundaries = null;
31313128
}
31323129
}
3130+
break;
31333131
}
3132+
// Intentional fallthrough to next branch
3133+
}
3134+
// eslint-disable-next-line-no-fallthrough
3135+
default: {
3136+
recursivelyTraversePassiveMountEffects(
3137+
finishedRoot,
3138+
finishedWork,
3139+
committedLanes,
3140+
committedTransitions,
3141+
);
31343142
break;
31353143
}
31363144
}

0 commit comments

Comments
 (0)