Gate unstable_expectedLoadTime on enableCPUSuspense (#24038)

Author: sebmarkbage

packages/react-reconciler/src/ReactFiberBeginWork.new.js

@@ -29,7 +29,10 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
-import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
+import {
+  enableSuspenseAvoidThisFallback,
+  enableCPUSuspense,
+} from 'shared/ReactFeatureFlags';
 
 import checkPropTypes from 'shared/checkPropTypes';
 import {
@@ -2091,7 +2094,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       );
       workInProgress.memoizedState = SUSPENDED_MARKER;
       return fallbackFragment;
-    } else if (typeof nextProps.unstable_expectedLoadTime === 'number') {
+    } else if (
+      enableCPUSuspense &&
+      typeof nextProps.unstable_expectedLoadTime === 'number'
+    ) {
       // This is a CPU-bound tree. Skip this tree and show a placeholder to
       // unblock the surrounding content. Then immediately retry after the
       // initial commit.

packages/react-reconciler/src/ReactFiberBeginWork.old.js

@@ -29,7 +29,10 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
-import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
+import {
+  enableSuspenseAvoidThisFallback,
+  enableCPUSuspense,
+} from 'shared/ReactFeatureFlags';
 
 import checkPropTypes from 'shared/checkPropTypes';
 import {
@@ -2091,7 +2094,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       );
       workInProgress.memoizedState = SUSPENDED_MARKER;
       return fallbackFragment;
-    } else if (typeof nextProps.unstable_expectedLoadTime === 'number') {
+    } else if (
+      enableCPUSuspense &&
+      typeof nextProps.unstable_expectedLoadTime === 'number'
+    ) {
       // This is a CPU-bound tree. Skip this tree and show a placeholder to
       // unblock the surrounding content. Then immediately retry after the
       // initial commit.

packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js

@@ -98,7 +98,7 @@ describe('DebugTracing', () => {
     expect(logs).toEqual(['log: ⚛️ Example resolved']);
   });
 
-  // @gate experimental && build === 'development' && enableDebugTracing
+  // @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
   it('should log sync render with CPU suspense', () => {
     function Example() {
       console.log('<Example/>');
@@ -178,7 +178,7 @@ describe('DebugTracing', () => {
     expect(logs).toEqual(['log: ⚛️ Example resolved']);
   });
 
-  // @gate experimental && build === 'development' && enableDebugTracing
+  // @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
   it('should log concurrent render with CPU suspense', () => {
     function Example() {
       console.log('<Example/>');

packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js

@@ -108,6 +108,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
   }
 
+  // @gate enableCPUSuspense
   it('skips CPU-bound trees on initial mount', async () => {
     function App() {
       return (
@@ -145,6 +146,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
+  // @gate enableCPUSuspense
   it('does not skip CPU-bound trees during updates', async () => {
     let setCount;
 
@@ -193,6 +195,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
+  // @gate enableCPUSuspense
   it('suspend inside CPU-bound tree', async () => {
     function App() {
       return (
@@ -242,6 +245,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
+  // @gate enableCPUSuspense
   it('nested CPU-bound trees', async () => {
     function App() {
       return (

packages/shared/ReactFeatureFlags.js

@@ -106,6 +106,8 @@ export const enableSuspenseAvoidThisFallback = false;
 // Enables unstable_avoidThisFallback feature in Fizz
 export const enableSuspenseAvoidThisFallbackFizz = false;
 
+export const enableCPUSuspense = __EXPERIMENTAL__;
+
 // When a node is unmounted, recurse into the Fiber subtree and clean out
 // references. Each level cleans up more fiber fields than the previous level.
 // As far as we know, React itself doesn't leak, but because the Fiber contains

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -50,6 +50,7 @@ export const disableModulePatternComponents = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -41,6 +41,7 @@ export const disableModulePatternComponents = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -41,6 +41,7 @@ export const disableModulePatternComponents = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;

packages/shared/forks/ReactFeatureFlags.test-renderer.native.js

@@ -51,6 +51,7 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableStrictEffects = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -41,6 +41,7 @@ export const disableModulePatternComponents = true;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;