Skip to content

Commit b23b667

Browse files
sammy-SCpoteto
sammy-SC
authored and
poteto
committed
Put modern StrictMode behind a feature flag (#25365)
* Put modern StrictMode behind a feature flag * Remove unneeded flag
1 parent 5c43c6f commit b23b667

21 files changed

+637
-90
lines changed

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

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,20 @@ import type {UpdateQueue} from './ReactFiberClassUpdateQueue.new';
1313
import type {Flags} from './ReactFiberFlags';
1414

1515
import * as React from 'react';
16-
import {LayoutStatic, Update, Snapshot} from './ReactFiberFlags';
16+
import {
17+
LayoutStatic,
18+
Update,
19+
Snapshot,
20+
MountLayoutDev,
21+
} from './ReactFiberFlags';
1722
import {
1823
debugRenderPhaseSideEffectsForStrictMode,
1924
disableLegacyContext,
2025
enableDebugTracing,
2126
enableSchedulingProfiler,
2227
warnAboutDeprecatedLifecycles,
2328
enableLazyContextPropagation,
29+
enableStrictEffects,
2430
} from 'shared/ReactFeatureFlags';
2531
import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
2632
import {isMounted} from './ReactFiberTreeReflection';
@@ -33,7 +39,12 @@ import isArray from 'shared/isArray';
3339
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
3440

3541
import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
36-
import {DebugTracingMode, StrictLegacyMode} from './ReactTypeOfMode';
42+
import {
43+
DebugTracingMode,
44+
NoMode,
45+
StrictLegacyMode,
46+
StrictEffectsMode,
47+
} from './ReactTypeOfMode';
3748

3849
import {
3950
enqueueUpdate,
@@ -896,7 +907,14 @@ function mountClassInstance(
896907
}
897908

898909
if (typeof instance.componentDidMount === 'function') {
899-
const fiberFlags: Flags = Update | LayoutStatic;
910+
let fiberFlags: Flags = Update | LayoutStatic;
911+
if (
912+
__DEV__ &&
913+
enableStrictEffects &&
914+
(workInProgress.mode & StrictEffectsMode) !== NoMode
915+
) {
916+
fiberFlags |= MountLayoutDev;
917+
}
900918
workInProgress.flags |= fiberFlags;
901919
}
902920
}
@@ -967,7 +985,14 @@ function resumeMountClassInstance(
967985
// If an update was already in progress, we should schedule an Update
968986
// effect even though we're bailing out, so that cWU/cDU are called.
969987
if (typeof instance.componentDidMount === 'function') {
970-
const fiberFlags: Flags = Update | LayoutStatic;
988+
let fiberFlags: Flags = Update | LayoutStatic;
989+
if (
990+
__DEV__ &&
991+
enableStrictEffects &&
992+
(workInProgress.mode & StrictEffectsMode) !== NoMode
993+
) {
994+
fiberFlags |= MountLayoutDev;
995+
}
971996
workInProgress.flags |= fiberFlags;
972997
}
973998
return false;
@@ -1011,14 +1036,28 @@ function resumeMountClassInstance(
10111036
}
10121037
}
10131038
if (typeof instance.componentDidMount === 'function') {
1014-
const fiberFlags: Flags = Update | LayoutStatic;
1039+
let fiberFlags: Flags = Update | LayoutStatic;
1040+
if (
1041+
__DEV__ &&
1042+
enableStrictEffects &&
1043+
(workInProgress.mode & StrictEffectsMode) !== NoMode
1044+
) {
1045+
fiberFlags |= MountLayoutDev;
1046+
}
10151047
workInProgress.flags |= fiberFlags;
10161048
}
10171049
} else {
10181050
// If an update was already in progress, we should schedule an Update
10191051
// effect even though we're bailing out, so that cWU/cDU are called.
10201052
if (typeof instance.componentDidMount === 'function') {
1021-
const fiberFlags: Flags = Update | LayoutStatic;
1053+
let fiberFlags: Flags = Update | LayoutStatic;
1054+
if (
1055+
__DEV__ &&
1056+
enableStrictEffects &&
1057+
(workInProgress.mode & StrictEffectsMode) !== NoMode
1058+
) {
1059+
fiberFlags |= MountLayoutDev;
1060+
}
10221061
workInProgress.flags |= fiberFlags;
10231062
}
10241063

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

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,20 @@ import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old';
1313
import type {Flags} from './ReactFiberFlags';
1414

1515
import * as React from 'react';
16-
import {LayoutStatic, Update, Snapshot} from './ReactFiberFlags';
16+
import {
17+
LayoutStatic,
18+
Update,
19+
Snapshot,
20+
MountLayoutDev,
21+
} from './ReactFiberFlags';
1722
import {
1823
debugRenderPhaseSideEffectsForStrictMode,
1924
disableLegacyContext,
2025
enableDebugTracing,
2126
enableSchedulingProfiler,
2227
warnAboutDeprecatedLifecycles,
2328
enableLazyContextPropagation,
29+
enableStrictEffects,
2430
} from 'shared/ReactFeatureFlags';
2531
import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
2632
import {isMounted} from './ReactFiberTreeReflection';
@@ -33,7 +39,12 @@ import isArray from 'shared/isArray';
3339
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
3440

3541
import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
36-
import {DebugTracingMode, StrictLegacyMode} from './ReactTypeOfMode';
42+
import {
43+
DebugTracingMode,
44+
NoMode,
45+
StrictLegacyMode,
46+
StrictEffectsMode,
47+
} from './ReactTypeOfMode';
3748

3849
import {
3950
enqueueUpdate,
@@ -896,7 +907,14 @@ function mountClassInstance(
896907
}
897908

898909
if (typeof instance.componentDidMount === 'function') {
899-
const fiberFlags: Flags = Update | LayoutStatic;
910+
let fiberFlags: Flags = Update | LayoutStatic;
911+
if (
912+
__DEV__ &&
913+
enableStrictEffects &&
914+
(workInProgress.mode & StrictEffectsMode) !== NoMode
915+
) {
916+
fiberFlags |= MountLayoutDev;
917+
}
900918
workInProgress.flags |= fiberFlags;
901919
}
902920
}
@@ -967,7 +985,14 @@ function resumeMountClassInstance(
967985
// If an update was already in progress, we should schedule an Update
968986
// effect even though we're bailing out, so that cWU/cDU are called.
969987
if (typeof instance.componentDidMount === 'function') {
970-
const fiberFlags: Flags = Update | LayoutStatic;
988+
let fiberFlags: Flags = Update | LayoutStatic;
989+
if (
990+
__DEV__ &&
991+
enableStrictEffects &&
992+
(workInProgress.mode & StrictEffectsMode) !== NoMode
993+
) {
994+
fiberFlags |= MountLayoutDev;
995+
}
971996
workInProgress.flags |= fiberFlags;
972997
}
973998
return false;
@@ -1011,14 +1036,28 @@ function resumeMountClassInstance(
10111036
}
10121037
}
10131038
if (typeof instance.componentDidMount === 'function') {
1014-
const fiberFlags: Flags = Update | LayoutStatic;
1039+
let fiberFlags: Flags = Update | LayoutStatic;
1040+
if (
1041+
__DEV__ &&
1042+
enableStrictEffects &&
1043+
(workInProgress.mode & StrictEffectsMode) !== NoMode
1044+
) {
1045+
fiberFlags |= MountLayoutDev;
1046+
}
10151047
workInProgress.flags |= fiberFlags;
10161048
}
10171049
} else {
10181050
// If an update was already in progress, we should schedule an Update
10191051
// effect even though we're bailing out, so that cWU/cDU are called.
10201052
if (typeof instance.componentDidMount === 'function') {
1021-
const fiberFlags: Flags = Update | LayoutStatic;
1053+
let fiberFlags: Flags = Update | LayoutStatic;
1054+
if (
1055+
__DEV__ &&
1056+
enableStrictEffects &&
1057+
(workInProgress.mode & StrictEffectsMode) !== NoMode
1058+
) {
1059+
fiberFlags |= MountLayoutDev;
1060+
}
10221061
workInProgress.flags |= fiberFlags;
10231062
}
10241063

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

Lines changed: 109 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import {
4848
enableUpdaterTracking,
4949
enableCache,
5050
enableTransitionTracing,
51+
enableStrictEffects,
5152
} from 'shared/ReactFeatureFlags';
5253
import {
5354
FunctionComponent,
@@ -4057,4 +4058,111 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
40574058
}
40584059
}
40594060

