{"body":"When we suspend we always try a lower level but we shouldn't try offscreen.","patch":"diff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\nindex ad6ff4037e..8bf99ce113 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.js\n@@ -25,6 +25,7 @@ import {\n warnAboutUnmockedScheduler,\n flushSuspenseFallbacksInTests,\n disableSchedulerTimeoutBasedOnReactExpirationTime,\n+ enableTrainModelFix,\n } from 'shared\/ReactFeatureFlags';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n import invariant from 'shared\/invariant';\n@@ -539,9 +540,19 @@ function getNextRootExpirationTimeToWorkOn(root: FiberRoot): ExpirationTime {\n \/\/ on whichever is higher priority.\n const lastPingedTime = root.lastPingedTime;\n const nextKnownPendingLevel = root.nextKnownPendingLevel;\n- return lastPingedTime > nextKnownPendingLevel\n- ? lastPingedTime\n- : nextKnownPendingLevel;\n+ const nextLevel =\n+ lastPingedTime > nextKnownPendingLevel\n+ ? lastPingedTime\n+ : nextKnownPendingLevel;\n+ if (\n+ enableTrainModelFix &&\n+ nextLevel <= Idle &&\n+ firstPendingTime !== nextLevel\n+ ) {\n+ \/\/ Don't work on Idle\/Never priority unless everything else is committed.\n+ return NoWork;\n+ }\n+ return nextLevel;\n }\n \n \/\/ Use this function to schedule a task for a root. There's only one task per\n@@ -2362,7 +2373,7 @@ export function pingSuspendedRoot(\n \/\/ Mark the time at which this ping was scheduled.\n root.lastPingedTime = suspendedTime;\n \n- if (root.finishedExpirationTime === suspendedTime) {\n+ if (!enableTrainModelFix && root.finishedExpirationTime === suspendedTime) {\n \/\/ If there's a pending fallback waiting to commit, throw it away.\n root.finishedExpirationTime = NoWork;\n root.finishedWork = null;\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js\nindex 86fb782441..97f247895d 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js\n@@ -2222,7 +2222,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {\n Scheduler.unstable_runWithPriority(Scheduler.unstable_IdlePriority, () =>\n ReactNoop.render(),\n );\n- expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading A...']);\n+ \/\/ We won't even work on Idle priority.\n+ expect(Scheduler).toFlushAndYield([]);\n \n \/\/ We're still suspended.\n expect(ReactNoop.getChildren()).toEqual([]);\n@@ -2789,4 +2790,116 @@ describe('ReactSuspenseWithNoopRenderer', () => {\n \n expect(root).toMatchRenderedOutput();\n });\n+\n+ it('should not render hidden content while suspended on higher pri', async () => {\n+ function Offscreen() {\n+ Scheduler.unstable_yieldValue('Offscreen');\n+ return 'Offscreen';\n+ }\n+ function App({showContent}) {\n+ React.useLayoutEffect(() => {\n+ Scheduler.unstable_yieldValue('Commit');\n+ });\n+ return (\n+ <>\n+

\n+ \n+ <\/div>\n+ }>\n+ {showContent ? : null}\n+ <\/Suspense>\n+ <\/>\n+ );\n+ }\n+\n+ \/\/ Initial render.\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushAndYieldThrough(['Commit']);\n+ expect(ReactNoop).toMatchRenderedOutput(

);\n+\n+ \/\/ Start transition.\n+ React.unstable_withSuspenseConfig(\n+ () => {\n+ ReactNoop.render();\n+ },\n+ {timeoutMs: 2000},\n+ );\n+\n+ expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);\n+ Scheduler.unstable_advanceTime(2000);\n+ await advanceTimers(2000);\n+ expect(Scheduler).toHaveYielded(['Promise resolved [A]']);\n+ expect(Scheduler).toFlushAndYieldThrough(['A', 'Commit']);\n+ expect(ReactNoop).toMatchRenderedOutput(\n+ <>\n+

\n+ \n+ <\/>,\n+ );\n+ expect(Scheduler).toFlushAndYield(['Offscreen']);\n+ expect(ReactNoop).toMatchRenderedOutput(\n+ <>\n+

Offscreen<\/div>\n+ \n+ <\/>,\n+ );\n+ });\n+\n+ it('should be able to unblock higher pri content before suspended hidden', async () => {\n+ function Offscreen() {\n+ Scheduler.unstable_yieldValue('Offscreen');\n+ return 'Offscreen';\n+ }\n+ function App({showContent}) {\n+ React.useLayoutEffect(() => {\n+ Scheduler.unstable_yieldValue('Commit');\n+ });\n+ return (\n+ }>\n+

\n+ \n+ \n+ <\/div>\n+ {showContent ? : null}\n+ <\/Suspense>\n+ );\n+ }\n+\n+ \/\/ Initial render.\n+ ReactNoop.render();\n+ expect(Scheduler).toFlushAndYieldThrough(['Commit']);\n+ expect(ReactNoop).toMatchRenderedOutput(

);\n+\n+ \/\/ Partially render through the hidden content.\n+ expect(Scheduler).toFlushAndYieldThrough(['Suspend! [A]']);\n+\n+ \/\/ Start transition.\n+ React.unstable_withSuspenseConfig(\n+ () => {\n+ ReactNoop.render();\n+ },\n+ {timeoutMs: 5000},\n+ );\n+\n+ expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);\n+ Scheduler.unstable_advanceTime(2000);\n+ await advanceTimers(2000);\n+ expect(Scheduler).toHaveYielded(['Promise resolved [A]']);\n+ expect(Scheduler).toFlushAndYieldThrough(['A', 'Commit']);\n+ expect(ReactNoop).toMatchRenderedOutput(\n+ <>\n+

\n+ \n+ <\/>,\n+ );\n+ expect(Scheduler).toFlushAndYield(['A', 'Offscreen']);\n+ expect(ReactNoop).toMatchRenderedOutput(\n+ <>\n+

\n+ Offscreen\n+ <\/div>\n+ \n+ <\/>,\n+ );\n+ });\n });\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex fc30d6f9a3..67f1f93669 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -88,6 +88,8 @@ export const disableLegacyContext = false;\n \n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n \n+export const enableTrainModelFix = __EXPERIMENTAL__;\n+\n export const enableTrustedTypesIntegration = false;\n \n \/\/ Flag to turn event.target and event.currentTarget in ReactNative from a reactTag to a component instance\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex 4eb32dbaaf..05defbb34f 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -42,6 +42,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;\n export const warnAboutStringRefs = false;\n export const disableLegacyContext = false;\n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n+export const enableTrainModelFix = false;\n export const enableTrustedTypesIntegration = false;\n \n \/\/ Only used in www builds.\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex 1006296f65..324f9f2b12 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -36,6 +36,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;\n export const warnAboutStringRefs = false;\n export const disableLegacyContext = false;\n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n+export const enableTrainModelFix = false;\n export const enableTrustedTypesIntegration = false;\n export const enableNativeTargetAsInstance = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js b\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js\nindex ab0a07ee9d..73efda9e02 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.persistent.js\n@@ -36,6 +36,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;\n export const warnAboutStringRefs = false;\n export const disableLegacyContext = false;\n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n+export const enableTrainModelFix = false;\n export const enableTrustedTypesIntegration = false;\n export const enableNativeTargetAsInstance = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex 1d5049ffff..2fa3be510c 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -36,6 +36,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;\n export const warnAboutStringRefs = false;\n export const disableLegacyContext = false;\n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n+export const enableTrainModelFix = false;\n export const enableTrustedTypesIntegration = false;\n export const enableNativeTargetAsInstance = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex 20d16e23ab..3223402271 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -34,6 +34,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;\n export const warnAboutStringRefs = false;\n export const disableLegacyContext = false;\n export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;\n+export const enableTrainModelFix = false;\n export const enableTrustedTypesIntegration = false;\n export const enableNativeTargetAsInstance = false;\n \ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex ba025eefd3..72e4ae4547 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -16,6 +16,7 @@ export const {\n disableInputAttributeSyncing,\n enableTrustedTypesIntegration,\n enableSelectiveHydration,\n+ enableTrainModelFix,\n } = require('ReactFeatureFlags');\n \n \/\/ In www, we have experimental support for gathering data\n","commit":{"authorName":"Sebastian Markbåge","authoredAt":"2019-12-03T13:38:02-08:00","authorEmail":"sema@fb.com","revision":"dc18b8b8d24d188517caeff624e999f197f3b9b6","subject":"Don't group Idle\/Offscreen work with other work (#17456)","shortRevision":"dc18b8b8d2"},"parents":["f523b2e0d369e3f42938b56784f9ce1990838753"],"files":[{"path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js","status":"M"},{"path":"packages\/shared\/ReactFeatureFlags.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.native-fb.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.native-oss.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.persistent.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.www.js","status":"M"}]}

dillon1000/react

Files changed