@samitouri / QOS-React-2 / commits / a8c9cb18b7

Land enableSuspenseLayoutEffectSemantics flag (#24713)

This was released to open source in 18.0 and is already hardcoded to true in www.

Andrew Clark committed Jun 13, 2022 at 11:27 UTC a8c9cb18b7e5d9eb3817272a1260f9f6b79815a2
24 files changed +59 -219
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+1 -4
@@ -100,7 +100,6 @@ import {
100 enableScopeAPI,
101 enableCache,
102 enableLazyContextPropagation,
103 - enableSuspenseLayoutEffectSemantics,
103 enableSchedulingProfiler,
104 enableTransitionTracing,
105 enableLegacyHidden,
@@ -944,9 +943,7 @@ function markRef(current: Fiber | null, workInProgress: Fiber) {
943 ) {
944 // Schedule a Ref effect
945 workInProgress.flags |= Ref;
947 - if (enableSuspenseLayoutEffectSemantics) {
948 - workInProgress.flags |= RefStatic;
949 - }
946 + workInProgress.flags |= RefStatic;
947 }
948 }
949
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+1 -4
@@ -100,7 +100,6 @@ import {
100 enableScopeAPI,
101 enableCache,
102 enableLazyContextPropagation,
103 - enableSuspenseLayoutEffectSemantics,
103 enableSchedulingProfiler,
104 enableTransitionTracing,
105 enableLegacyHidden,
@@ -944,9 +943,7 @@ function markRef(current: Fiber | null, workInProgress: Fiber) {
943 ) {
944 // Schedule a Ref effect
945 workInProgress.flags |= Ref;
947 - if (enableSuspenseLayoutEffectSemantics) {
948 - workInProgress.flags |= RefStatic;
949 - }
946 + workInProgress.flags |= RefStatic;
947 }
948 }
949
packages/react-reconciler/src/ReactFiberClassComponent.new.js
+4 -17
@@ -27,7 +27,6 @@ import {
27 warnAboutDeprecatedLifecycles,
28 enableStrictEffects,
29 enableLazyContextPropagation,
30 - enableSuspenseLayoutEffectSemantics,
30 } from 'shared/ReactFeatureFlags';
31 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
32 import {isMounted} from './ReactFiberTreeReflection';
@@ -908,10 +907,7 @@ function mountClassInstance(
907 }
908
909 if (typeof instance.componentDidMount === 'function') {
911 - let fiberFlags: Flags = Update;
912 - if (enableSuspenseLayoutEffectSemantics) {
913 - fiberFlags |= LayoutStatic;
914 - }
910 + let fiberFlags: Flags = Update | LayoutStatic;
911 if (
912 __DEV__ &&
913 enableStrictEffects &&
@@ -989,10 +985,7 @@ function resumeMountClassInstance(
985 // If an update was already in progress, we should schedule an Update
986 // effect even though we're bailing out, so that cWU/cDU are called.
987 if (typeof instance.componentDidMount === 'function') {
992 - let fiberFlags: Flags = Update;
993 - if (enableSuspenseLayoutEffectSemantics) {
994 - fiberFlags |= LayoutStatic;
995 - }
988 + let fiberFlags: Flags = Update | LayoutStatic;
989 if (
990 __DEV__ &&
991 enableStrictEffects &&
@@ -1043,10 +1036,7 @@ function resumeMountClassInstance(
1036 }
1037 }
1038 if (typeof instance.componentDidMount === 'function') {
1046 - let fiberFlags: Flags = Update;
1047 - if (enableSuspenseLayoutEffectSemantics) {
1048 - fiberFlags |= LayoutStatic;
1049 - }
1039 + let fiberFlags: Flags = Update | LayoutStatic;
1040 if (
1041 __DEV__ &&
1042 enableStrictEffects &&
@@ -1060,10 +1050,7 @@ function resumeMountClassInstance(
1050 // If an update was already in progress, we should schedule an Update
1051 // effect even though we're bailing out, so that cWU/cDU are called.
1052 if (typeof instance.componentDidMount === 'function') {
1063 - let fiberFlags: Flags = Update;
1064 - if (enableSuspenseLayoutEffectSemantics) {
1065 - fiberFlags |= LayoutStatic;
1066 - }
1053 + let fiberFlags: Flags = Update | LayoutStatic;
1054 if (
1055 __DEV__ &&
1056 enableStrictEffects &&
packages/react-reconciler/src/ReactFiberClassComponent.old.js
+4 -17
@@ -27,7 +27,6 @@ import {
27 warnAboutDeprecatedLifecycles,
28 enableStrictEffects,
29 enableLazyContextPropagation,
30 - enableSuspenseLayoutEffectSemantics,
30 } from 'shared/ReactFeatureFlags';
31 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
32 import {isMounted} from './ReactFiberTreeReflection';
@@ -908,10 +907,7 @@ function mountClassInstance(
907 }
908
909 if (typeof instance.componentDidMount === 'function') {
911 - let fiberFlags: Flags = Update;
912 - if (enableSuspenseLayoutEffectSemantics) {
913 - fiberFlags |= LayoutStatic;
914 - }
910 + let fiberFlags: Flags = Update | LayoutStatic;
911 if (
912 __DEV__ &&
913 enableStrictEffects &&
@@ -989,10 +985,7 @@ function resumeMountClassInstance(
985 // If an update was already in progress, we should schedule an Update
986 // effect even though we're bailing out, so that cWU/cDU are called.
987 if (typeof instance.componentDidMount === 'function') {
992 - let fiberFlags: Flags = Update;
993 - if (enableSuspenseLayoutEffectSemantics) {
994 - fiberFlags |= LayoutStatic;
995 - }
988 + let fiberFlags: Flags = Update | LayoutStatic;
989 if (
990 __DEV__ &&
991 enableStrictEffects &&
@@ -1043,10 +1036,7 @@ function resumeMountClassInstance(
1036 }
1037 }
1038 if (typeof instance.componentDidMount === 'function') {
1046 - let fiberFlags: Flags = Update;
1047 - if (enableSuspenseLayoutEffectSemantics) {
1048 - fiberFlags |= LayoutStatic;
1049 - }
1039 + let fiberFlags: Flags = Update | LayoutStatic;
1040 if (
1041 __DEV__ &&
1042 enableStrictEffects &&
@@ -1060,10 +1050,7 @@ function resumeMountClassInstance(
1050 // If an update was already in progress, we should schedule an Update
1051 // effect even though we're bailing out, so that cWU/cDU are called.
1052 if (typeof instance.componentDidMount === 'function') {
1063 - let fiberFlags: Flags = Update;
1064 - if (enableSuspenseLayoutEffectSemantics) {
1065 - fiberFlags |= LayoutStatic;
1066 - }
1053 + let fiberFlags: Flags = Update | LayoutStatic;
1054 if (
1055 __DEV__ &&
1056 enableStrictEffects &&
packages/react-reconciler/src/ReactFiberCommitWork.new.js
+18 -37
@@ -41,7 +41,6 @@ import {
41 enableScopeAPI,
42 enableStrictEffects,
43 deletedTreeCleanUpLevel,
44 - enableSuspenseLayoutEffectSemantics,
44 enableUpdaterTracking,
45 enableCache,
46 enableTransitionTracing,
@@ -173,7 +172,6 @@ if (__DEV__) {
172
173 // Used during the commit phase to track the state of the Offscreen component stack.
174 // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
176 -// Only used when enableSuspenseLayoutEffectSemantics is enabled.
175 let offscreenSubtreeIsHidden: boolean = false;
176 let offscreenSubtreeWasHidden: boolean = false;
177
@@ -710,10 +708,7 @@ function commitLayoutEffectOnFiber(
708 case FunctionComponent:
709 case ForwardRef:
710 case SimpleMemoComponent: {
713 - if (
714 - !enableSuspenseLayoutEffectSemantics ||
715 - !offscreenSubtreeWasHidden
716 - ) {
711 + if (!offscreenSubtreeWasHidden) {
712 // At this point layout effects have already been destroyed (during mutation phase).
713 // This is done to prevent sibling component effects from interfering with each other,
714 // e.g. a destroy function in one component should never override a ref set
@@ -1018,7 +1013,7 @@ function commitLayoutEffectOnFiber(
1013 }
1014 }
1015
1021 - if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) {
1016 + if (!offscreenSubtreeWasHidden) {
1017 if (enableScopeAPI) {
1018 // TODO: This is a temporary solution that allowed us to transition away
1019 // from React Flare on www.
@@ -1889,11 +1884,7 @@ function commitDeletionEffectsOnFiber(
1884 return;
1885 }
1886 case OffscreenComponent: {
1892 - if (
1893 - // TODO: Remove this dead flag
1894 - enableSuspenseLayoutEffectSemantics &&
1895 - deletedFiber.mode & ConcurrentMode
1896 - ) {
1887 + if (deletedFiber.mode & ConcurrentMode) {
1888 // If this offscreen component is hidden, we already unmounted it. Before
1889 // deleting the children, track that it's already unmounted so that we
1890 // don't attempt to unmount the effects again.
@@ -2341,11 +2332,7 @@ function commitMutationEffectsOnFiber(
2332 case OffscreenComponent: {
2333 const wasHidden = current !== null && current.memoizedState !== null;
2334
2344 - if (
2345 - // TODO: Remove this dead flag
2346 - enableSuspenseLayoutEffectSemantics &&
2347 - finishedWork.mode & ConcurrentMode
2348 - ) {
2335 + if (finishedWork.mode & ConcurrentMode) {
2336 // Before committing the children, track on the stack whether this
2337 // offscreen subtree was already hidden, so that we don't unmount the
2338 // effects again.
@@ -2369,23 +2356,21 @@ function commitMutationEffectsOnFiber(
2356 // read it during an event
2357 offscreenInstance.isHidden = isHidden;
2358
2372 - if (enableSuspenseLayoutEffectSemantics) {
2373 - if (isHidden) {
2374 - if (!wasHidden) {
2375 - if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
2376 - nextEffect = offscreenBoundary;
2377 - let offscreenChild = offscreenBoundary.child;
2378 - while (offscreenChild !== null) {
2379 - nextEffect = offscreenChild;
2380 - disappearLayoutEffects_begin(offscreenChild);
2381 - offscreenChild = offscreenChild.sibling;
2382 - }
2359 + if (isHidden) {
2360 + if (!wasHidden) {
2361 + if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
2362 + nextEffect = offscreenBoundary;
2363 + let offscreenChild = offscreenBoundary.child;
2364 + while (offscreenChild !== null) {
2365 + nextEffect = offscreenChild;
2366 + disappearLayoutEffects_begin(offscreenChild);
2367 + offscreenChild = offscreenChild.sibling;
2368 }
2369 }
2385 - } else {
2386 - if (wasHidden) {
2387 - // TODO: Move re-appear call here for symmetry?
2388 - }
2370 + }
2371 + } else {
2372 + if (wasHidden) {
2373 + // TODO: Move re-appear call here for symmetry?
2374 }
2375 }
2376
@@ -2483,11 +2468,7 @@ function commitLayoutEffects_begin(
2468 const fiber = nextEffect;
2469 const firstChild = fiber.child;
2470
2486 - if (
2487 - enableSuspenseLayoutEffectSemantics &&
2488 - fiber.tag === OffscreenComponent &&
2489 - isModernRoot
2490 - ) {
2471 + if (fiber.tag === OffscreenComponent && isModernRoot) {
2472 // Keep track of the current Offscreen stack's state.
2473 const isHidden = fiber.memoizedState !== null;
2474 const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
packages/react-reconciler/src/ReactFiberCommitWork.old.js
+18 -37
@@ -41,7 +41,6 @@ import {
41 enableScopeAPI,
42 enableStrictEffects,
43 deletedTreeCleanUpLevel,
44 - enableSuspenseLayoutEffectSemantics,
44 enableUpdaterTracking,
45 enableCache,
46 enableTransitionTracing,
@@ -173,7 +172,6 @@ if (__DEV__) {
172
173 // Used during the commit phase to track the state of the Offscreen component stack.
174 // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
176 -// Only used when enableSuspenseLayoutEffectSemantics is enabled.
175 let offscreenSubtreeIsHidden: boolean = false;
176 let offscreenSubtreeWasHidden: boolean = false;
177
@@ -710,10 +708,7 @@ function commitLayoutEffectOnFiber(
708 case FunctionComponent:
709 case ForwardRef:
710 case SimpleMemoComponent: {
713 - if (
714 - !enableSuspenseLayoutEffectSemantics ||
715 - !offscreenSubtreeWasHidden
716 - ) {
711 + if (!offscreenSubtreeWasHidden) {
712 // At this point layout effects have already been destroyed (during mutation phase).
713 // This is done to prevent sibling component effects from interfering with each other,
714 // e.g. a destroy function in one component should never override a ref set
@@ -1018,7 +1013,7 @@ function commitLayoutEffectOnFiber(
1013 }
1014 }
1015
1021 - if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) {
1016 + if (!offscreenSubtreeWasHidden) {
1017 if (enableScopeAPI) {
1018 // TODO: This is a temporary solution that allowed us to transition away
1019 // from React Flare on www.
@@ -1889,11 +1884,7 @@ function commitDeletionEffectsOnFiber(
1884 return;
1885 }
1886 case OffscreenComponent: {
1892 - if (
1893 - // TODO: Remove this dead flag
1894 - enableSuspenseLayoutEffectSemantics &&
1895 - deletedFiber.mode & ConcurrentMode
1896 - ) {
1887 + if (deletedFiber.mode & ConcurrentMode) {
1888 // If this offscreen component is hidden, we already unmounted it. Before
1889 // deleting the children, track that it's already unmounted so that we
1890 // don't attempt to unmount the effects again.
@@ -2341,11 +2332,7 @@ function commitMutationEffectsOnFiber(
2332 case OffscreenComponent: {
2333 const wasHidden = current !== null && current.memoizedState !== null;
2334
2344 - if (
2345 - // TODO: Remove this dead flag
2346 - enableSuspenseLayoutEffectSemantics &&
2347 - finishedWork.mode & ConcurrentMode
2348 - ) {
2335 + if (finishedWork.mode & ConcurrentMode) {
2336 // Before committing the children, track on the stack whether this
2337 // offscreen subtree was already hidden, so that we don't unmount the
2338 // effects again.
@@ -2369,23 +2356,21 @@ function commitMutationEffectsOnFiber(
2356 // read it during an event
2357 offscreenInstance.isHidden = isHidden;
2358
2372 - if (enableSuspenseLayoutEffectSemantics) {
2373 - if (isHidden) {
2374 - if (!wasHidden) {
2375 - if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
2376 - nextEffect = offscreenBoundary;
2377 - let offscreenChild = offscreenBoundary.child;
2378 - while (offscreenChild !== null) {
2379 - nextEffect = offscreenChild;
2380 - disappearLayoutEffects_begin(offscreenChild);
2381 - offscreenChild = offscreenChild.sibling;
2382 - }
2359 + if (isHidden) {
2360 + if (!wasHidden) {
2361 + if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
2362 + nextEffect = offscreenBoundary;
2363 + let offscreenChild = offscreenBoundary.child;
2364 + while (offscreenChild !== null) {
2365 + nextEffect = offscreenChild;
2366 + disappearLayoutEffects_begin(offscreenChild);
2367 + offscreenChild = offscreenChild.sibling;
2368 }
2369 }
2385 - } else {
2386 - if (wasHidden) {
2387 - // TODO: Move re-appear call here for symmetry?
2388 - }
2370 + }
2371 + } else {
2372 + if (wasHidden) {
2373 + // TODO: Move re-appear call here for symmetry?
2374 }
2375 }
2376
@@ -2483,11 +2468,7 @@ function commitLayoutEffects_begin(
2468 const fiber = nextEffect;
2469 const firstChild = fiber.child;
2470
2486 - if (
2487 - enableSuspenseLayoutEffectSemantics &&
2488 - fiber.tag === OffscreenComponent &&
2489 - isModernRoot
2490 - ) {
2471 + if (fiber.tag === OffscreenComponent && isModernRoot) {
2472 // Keep track of the current Offscreen stack's state.
2473 const isHidden = fiber.memoizedState !== null;
2474 const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+1 -5
@@ -140,7 +140,6 @@ import {
140 enableScopeAPI,
141 enableProfilerTimer,
142 enableCache,
143 - enableSuspenseLayoutEffectSemantics,
143 enableTransitionTracing,
144 } from 'shared/ReactFeatureFlags';
145 import {
@@ -174,10 +173,7 @@ function markUpdate(workInProgress: Fiber) {
173 }
174
175 function markRef(workInProgress: Fiber) {
177 - workInProgress.flags |= Ref;
178 - if (enableSuspenseLayoutEffectSemantics) {
179 - workInProgress.flags |= RefStatic;
180 - }
176 + workInProgress.flags |= Ref | RefStatic;
177 }
178
179 function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {
packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+1 -5
@@ -140,7 +140,6 @@ import {
140 enableScopeAPI,
141 enableProfilerTimer,
142 enableCache,
143 - enableSuspenseLayoutEffectSemantics,
143 enableTransitionTracing,
144 } from 'shared/ReactFeatureFlags';
145 import {
@@ -174,10 +173,7 @@ function markUpdate(workInProgress: Fiber) {
173 }
174
175 function markRef(workInProgress: Fiber) {
177 - workInProgress.flags |= Ref;
178 - if (enableSuspenseLayoutEffectSemantics) {
179 - workInProgress.flags |= RefStatic;
180 - }
176 + workInProgress.flags |= Ref | RefStatic;
177 }
178
179 function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {
packages/react-reconciler/src/ReactFiberHooks.new.js
+2 -9
@@ -30,7 +30,6 @@ import {
30 enableUseRefAccessWarning,
31 enableStrictEffects,
32 enableLazyContextPropagation,
33 - enableSuspenseLayoutEffectSemantics,
33 enableUseMutableSource,
34 enableTransitionTracing,
35 } from 'shared/ReactFeatureFlags';
@@ -1749,10 +1748,7 @@ function mountLayoutEffect(
1748 create: () => (() => void) | void,
1749 deps: Array<mixed> | void | null,
1750 ): void {
1752 - let fiberFlags: Flags = UpdateEffect;
1753 - if (enableSuspenseLayoutEffectSemantics) {
1754 - fiberFlags |= LayoutStaticEffect;
1755 - }
1751 + let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1752 if (
1753 __DEV__ &&
1754 enableStrictEffects &&
@@ -1819,10 +1815,7 @@ function mountImperativeHandle<T>(
1815 const effectDeps =
1816 deps !== null && deps !== undefined ? deps.concat([ref]) : null;
1817
1822 - let fiberFlags: Flags = UpdateEffect;
1823 - if (enableSuspenseLayoutEffectSemantics) {
1824 - fiberFlags |= LayoutStaticEffect;
1825 - }
1818 + let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1819 if (
1820 __DEV__ &&
1821 enableStrictEffects &&
packages/react-reconciler/src/ReactFiberHooks.old.js
+2 -9
@@ -30,7 +30,6 @@ import {
30 enableUseRefAccessWarning,
31 enableStrictEffects,
32 enableLazyContextPropagation,
33 - enableSuspenseLayoutEffectSemantics,
33 enableUseMutableSource,
34 enableTransitionTracing,
35 } from 'shared/ReactFeatureFlags';
@@ -1754,10 +1753,7 @@ function mountLayoutEffect(
1753 create: () => (() => void) | void,
1754 deps: Array<mixed> | void | null,
1755 ): void {
1757 - let fiberFlags: Flags = UpdateEffect;
1758 - if (enableSuspenseLayoutEffectSemantics) {
1759 - fiberFlags |= LayoutStaticEffect;
1760 - }
1756 + let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1757 if (
1758 __DEV__ &&
1759 enableStrictEffects &&
@@ -1824,10 +1820,7 @@ function mountImperativeHandle<T>(
1820 const effectDeps =
1821 deps !== null && deps !== undefined ? deps.concat([ref]) : null;
1822
1827 - let fiberFlags: Flags = UpdateEffect;
1828 - if (enableSuspenseLayoutEffectSemantics) {
1829 - fiberFlags |= LayoutStaticEffect;
1830 - }
1823 + let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
1824 if (
1825 __DEV__ &&
1826 enableStrictEffects &&
packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+7 -22
@@ -1350,11 +1350,7 @@ describe('ReactLazy', () => {
1350 expect(Scheduler).toFlushAndYield(['Init B2', 'Loading...']);
1351 jest.runAllTimers();
1352
1353 - gate(flags => {
1354 - if (flags.enableSuspenseLayoutEffectSemantics) {
1355 - expect(Scheduler).toHaveYielded(['Did unmount: A', 'Did unmount: B']);
1356 - }
1357 - });
1353 + expect(Scheduler).toHaveYielded(['Did unmount: A', 'Did unmount: B']);
1354
1355 // The suspense boundary should've triggered now.
1356 expect(root).toMatchRenderedOutput('Loading...');
@@ -1364,23 +1360,12 @@ describe('ReactLazy', () => {
1360 expect(Scheduler).toFlushAndYield(['Init A2']);
1361 await LazyChildA2;
1362
1367 - gate(flags => {
1368 - if (flags.enableSuspenseLayoutEffectSemantics) {
1369 - expect(Scheduler).toFlushAndYield([
1370 - 'b',
1371 - 'a',
1372 - 'Did mount: b',
1373 - 'Did mount: a',
1374 - ]);
1375 - } else {
1376 - expect(Scheduler).toFlushAndYield([
1377 - 'b',
1378 - 'a',
1379 - 'Did update: b',
1380 - 'Did update: a',
1381 - ]);
1382 - }
1383 - });
1363 + expect(Scheduler).toFlushAndYield([
1364 + 'b',
1365 + 'a',
1366 + 'Did mount: b',
1367 + 'Did mount: a',
1368 + ]);
1369 expect(root).toMatchRenderedOutput('ba');
1370 });
1371
packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
-4
@@ -179,7 +179,6 @@ describe('ReactOffscreen', () => {
179 });
180
181 // @gate experimental || www
182 - // @gate enableSuspenseLayoutEffectSemantics
182 it('mounts without layout effects when hidden', async () => {
183 function Child({text}) {
184 useLayoutEffect(() => {
@@ -218,7 +217,6 @@ describe('ReactOffscreen', () => {
217 });
218
219 // @gate experimental || www
221 - // @gate enableSuspenseLayoutEffectSemantics
220 it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => {
221 function Child({text}) {
222 useLayoutEffect(() => {
@@ -265,7 +263,6 @@ describe('ReactOffscreen', () => {
263 });
264
265 // @gate experimental || www
268 - // @gate enableSuspenseLayoutEffectSemantics
266 it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => {
267 function Child({text}) {
268 useLayoutEffect(() => {
@@ -313,7 +310,6 @@ describe('ReactOffscreen', () => {
310 });
311
312 // @gate experimental || www
316 - // @gate enableSuspenseLayoutEffectSemantics
313 it('hides children of offscreen after layout effects are destroyed', async () => {
314 const root = ReactNoop.createRoot();
315 function Child({text}) {
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
-1
@@ -727,7 +727,6 @@ describe('ReactSuspense', () => {
727 expect(root).toMatchRenderedOutput('new value');
728 });
729
730 - // @gate enableSuspenseLayoutEffectSemantics
730 it('re-fires layout effects when re-showing Suspense', () => {
731 function TextWithLayout(props) {
732 Scheduler.unstable_yieldValue(props.text);
packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
-20
@@ -565,7 +565,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
565 ]);
566 });
567
568 - // @gate enableSuspenseLayoutEffectSemantics
568 // @gate enableCache
569 it('should be destroyed and recreated for function components', async () => {
570 function App({children = null}) {
@@ -694,7 +693,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
693 ]);
694 });
695
697 - // @gate enableSuspenseLayoutEffectSemantics
696 // @gate enableCache
697 it('should be destroyed and recreated for class components', async () => {
698 class ClassText extends React.Component {
@@ -839,7 +837,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
837 ]);
838 });
839
842 - // @gate enableSuspenseLayoutEffectSemantics
840 // @gate enableCache
841 it('should be destroyed and recreated when nested below host components', async () => {
842 function App({children = null}) {
@@ -949,7 +946,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
946 ]);
947 });
948
952 - // @gate enableSuspenseLayoutEffectSemantics
949 // @gate enableCache
950 it('should be destroyed and recreated even if there is a bailout because of memoization', async () => {
951 const MemoizedText = React.memo(Text, () => true);
@@ -1065,7 +1061,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
1061 ]);
1062 });
1063
1068 - // @gate enableSuspenseLayoutEffectSemantics
1064 // @gate enableCache
1065 it('should respect nested suspense boundaries', async () => {
1066 function App({innerChildren = null, outerChildren = null}) {
@@ -1288,7 +1283,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
1283 ]);
1284 });
1285
1291 - // @gate enableSuspenseLayoutEffectSemantics
1286 // @gate enableCache
1287 it('should show nested host nodes if multiple boundaries resolve at the same time', async () => {
1288 function App({innerChildren = null, outerChildren = null}) {
@@ -1398,7 +1392,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
1392 ]);
1393 });
1394
1401 - // @gate enableSuspenseLayoutEffectSemantics
1395 // @gate enableCache
1396 it('should be cleaned up inside of a fallback that suspends', async () => {
1397 function App({fallbackChildren = null, outerChildren = null}) {
@@ -1541,7 +1534,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
1534 ]);
1535 });
1536
1544 - // @gate enableSuspenseLayoutEffectSemantics
1537 // @gate enableCache
1538 it('should be cleaned up inside of a fallback that suspends (alternate)', async () => {
1539 function App({fallbackChildren = null, outerChildren = null}) {
@@ -1661,7 +1653,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
1653 ]);
1654 });
1655
1664 - // @gate enableSuspenseLayoutEffectSemantics
1656 // @gate enableCache
1657 it('should be cleaned up deeper inside of a subtree that suspends', async () => {
1658 function ConditionalSuspense({shouldSuspend}) {
@@ -1744,7 +1735,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
1735 });
1736
1737 describe('that throw errors', () => {
1747 - // @gate enableSuspenseLayoutEffectSemantics
1738 // @gate enableCache
1739 it('are properly handled for componentDidMount', async () => {
1740 let componentDidMountShouldThrow = false;
@@ -1883,7 +1873,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
1873 expect(ReactNoop.getChildren()).toEqual([span('Error')]);
1874 });
1875
1886 - // @gate enableSuspenseLayoutEffectSemantics
1876 // @gate enableCache
1877 it('are properly handled for componentWillUnmount', async () => {
1878 class ThrowsInWillUnmount extends React.Component {
@@ -1995,7 +1984,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
1984 expect(ReactNoop.getChildren()).toEqual([span('Error')]);
1985 });
1986
1998 - // @gate enableSuspenseLayoutEffectSemantics
1987 // @gate enableCache
1988 // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
1989 it('are properly handled for layout effect creation', async () => {
@@ -2135,7 +2123,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
2123 expect(ReactNoop.getChildren()).toEqual([span('Error')]);
2124 });
2125
2138 - // @gate enableSuspenseLayoutEffectSemantics
2126 // @gate enableCache
2127 // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
2128 it('are properly handled for layout effect destruction', async () => {
@@ -2247,7 +2234,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
2234 });
2235 });
2236
2250 - // @gate enableSuspenseLayoutEffectSemantics
2237 // @gate enableCache
2238 it('should be only destroy layout effects once if a tree suspends in multiple places', async () => {
2239 class ClassText extends React.Component {
@@ -2386,7 +2372,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
2372 ]);
2373 });
2374
2389 - // @gate enableSuspenseLayoutEffectSemantics
2375 // @gate enableCache
2376 it('should be only destroy layout effects once if a component suspends multiple times', async () => {
2377 class ClassText extends React.Component {
@@ -2670,7 +2655,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
2655 expect(ReactNoop.getChildren()).toEqual([]);
2656 });
2657
2673 - // @gate enableSuspenseLayoutEffectSemantics
2658 // @gate enableCache
2659 it('should be cleared and reset for host components', async () => {
2660 function App({children}) {
@@ -2767,7 +2751,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
2751 expect(ReactNoop.getChildren()).toEqual([]);
2752 });
2753
2770 - // @gate enableSuspenseLayoutEffectSemantics
2754 // @gate enableCache
2755 it('should be cleared and reset for class components', async () => {
2756 class ClassComponent extends React.Component {
@@ -2868,7 +2851,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
2851 expect(ReactNoop.getChildren()).toEqual([]);
2852 });
2853
2871 - // @gate enableSuspenseLayoutEffectSemantics
2854 // @gate enableCache
2855 it('should be cleared and reset for function components with useImperativeHandle', async () => {
2856 const FunctionComponent = React.forwardRef((props, ref) => {
@@ -2973,7 +2955,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
2955 expect(ReactNoop.getChildren()).toEqual([]);
2956 });
2957
2976 - // @gate enableSuspenseLayoutEffectSemantics
2958 // @gate enableCache
2959 it('should not reset for user-managed values', async () => {
2960 function RefChecker({forwardedRef}) {
@@ -3071,7 +3052,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
3052 });
3053
3054 describe('that throw errors', () => {
3074 - // @gate enableSuspenseLayoutEffectSemantics
3055 // @gate enableCache
3056 // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
3057 it('are properly handled in ref callbacks', async () => {
packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
-12
@@ -176,18 +176,6 @@ describe('ReactSuspenseFuzz', () => {
176 const legacyOutput = ReactNoop.getChildrenAsJSX();
177 expect(legacyOutput).toEqual(expectedOutput);
178 ReactNoop.renderLegacySyncRoot(null);
179 -
180 - // Observable behavior differs here in a way that's expected:
181 - // If enableSuspenseLayoutEffectSemantics is enabled, layout effects are destroyed on re-suspend
182 - // before larger 'beginAfter' timers have a chance to fire.
183 - if (!flags.enableSuspenseLayoutEffectSemantics) {
184 - resetCache();
185 - const concurrentRoot = ReactNoop.createRoot();
186 - concurrentRoot.render(children);
187 - resolveAllTasks();
188 - const concurrentOutput = concurrentRoot.getChildrenAsJSX();
189 - expect(concurrentOutput).toEqual(expectedOutput);
190 - }
179 });
180 }
181
packages/shared/ReactFeatureFlags.js
-8
@@ -31,14 +31,6 @@ export const enableSymbolFallbackForWWW = false;
31 // internal tests need to be updated. The open source behavior is correct.
32 export const skipUnmountedBoundaries = true;
33
34 -// Destroy layout effects for components that are hidden because something
35 -// suspended in an update and recreate them when they are shown again (after the
36 -// suspended boundary has resolved). Note that this should be an uncommon use
37 -// case and can be avoided by using the transition API.
38 -//
39 -// TODO: Finish rolling out in www
40 -export const enableSuspenseLayoutEffectSemantics = true;
41 -
34 // TODO: Finish rolling out in www
35 export const enableClientRenderFallbackOnTextMismatch = true;
36
packages/shared/forks/ReactFeatureFlags.native-fb.js
-1
@@ -58,7 +58,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
58 export const disableNativeComponentFrames = false;
59 export const skipUnmountedBoundaries = false;
60 export const deletedTreeCleanUpLevel = 3;
61 -export const enableSuspenseLayoutEffectSemantics = false;
61 export const enableGetInspectorDataForInstanceInProduction = true;
62 export const enableNewReconciler = false;
63 export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.native-oss.js
-1
@@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
48 export const disableNativeComponentFrames = false;
49 export const skipUnmountedBoundaries = false;
50 export const deletedTreeCleanUpLevel = 3;
51 -export const enableSuspenseLayoutEffectSemantics = false;
51 export const enableGetInspectorDataForInstanceInProduction = false;
52 export const enableNewReconciler = false;
53 export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
-1
@@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
48 export const disableNativeComponentFrames = false;
49 export const skipUnmountedBoundaries = false;
50 export const deletedTreeCleanUpLevel = 3;
51 -export const enableSuspenseLayoutEffectSemantics = false;
51 export const enableGetInspectorDataForInstanceInProduction = false;
52 export const enableNewReconciler = false;
53 export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
-1
@@ -43,7 +43,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
43 export const disableNativeComponentFrames = false;
44 export const skipUnmountedBoundaries = false;
45 export const deletedTreeCleanUpLevel = 3;
46 -export const enableSuspenseLayoutEffectSemantics = false;
46 export const enableGetInspectorDataForInstanceInProduction = false;
47 export const enableNewReconciler = false;
48 export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
-1
@@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
48 export const disableNativeComponentFrames = false;
49 export const skipUnmountedBoundaries = false;
50 export const deletedTreeCleanUpLevel = 3;
51 -export const enableSuspenseLayoutEffectSemantics = false;
51 export const enableGetInspectorDataForInstanceInProduction = false;
52 export const enableNewReconciler = false;
53 export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.testing.js
-1
@@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
48 export const disableNativeComponentFrames = false;
49 export const skipUnmountedBoundaries = false;
50 export const deletedTreeCleanUpLevel = 3;
51 -export const enableSuspenseLayoutEffectSemantics = false;
51 export const enableGetInspectorDataForInstanceInProduction = false;
52 export const enableNewReconciler = false;
53 export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.testing.www.js
-1
@@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
48 export const disableNativeComponentFrames = false;
49 export const skipUnmountedBoundaries = true;
50 export const deletedTreeCleanUpLevel = 3;
51 -export const enableSuspenseLayoutEffectSemantics = false;
51 export const enableGetInspectorDataForInstanceInProduction = false;
52 export const enableNewReconciler = false;
53 export const deferRenderPhaseUpdateToNextBatch = false;
packages/shared/forks/ReactFeatureFlags.www.js
-1
@@ -48,7 +48,6 @@ export const enableProfilerNestedUpdateScheduledHook =
48 __PROFILE__ && dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook;
49 export const enableUpdaterTracking = __PROFILE__;
50
51 -export const enableSuspenseLayoutEffectSemantics = true;
51 export const enableSuspenseAvoidThisFallback = true;
52 export const enableSuspenseAvoidThisFallbackFizz = false;
53 export const enableCPUSuspense = true;