4060-
export {commitPlacement, commitAttachRef, commitDetachRef};
4061+
function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
4062+
if (__DEV__ && enableStrictEffects) {
4063+
// We don't need to re-check StrictEffectsMode here.
4064+
// This function is only called if that check has already passed.
4065+
switch (fiber.tag) {
4066+
case FunctionComponent:
4067+
case ForwardRef:
4068+
case SimpleMemoComponent: {
4069+
try {
4070+
commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
4071+
} catch (error) {
4072+
captureCommitPhaseError(fiber, fiber.return, error);
4073+
}
4074+
break;
4075+
}
4076+
case ClassComponent: {
4077+
const instance = fiber.stateNode;
4078+
try {
4079+
instance.componentDidMount();
4080+
} catch (error) {
4081+
captureCommitPhaseError(fiber, fiber.return, error);
4082+
}
4083+
break;
4084+
}
4085+
}
4086+
}
4087+
}
4088+
4089+
function invokePassiveEffectMountInDEV(fiber: Fiber): void {
4090+
if (__DEV__ && enableStrictEffects) {
4091+
// We don't need to re-check StrictEffectsMode here.
4092+
// This function is only called if that check has already passed.
4093+
switch (fiber.tag) {
4094+
case FunctionComponent:
4095+
case ForwardRef:
4096+
case SimpleMemoComponent: {
4097+
try {
4098+
commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
4099+
} catch (error) {
4100+
captureCommitPhaseError(fiber, fiber.return, error);
4101+
}
4102+
break;
4103+
}
4104+
}
4105+
}
4106+
}
4107+
4108+
function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
4109+
if (__DEV__ && enableStrictEffects) {
4110+
// We don't need to re-check StrictEffectsMode here.
4111+
// This function is only called if that check has already passed.
4112+
switch (fiber.tag) {
4113+
case FunctionComponent:
4114+
case ForwardRef:
4115+
case SimpleMemoComponent: {
4116+
try {
4117+
commitHookEffectListUnmount(
4118+
HookLayout | HookHasEffect,
4119+
fiber,
4120+
fiber.return,
4121+
);
4122+
} catch (error) {
4123+
captureCommitPhaseError(fiber, fiber.return, error);
4124+
}
4125+
break;
4126+
}
4127+
case ClassComponent: {
4128+
const instance = fiber.stateNode;
4129+
if (typeof instance.componentWillUnmount === 'function') {
4130+
safelyCallComponentWillUnmount(fiber, fiber.return, instance);
4131+
}
4132+
break;
4133+
}
4134+
}
4135+
}
4136+
}
4137+
4138+
function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
4139+
if (__DEV__ && enableStrictEffects) {
4140+
// We don't need to re-check StrictEffectsMode here.
4141+
// This function is only called if that check has already passed.
4142+
switch (fiber.tag) {
4143+
case FunctionComponent:
4144+
case ForwardRef:
4145+
case SimpleMemoComponent: {
4146+
try {
4147+
commitHookEffectListUnmount(
4148+
HookPassive | HookHasEffect,
4149+
fiber,
4150+
fiber.return,
4151+
);
4152+
} catch (error) {
4153+
captureCommitPhaseError(fiber, fiber.return, error);
4154+
}
4155+
}
4156+
}
4157+
}
4158+
}
4159+
4160+
export {
4161+
commitPlacement,
4162+
commitAttachRef,
4163+
commitDetachRef,
4164+
invokeLayoutEffectMountInDEV,
4165+
invokeLayoutEffectUnmountInDEV,
4166+
invokePassiveEffectMountInDEV,
4167+
invokePassiveEffectUnmountInDEV,
4168+
};

0 commit comments

Comments
 (0)