Skip to content

Commit 02da938

Browse files
author
Brian Vaughn
authored
Don't double-invoke effects in legacy roots (#20028)
Large legacy applications are likely to be difficult to update to handle this feature, and it wouldn't add any value– since newer APIs that require this resilience are not legacy compatible.
1 parent d95c493 commit 02da938

File tree

6 files changed

+193
-56
lines changed

6 files changed

+193
-56
lines changed

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

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,13 @@ import invariant from 'shared/invariant';
3030
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
3131

3232
import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
33-
import {DebugTracingMode, StrictMode} from './ReactTypeOfMode';
33+
import {
34+
BlockingMode,
35+
ConcurrentMode,
36+
DebugTracingMode,
37+
NoMode,
38+
StrictMode,
39+
} from './ReactTypeOfMode';
3440

3541
import {
3642
enqueueUpdate,
@@ -891,7 +897,12 @@ function mountClassInstance(
891897
}
892898

893899
if (typeof instance.componentDidMount === 'function') {
894-
if (__DEV__ && enableDoubleInvokingEffects) {
900+
if (
901+
__DEV__ &&
902+
enableDoubleInvokingEffects &&
903+
(workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
904+
) {
905+
// Never double-invoke effects for legacy roots.
895906
workInProgress.flags |= MountLayoutDev | Update;
896907
} else {
897908
workInProgress.flags |= Update;
@@ -965,7 +976,11 @@ function resumeMountClassInstance(
965976
// If an update was already in progress, we should schedule an Update
966977
// effect even though we're bailing out, so that cWU/cDU are called.
967978
if (typeof instance.componentDidMount === 'function') {
968-
if (__DEV__ && enableDoubleInvokingEffects) {
979+
if (
980+
__DEV__ &&
981+
enableDoubleInvokingEffects &&
982+
(workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
983+
) {
969984
workInProgress.flags |= MountLayoutDev | Update;
970985
} else {
971986
workInProgress.flags |= Update;
@@ -1012,7 +1027,11 @@ function resumeMountClassInstance(
10121027
}
10131028
}
10141029
if (typeof instance.componentDidMount === 'function') {
1015-
if (__DEV__ && enableDoubleInvokingEffects) {
1030+
if (
1031+
__DEV__ &&
1032+
enableDoubleInvokingEffects &&
1033+
(workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
1034+
) {
10161035
workInProgress.flags |= MountLayoutDev | Update;
10171036
} else {
10181037
workInProgress.flags |= Update;
@@ -1022,7 +1041,11 @@ function resumeMountClassInstance(
10221041
// If an update was already in progress, we should schedule an Update
10231042
// effect even though we're bailing out, so that cWU/cDU are called.
10241043
if (typeof instance.componentDidMount === 'function') {
1025-
if (__DEV__ && enableDoubleInvokingEffects) {
1044+
if (
1045+
__DEV__ &&
1046+
enableDoubleInvokingEffects &&
1047+
(workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
1048+
) {
10261049
workInProgress.flags |= MountLayoutDev | Update;
10271050
} else {
10281051
workInProgress.flags |= Update;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2024,6 +2024,8 @@ function commitPassiveMount(
20242024

20252025
function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
20262026
if (__DEV__ && enableDoubleInvokingEffects) {
2027+
// We don't need to re-check for legacy roots here.
2028+
// This function will not be called within legacy roots.
20272029
switch (fiber.tag) {
20282030
case FunctionComponent:
20292031
case ForwardRef:
@@ -2057,6 +2059,8 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
20572059

20582060
function invokePassiveEffectMountInDEV(fiber: Fiber): void {
20592061
if (__DEV__ && enableDoubleInvokingEffects) {
2062+
// We don't need to re-check for legacy roots here.
2063+
// This function will not be called within legacy roots.
20602064
switch (fiber.tag) {
20612065
case FunctionComponent:
20622066
case ForwardRef:
@@ -2081,6 +2085,8 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
20812085

20822086
function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
20832087
if (__DEV__ && enableDoubleInvokingEffects) {
2088+
// We don't need to re-check for legacy roots here.
2089+
// This function will not be called within legacy roots.
20842090
switch (fiber.tag) {
20852091
case FunctionComponent:
20862092
case ForwardRef:
@@ -2113,6 +2119,8 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
21132119

21142120
function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
21152121
if (__DEV__ && enableDoubleInvokingEffects) {
2122+
// We don't need to re-check for legacy roots here.
2123+
// This function will not be called within legacy roots.
21162124
switch (fiber.tag) {
21172125
case FunctionComponent:
21182126
case ForwardRef:

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

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,12 @@ import {
2929
enableDoubleInvokingEffects,
3030
} from 'shared/ReactFeatureFlags';
3131

32-
import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
32+
import {
33+
NoMode,
34+
BlockingMode,
35+
ConcurrentMode,
36+
DebugTracingMode,
37+
} from './ReactTypeOfMode';
3338
import {
3439
NoLane,
3540
NoLanes,
@@ -485,7 +490,11 @@ export function bailoutHooks(
485490
lanes: Lanes,
486491
) {
487492
workInProgress.updateQueue = current.updateQueue;
488-
if (__DEV__ && enableDoubleInvokingEffects) {
493+
if (
494+
__DEV__ &&
495+
enableDoubleInvokingEffects &&
496+
(workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
497+
) {
489498
workInProgress.flags &= ~(
490499
MountPassiveDevEffect |
491500
PassiveEffect |
@@ -1253,7 +1262,11 @@ function mountEffect(
12531262
}
12541263
}
12551264

1256-
if (__DEV__ && enableDoubleInvokingEffects) {
1265+
if (
1266+
__DEV__ &&
1267+
enableDoubleInvokingEffects &&
1268+
(currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
1269+
) {
12571270
return mountEffectImpl(
12581271
MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
12591272
HookPassive,
@@ -1287,7 +1300,11 @@ function mountLayoutEffect(
12871300
create: () => (() => void) | void,
12881301
deps: Array<mixed> | void | null,
12891302
): void {
1290-
if (__DEV__ && enableDoubleInvokingEffects) {
1303+
if (
1304+
__DEV__ &&
1305+
enableDoubleInvokingEffects &&
1306+
(currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
1307+
) {
12911308
return mountEffectImpl(
12921309
MountLayoutDevEffect | UpdateEffect,
12931310
HookLayout,
@@ -1355,7 +1372,11 @@ function mountImperativeHandle<T>(
13551372
const effectDeps =
13561373
deps !== null && deps !== undefined ? deps.concat([ref]) : null;
13571374

1358-
if (__DEV__ && enableDoubleInvokingEffects) {
1375+
if (
1376+
__DEV__ &&
1377+
enableDoubleInvokingEffects &&
1378+
(currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
1379+
) {
13591380
return mountEffectImpl(
13601381
MountLayoutDevEffect | UpdateEffect,
13611382
HookLayout,

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2874,6 +2874,11 @@ function commitDoubleInvokeEffectsInDEV(
28742874
hasPassiveEffects: boolean,
28752875
) {
28762876
if (__DEV__ && enableDoubleInvokingEffects) {
2877+
// Never double-invoke effects for legacy roots.
2878+
if ((fiber.mode & (BlockingMode | ConcurrentMode)) === NoMode) {
2879+
return;
2880+
}
2881+
28772882
setCurrentDebugFiberInDEV(fiber);
28782883
invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
28792884
if (hasPassiveEffects) {
@@ -2898,6 +2903,8 @@ function invokeEffectsInDev(
28982903
invokeEffectFn: (fiber: Fiber) => void,
28992904
): void {
29002905
if (__DEV__ && enableDoubleInvokingEffects) {
2906+
// We don't need to re-check for legacy roots here.
2907+
// This function will not be called within legacy roots.
29012908
let fiber = firstChild;
29022909
while (fiber !== null) {
29032910
if (fiber.child !== null) {

0 commit comments

Comments
 (0)