From 6edd55a3ffda9267cdbf3237ba0e44b5d62b6552 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Tue, 8 Mar 2022 01:33:52 -0500 Subject: [PATCH] Gate unstable_expectedLoadTime on enableCPUSuspense (#24038) --- .../react-reconciler/src/ReactFiberBeginWork.new.js | 10 ++++++++-- .../react-reconciler/src/ReactFiberBeginWork.old.js | 10 ++++++++-- .../src/__tests__/DebugTracing-test.internal.js | 4 ++-- .../src/__tests__/ReactCPUSuspense-test.js | 4 ++++ packages/shared/ReactFeatureFlags.js | 2 ++ packages/shared/forks/ReactFeatureFlags.native-fb.js | 1 + packages/shared/forks/ReactFeatureFlags.native-oss.js | 1 + .../shared/forks/ReactFeatureFlags.test-renderer.js | 1 + .../forks/ReactFeatureFlags.test-renderer.native.js | 1 + .../forks/ReactFeatureFlags.test-renderer.www.js | 1 + packages/shared/forks/ReactFeatureFlags.testing.js | 1 + packages/shared/forks/ReactFeatureFlags.testing.www.js | 1 + packages/shared/forks/ReactFeatureFlags.www.js | 1 + 13 files changed, 32 insertions(+), 6 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js index 09a0e16a1e55..181d32febf91 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js +++ b/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. diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index 2db03f39a2cb..57a8f9c48fb1 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/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. diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js index f600ccb9c75e..eccdef295ad8 100644 --- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js +++ b/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(''); @@ -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(''); diff --git a/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js b/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js index 85d3fbbab534..0130fa87d618 100644 --- a/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js +++ b/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 ( diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index d33d2a92d29c..e60f2db9f40b 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/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 diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 1eb2086c896b..01a036bb6036 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/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; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index e9850c400a9a..aa44bfafbf79 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/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; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index cd488a2b7e5d..2a39b7d17e53 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/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; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index 54828d7ebd6a..ceb8fb196e90 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/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; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 6d1dcfa842cc..804242d8094d 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/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; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js index e6c46ee341f0..27a37f53e990 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.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; diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js index 0ae82026016a..6a34c1aa3b3d 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.www.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.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 = true; export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true; export const enableClientRenderFallbackOnHydrationMismatch = true; export const enableComponentStackLocations = true; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index cf61f17054d4..99b68fc7562c 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -51,6 +51,7 @@ export const enableUpdaterTracking = __PROFILE__; export const enableSuspenseLayoutEffectSemantics = true; export const enableSuspenseAvoidThisFallback = true; export const enableSuspenseAvoidThisFallbackFizz = false; +export const enableCPUSuspense = true; // Logs additional User Timing API marks for use with an experimental profiling tool. export const enableSchedulingProfiler =