Gate unstable_expectedLoadTime on enableCPUSuspense (#24038)
Sebastian Markbåge committed
Mar 8, 2022 at 01:33 UTC
6edd55a3ffda9267cdbf3237ba0e44b5d62b6552
13 files changed
+32
-6
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+8
-2
@@ -29,7 +29,10 @@ import type {
29
SpawnedCachePool,
30
} from './ReactFiberCacheComponent.new';
31
import type {UpdateQueue} from './ReactUpdateQueue.new';
32
-import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
32
+import {
33
+ enableSuspenseAvoidThisFallback,
34
+ enableCPUSuspense,
35
+} from 'shared/ReactFeatureFlags';
36
37
import checkPropTypes from 'shared/checkPropTypes';
38
import {
@@ -2091,7 +2094,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
2094
);
2095
workInProgress.memoizedState = SUSPENDED_MARKER;
2096
return fallbackFragment;
2094
- } else if (typeof nextProps.unstable_expectedLoadTime === 'number') {
2097
+ } else if (
2098
+ enableCPUSuspense &&
2099
+ typeof nextProps.unstable_expectedLoadTime === 'number'
2100
+ ) {
2101
// This is a CPU-bound tree. Skip this tree and show a placeholder to
2102
// unblock the surrounding content. Then immediately retry after the
2103
// initial commit.
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+8
-2
@@ -29,7 +29,10 @@ import type {
29
SpawnedCachePool,
30
} from './ReactFiberCacheComponent.old';
31
import type {UpdateQueue} from './ReactUpdateQueue.old';
32
-import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
32
+import {
33
+ enableSuspenseAvoidThisFallback,
34
+ enableCPUSuspense,
35
+} from 'shared/ReactFeatureFlags';
36
37
import checkPropTypes from 'shared/checkPropTypes';
38
import {
@@ -2091,7 +2094,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
2094
);
2095
workInProgress.memoizedState = SUSPENDED_MARKER;
2096
return fallbackFragment;
2094
- } else if (typeof nextProps.unstable_expectedLoadTime === 'number') {
2097
+ } else if (
2098
+ enableCPUSuspense &&
2099
+ typeof nextProps.unstable_expectedLoadTime === 'number'
2100
+ ) {
2101
// This is a CPU-bound tree. Skip this tree and show a placeholder to
2102
// unblock the surrounding content. Then immediately retry after the
2103
// initial commit.
packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+2
-2
@@ -98,7 +98,7 @@ describe('DebugTracing', () => {
98
expect(logs).toEqual(['log: ⚛️ Example resolved']);
99
});
100
101
- // @gate experimental && build === 'development' && enableDebugTracing
101
+ // @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
102
it('should log sync render with CPU suspense', () => {
103
function Example() {
104
console.log('<Example/>');
@@ -178,7 +178,7 @@ describe('DebugTracing', () => {
178
expect(logs).toEqual(['log: ⚛️ Example resolved']);
179
});
180
181
- // @gate experimental && build === 'development' && enableDebugTracing
181
+ // @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
182
it('should log concurrent render with CPU suspense', () => {
183
function Example() {
184
console.log('<Example/>');
packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
+4
@@ -108,6 +108,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
108
}
109
}
110
111
+ // @gate enableCPUSuspense
112
it('skips CPU-bound trees on initial mount', async () => {
113
function App() {
114
return (
@@ -145,6 +146,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
146
);
147
});
148
149
+ // @gate enableCPUSuspense
150
it('does not skip CPU-bound trees during updates', async () => {
151
let setCount;
152
@@ -193,6 +195,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
195
);
196
});
197
198
+ // @gate enableCPUSuspense
199
it('suspend inside CPU-bound tree', async () => {
200
function App() {
201
return (
@@ -242,6 +245,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
245
);
246
});
247
248
+ // @gate enableCPUSuspense
249
it('nested CPU-bound trees', async () => {
250
function App() {
251
return (
packages/shared/ReactFeatureFlags.js
+2
@@ -106,6 +106,8 @@ export const enableSuspenseAvoidThisFallback = false;
106
// Enables unstable_avoidThisFallback feature in Fizz
107
export const enableSuspenseAvoidThisFallbackFizz = false;
108
109
+export const enableCPUSuspense = __EXPERIMENTAL__;
110
+
111
// When a node is unmounted, recurse into the Fiber subtree and clean out
112
// references. Each level cleans up more fiber fields than the previous level.
113
// As far as we know, React itself doesn't leak, but because the Fiber contains
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
@@ -50,6 +50,7 @@ export const disableModulePatternComponents = false;
50
export const warnAboutSpreadingKeyToJSX = false;
51
export const enableSuspenseAvoidThisFallback = false;
52
export const enableSuspenseAvoidThisFallbackFizz = false;
53
+export const enableCPUSuspense = true;
54
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
55
export const enableClientRenderFallbackOnHydrationMismatch = true;
56
export const enableComponentStackLocations = false;
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
@@ -41,6 +41,7 @@ export const disableModulePatternComponents = false;
41
export const warnAboutSpreadingKeyToJSX = false;
42
export const enableSuspenseAvoidThisFallback = false;
43
export const enableSuspenseAvoidThisFallbackFizz = false;
44
+export const enableCPUSuspense = false;
45
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
46
export const enableClientRenderFallbackOnHydrationMismatch = true;
47
export const enableComponentStackLocations = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
@@ -41,6 +41,7 @@ export const disableModulePatternComponents = false;
41
export const warnAboutSpreadingKeyToJSX = false;
42
export const enableSuspenseAvoidThisFallback = false;
43
export const enableSuspenseAvoidThisFallbackFizz = false;
44
+export const enableCPUSuspense = false;
45
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
46
export const enableClientRenderFallbackOnHydrationMismatch = true;
47
export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+1
@@ -51,6 +51,7 @@ export const enableNewReconciler = false;
51
export const deferRenderPhaseUpdateToNextBatch = false;
52
export const enableSuspenseAvoidThisFallback = false;
53
export const enableSuspenseAvoidThisFallbackFizz = false;
54
+export const enableCPUSuspense = false;
55
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
56
export const enableClientRenderFallbackOnHydrationMismatch = true;
57
export const enableStrictEffects = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
@@ -41,6 +41,7 @@ export const disableModulePatternComponents = true;
41
export const warnAboutSpreadingKeyToJSX = false;
42
export const enableSuspenseAvoidThisFallback = true;
43
export const enableSuspenseAvoidThisFallbackFizz = false;
44
+export const enableCPUSuspense = false;
45
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
46
export const enableClientRenderFallbackOnHydrationMismatch = true;
47
export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.testing.js
+1
@@ -41,6 +41,7 @@ export const disableModulePatternComponents = false;
41
export const warnAboutSpreadingKeyToJSX = false;
42
export const enableSuspenseAvoidThisFallback = false;
43
export const enableSuspenseAvoidThisFallbackFizz = false;
44
+export const enableCPUSuspense = false;
45
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
46
export const enableClientRenderFallbackOnHydrationMismatch = true;
47
export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.testing.www.js
+1
@@ -41,6 +41,7 @@ export const disableModulePatternComponents = true;
41
export const warnAboutSpreadingKeyToJSX = false;
42
export const enableSuspenseAvoidThisFallback = true;
43
export const enableSuspenseAvoidThisFallbackFizz = false;
44
+export const enableCPUSuspense = true;
45
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
46
export const enableClientRenderFallbackOnHydrationMismatch = true;
47
export const enableComponentStackLocations = true;
packages/shared/forks/ReactFeatureFlags.www.js
+1
@@ -51,6 +51,7 @@ export const enableUpdaterTracking = __PROFILE__;
51
export const enableSuspenseLayoutEffectSemantics = true;
52
export const enableSuspenseAvoidThisFallback = true;
53
export const enableSuspenseAvoidThisFallbackFizz = false;
54
+export const enableCPUSuspense = true;
55
56
// Logs additional User Timing API marks for use with an experimental profiling tool.
57
export const enableSchedulingProfiler =