Skip to content

Commit e2a12df

Browse files
acdliteacdlite
committed
Convert passive unmount phase to tree traversal
1 parent 3e78bf3 commit e2a12df

File tree

2 files changed

+181
-88
lines changed

2 files changed

+181
-88
lines changed

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

Lines changed: 155 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
2424
import type {Wakeable} from 'shared/ReactTypes';
2525
import type {ReactPriorityLevel} from './ReactInternalTypes';
2626
import type {OffscreenState} from './ReactFiberOffscreenComponent';
27+
import type {HookFlags} from './ReactHookEffectTags';
2728

2829
import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
2930
import {
@@ -65,10 +66,13 @@ import {
6566
NoFlags,
6667
ContentReset,
6768
Placement,
69+
ChildDeletion,
6870
Snapshot,
6971
Update,
7072
Passive,
73+
PassiveStatic,
7174
PassiveMask,
75+
PassiveUnmountPendingDev,
7276
} from './ReactFiberFlags';
7377
import getComponentName from 'shared/getComponentName';
7478
import invariant from 'shared/invariant';
@@ -340,19 +344,19 @@ function commitBeforeMutationLifeCycles(
340344
);
341345
}
342346

343-
function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) {
347+
function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
344348
const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
345349
const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
346350
if (lastEffect !== null) {
347351
const firstEffect = lastEffect.next;
348352
let effect = firstEffect;
349353
do {
350-
if ((effect.tag & tag) === tag) {
354+
if ((effect.tag & flags) === flags) {
351355
// Unmount
352356
const destroy = effect.destroy;
353357
effect.destroy = undefined;
354358
if (destroy !== undefined) {
355-
destroy();
359+
safelyCallDestroy(finishedWork, destroy);
356360
}
357361
}
358362
effect = effect.next;
@@ -1914,6 +1918,154 @@ function commitPassiveMountOnFiber(
19141918
}
19151919
}
19161920

1921+
export function commitPassiveUnmountEffects(firstChild: Fiber): void {
1922+
nextEffect = firstChild;
1923+
commitPassiveUnmountEffects_begin();
1924+
}
1925+
1926+
function commitPassiveUnmountEffects_begin() {
1927+
while (nextEffect !== null) {
1928+
const fiber = nextEffect;
1929+
const child = fiber.child;
1930+
1931+
if ((nextEffect.flags & ChildDeletion) !== NoFlags) {
1932+
const deletions = fiber.deletions;
1933+
if (deletions !== null) {
1934+
for (let i = 0; i < deletions.length; i++) {
1935+
const fiberToDelete = deletions[i];
1936+
nextEffect = fiberToDelete;
1937+
commitPassiveUnmountEffectsInsideOfDeletedTree_begin(fiberToDelete);
1938+
1939+
// Now that passive effects have been processed, it's safe to detach lingering pointers.
1940+
detachFiberAfterEffects(fiberToDelete);
1941+
}
1942+
nextEffect = fiber;
1943+
}
1944+
}
1945+
1946+
if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
1947+
ensureCorrectReturnPointer(child, fiber);
1948+
nextEffect = child;
1949+
} else {
1950+
commitPassiveUnmountEffects_complete();
1951+
}
1952+
}
1953+
}
1954+
1955+
function commitPassiveUnmountEffects_complete() {
1956+
while (nextEffect !== null) {
1957+
const fiber = nextEffect;
1958+
if ((fiber.flags & Passive) !== NoFlags) {
1959+
setCurrentDebugFiberInDEV(fiber);
1960+
commitPassiveUnmountOnFiber(fiber);
1961+
resetCurrentDebugFiberInDEV();
1962+
}
1963+
1964+
const sibling = fiber.sibling;
1965+
if (sibling !== null) {
1966+
ensureCorrectReturnPointer(sibling, fiber.return);
1967+
nextEffect = sibling;
1968+
return;
1969+
}
1970+
1971+
nextEffect = fiber.return;
1972+
}
1973+
}
1974+
1975+
function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
1976+
if (__DEV__) {
1977+
finishedWork.flags &= ~PassiveUnmountPendingDev;
1978+
const alternate = finishedWork.alternate;
1979+
if (alternate !== null) {
1980+
alternate.flags &= ~PassiveUnmountPendingDev;
1981+
}
1982+
}
1983+
1984+
switch (finishedWork.tag) {
1985+
case FunctionComponent:
1986+
case ForwardRef:
1987+
case SimpleMemoComponent: {
1988+
if (
1989+
enableProfilerTimer &&
1990+
enableProfilerCommitHooks &&
1991+
finishedWork.mode & ProfileMode
1992+
) {
1993+
startPassiveEffectTimer();
1994+
commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
1995+
recordPassiveEffectDuration(finishedWork);
1996+
} else {
1997+
commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
1998+
}
1999+
break;
2000+
}
2001+
}
2002+
}
2003+
2004+
function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
2005+
deletedSubtreeRoot: Fiber,
2006+
) {
2007+
while (nextEffect !== null) {
2008+
const fiber = nextEffect;
2009+
const child = fiber.child;
2010+
if ((fiber.subtreeFlags & PassiveStatic) !== NoFlags && child !== null) {
2011+
ensureCorrectReturnPointer(child, fiber);
2012+
nextEffect = child;
2013+
} else {
2014+
commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
2015+
deletedSubtreeRoot,
2016+
);
2017+
}
2018+
}
2019+
}
2020+
2021+
function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
2022+
deletedSubtreeRoot: Fiber,
2023+
) {
2024+
while (nextEffect !== null) {
2025+
const fiber = nextEffect;
2026+
if ((fiber.flags & PassiveStatic) !== NoFlags) {
2027+
setCurrentDebugFiberInDEV(fiber);
2028+
commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
2029+
resetCurrentDebugFiberInDEV();
2030+
}
2031+
2032+
if (fiber === deletedSubtreeRoot) {
2033+
nextEffect = null;
2034+
return;
2035+
}
2036+
2037+
const sibling = fiber.sibling;
2038+
if (sibling !== null) {
2039+
ensureCorrectReturnPointer(sibling, fiber.return);
2040+
nextEffect = sibling;
2041+
return;
2042+
}
2043+
2044+
nextEffect = fiber.return;
2045+
}
2046+
}
2047+
2048+
function commitPassiveUnmountInsideDeletedTreeOnFiber(current: Fiber): void {
2049+
switch (current.tag) {
2050+
case FunctionComponent:
2051+
case ForwardRef:
2052+
case SimpleMemoComponent: {
2053+
if (
2054+
enableProfilerTimer &&
2055+
enableProfilerCommitHooks &&
2056+
current.mode & ProfileMode
2057+
) {
2058+
startPassiveEffectTimer();
2059+
commitHookEffectListUnmount(HookPassive, current);
2060+
recordPassiveEffectDuration(current);
2061+
} else {
2062+
commitHookEffectListUnmount(HookPassive, current);
2063+
}
2064+
break;
2065+
}
2066+
}
2067+
}
2068+
19172069
let didWarnWrongReturnPointer = false;
19182070
function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
19192071
if (__DEV__) {

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

Lines changed: 26 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import type {Interaction} from 'scheduler/src/Tracing';
1515
import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
1616
import type {Effect as HookEffect} from './ReactFiberHooks.new';
1717
import type {StackCursor} from './ReactFiberStack.new';
18+
import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
1819

1920
import {
2021
warnAboutDeprecatedLifecycles,
@@ -50,6 +51,10 @@ import {
5051
flushSyncCallbackQueue,
5152
scheduleSyncCallback,
5253
} from './SchedulerWithReactIntegration.new';
54+
import {
55+
NoFlags as NoHookEffect,
56+
Passive as HookPassive,
57+
} from './ReactHookEffectTags';
5358
import {
5459
logCommitStarted,
5560
logCommitStopped,
@@ -127,7 +132,7 @@ import {
127132
Snapshot,
128133
Callback,
129134
Passive,
130-
PassiveUnmountPendingDev,
135+
PassiveStatic,
131136
Incomplete,
132137
HostEffectMask,
133138
Hydrating,
@@ -194,6 +199,7 @@ import {
194199
commitResetTextContent,
195200
isSuspenseBoundaryBeingHidden,
196201
commitPassiveMountEffects,
202+
commitPassiveUnmountEffects,
197203
detachFiberAfterEffects,
198204
} from './ReactFiberCommitWork.new';
199205
import {enqueueUpdate} from './ReactUpdateQueue.new';
@@ -213,9 +219,7 @@ import {
213219
import {
214220
markNestedUpdateScheduled,
215221
recordCommitTime,
216-
recordPassiveEffectDuration,
217222
resetNestedUpdateFlag,
218-
startPassiveEffectTimer,
219223
startProfilerTimer,
220224
stopProfilerTimerIfRunningAndRecordDelta,
221225
syncNestedUpdateFlag,
@@ -341,7 +345,6 @@ let rootDoesHavePassiveEffects: boolean = false;
341345
let rootWithPendingPassiveEffects: FiberRoot | null = null;
342346
let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoSchedulerPriority;
343347
let pendingPassiveEffectsLanes: Lanes = NoLanes;
344-
let pendingPassiveHookEffectsUnmount: Array<HookEffect | Fiber> = [];
345348
let pendingPassiveProfilerEffects: Array<Fiber> = [];
346349

347350
let rootsWithPendingDiscreteUpdates: Set<FiberRoot> | null = null;
@@ -2499,14 +2502,6 @@ export function enqueuePendingPassiveHookEffectUnmount(
24992502
fiber: Fiber,
25002503
effect: HookEffect,
25012504
): void {
2502-
pendingPassiveHookEffectsUnmount.push(effect, fiber);
2503-
if (__DEV__) {
2504-
fiber.flags |= PassiveUnmountPendingDev;
2505-
const alternate = fiber.alternate;
2506-
if (alternate !== null) {
2507-
alternate.flags |= PassiveUnmountPendingDev;
2508-
}
2509-
}
25102505
if (!rootDoesHavePassiveEffects) {
25112506
rootDoesHavePassiveEffects = true;
25122507
scheduleCallback(NormalSchedulerPriority, () => {
@@ -2549,74 +2544,7 @@ function flushPassiveEffectsImpl() {
25492544
executionContext |= CommitContext;
25502545
const prevInteractions = pushInteractions(root);
25512546

2552-
// It's important that ALL pending passive effect destroy functions are called
2553-
// before ANY passive effect create functions are called.
2554-
// Otherwise effects in sibling components might interfere with each other.
2555-
// e.g. a destroy function in one component may unintentionally override a ref
2556-
// value set by a create function in another component.
2557-
// Layout effects have the same constraint.
2558-
2559-
// First pass: Destroy stale passive effects.
2560-
const unmountEffects = pendingPassiveHookEffectsUnmount;
2561-
pendingPassiveHookEffectsUnmount = [];
2562-
for (let i = 0; i < unmountEffects.length; i += 2) {
2563-
const effect = ((unmountEffects[i]: any): HookEffect);
2564-
const fiber = ((unmountEffects[i + 1]: any): Fiber);
2565-
const destroy = effect.destroy;
2566-
effect.destroy = undefined;
2567-
2568-
if (__DEV__) {
2569-
fiber.flags &= ~PassiveUnmountPendingDev;
2570-
const alternate = fiber.alternate;
2571-
if (alternate !== null) {
2572-
alternate.flags &= ~PassiveUnmountPendingDev;
2573-
}
2574-
}
2575-
2576-
if (typeof destroy === 'function') {
2577-
if (__DEV__) {
2578-
setCurrentDebugFiberInDEV(fiber);
2579-
if (
2580-
enableProfilerTimer &&
2581-
enableProfilerCommitHooks &&
2582-
fiber.mode & ProfileMode
2583-
) {
2584-
startPassiveEffectTimer();
2585-
invokeGuardedCallback(null, destroy, null);
2586-
recordPassiveEffectDuration(fiber);
2587-
} else {
2588-
invokeGuardedCallback(null, destroy, null);
2589-
}
2590-
if (hasCaughtError()) {
2591-
invariant(fiber !== null, 'Should be working on an effect.');
2592-
const error = clearCaughtError();
2593-
captureCommitPhaseError(fiber, error);
2594-
}
2595-
resetCurrentDebugFiberInDEV();
2596-
} else {
2597-
try {
2598-
if (
2599-
enableProfilerTimer &&
2600-
enableProfilerCommitHooks &&
2601-
fiber.mode & ProfileMode
2602-
) {
2603-
try {
2604-
startPassiveEffectTimer();
2605-
destroy();
2606-
} finally {
2607-
recordPassiveEffectDuration(fiber);
2608-
}
2609-
} else {
2610-
destroy();
2611-
}
2612-
} catch (error) {
2613-
invariant(fiber !== null, 'Should be working on an effect.');
2614-
captureCommitPhaseError(fiber, error);
2615-
}
2616-
}
2617-
}
2618-
}
2619-
// Second pass: Create new passive effects.
2547+
commitPassiveUnmountEffects(root.current);
26202548
commitPassiveMountEffects(root, root.current);
26212549

26222550
// TODO: Move to commitPassiveMountEffects
@@ -3004,12 +2932,25 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
30042932
return;
30052933
}
30062934

3007-
// If there are pending passive effects unmounts for this Fiber,
3008-
// we can assume that they would have prevented this update.
3009-
if ((fiber.flags & PassiveUnmountPendingDev) !== NoFlags) {
3010-
return;
3011-
}
2935+
if ((fiber.flags & PassiveStatic) !== NoFlags) {
2936+
const updateQueue: FunctionComponentUpdateQueue | null = (fiber.updateQueue: any);
2937+
if (updateQueue !== null) {
2938+
const lastEffect = updateQueue.lastEffect;
2939+
if (lastEffect !== null) {
2940+
const firstEffect = lastEffect.next;
30122941

2942+
let effect = firstEffect;
2943+
do {
2944+
if (effect.destroy !== undefined) {
2945+
if ((effect.tag & HookPassive) !== NoHookEffect) {
2946+
return;
2947+
}
2948+
}
2949+
effect = effect.next;
2950+
} while (effect !== firstEffect);
2951+
}
2952+
}
2953+
}
30132954
// We show the whole stack but dedupe on the top component's name because
30142955
// the problematic code almost always lies inside that component.
30152956
const componentName = getComponentName(fiber.type) || 'ReactComponent';

0 commit comments

Comments
 (0)