{"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex dfe861142a..edf5814023 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -1484,6 +1484,154 @@ describe('ReactDOMFizzServer', () => {\n expect(getVisibleChildren(container)).toEqual(

Hello<\/div>);\n });\n \n+ \/\/ @gate experimental && enableSuspenseAvoidThisFallback\n+ it('should respect unstable_avoidThisFallback', async () => {\n+ const resolved = {\n+ 0: false,\n+ 1: false,\n+ };\n+ const promiseRes = {};\n+ const promises = {\n+ 0: new Promise(res => {\n+ promiseRes[0] = () => {\n+ resolved[0] = true;\n+ res();\n+ };\n+ }),\n+ 1: new Promise(res => {\n+ promiseRes[1] = () => {\n+ resolved[1] = true;\n+ res();\n+ };\n+ }),\n+ };\n+\n+ const InnerComponent = ({isClient, depth}) => {\n+ if (isClient) {\n+ \/\/ Resuspend after re-rendering on client to check that fallback shows on client\n+ throw new Promise(() => {});\n+ }\n+ if (!resolved[depth]) {\n+ throw promises[depth];\n+ }\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ };\n+\n+ function App({isClient}) {\n+ return (\n+

\n+ \n+ \n+ \n+ <\/span>\n+ }\n+ unstable_avoidThisFallback={true}>\n+ \n+

\n+ }>\n+ \n+ \n+ <\/span>\n+ }\n+ unstable_avoidThisFallback={true}>\n+ \n+ <\/Suspense>\n+ <\/Suspense>\n+ <\/div>\n+ <\/Suspense>\n+ <\/div>\n+ );\n+ }\n+\n+ await jest.runAllTimers();\n+\n+ await act(async () => {\n+ const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(\n+ ,\n+ writable,\n+ );\n+ startWriting();\n+ });\n+\n+ \/\/ Nothing is output since root has a suspense with avoidedThisFallback that hasn't resolved\n+ expect(getVisibleChildren(container)).toEqual(undefined);\n+ expect(container.innerHTML).not.toContain('Avoided Fallback');\n+\n+ \/\/ resolve first suspense component with avoidThisFallback\n+ await act(async () => {\n+ promiseRes[0]();\n+ });\n+\n+ expect(getVisibleChildren(container)).toEqual(\n+

\n+ Non Suspense Content\n+

resolved 0<\/div>\n+

Fallback<\/div>\n+ <\/div>,\n+ );\n+\n+ expect(container.innerHTML).not.toContain('Avoided Fallback2');\n+\n+ await act(async () => {\n+ promiseRes[1]();\n+ });\n+\n+ expect(getVisibleChildren(container)).toEqual(\n+

\n+ Non Suspense Content\n+

resolved 0<\/div>\n+

\n+

resolved 1<\/div>\n+ <\/div>\n+ <\/div>,\n+ );\n+\n+ let root;\n+ await act(async () => {\n+ root = ReactDOM.hydrateRoot(container, );\n+ Scheduler.unstable_flushAll();\n+ await jest.runAllTimers();\n+ });\n+\n+ \/\/ No change after hydration\n+ expect(getVisibleChildren(container)).toEqual(\n+

\n+ Non Suspense Content\n+

resolved 0<\/div>\n+

\n+

resolved 1<\/div>\n+ <\/div>\n+ <\/div>,\n+ );\n+\n+ await act(async () => {\n+ \/\/ Trigger update by changing isClient to true\n+ root.render();\n+ Scheduler.unstable_flushAll();\n+ await jest.runAllTimers();\n+ });\n+\n+ \/\/ Now that we've resuspended at the root we show the root fallback\n+ expect(getVisibleChildren(container)).toEqual(\n+

\n+ Non Suspense Content\n+

resolved 0<\/div>\n+

\n+

resolved 1<\/div>\n+ <\/div>\n+ Avoided Fallback<\/span>\n+ <\/div>,\n+ );\n+ });\n+\n \/\/ @gate supportsNativeUseSyncExternalStore\n \/\/ @gate experimental\n it('calls getServerSnapshot instead of getSnapshot', async () => {\ndiff --git a\/packages\/react-dom\/src\/server\/ReactDOMServerFormatConfig.js b\/packages\/react-dom\/src\/server\/ReactDOMServerFormatConfig.js\nindex 58ddbeea3f..1b2bbc28f6 100644\n--- a\/packages\/react-dom\/src\/server\/ReactDOMServerFormatConfig.js\n+++ b\/packages\/react-dom\/src\/server\/ReactDOMServerFormatConfig.js\n@@ -1480,10 +1480,21 @@ const startClientRenderedSuspenseBoundary = stringToPrecomputedChunk(\n );\n const endSuspenseBoundary = stringToPrecomputedChunk('');\n \n+export function pushStartCompletedSuspenseBoundary(\n+ target: Array,\n+) {\n+ target.push(startCompletedSuspenseBoundary);\n+}\n+\n+export function pushEndCompletedSuspenseBoundary(\n+ target: Array,\n+) {\n+ target.push(endSuspenseBoundary);\n+}\n+\n export function writeStartCompletedSuspenseBoundary(\n destination: Destination,\n responseState: ResponseState,\n- id: SuspenseBoundaryID,\n ): boolean {\n return writeChunk(destination, startCompletedSuspenseBoundary);\n }\n@@ -1497,7 +1508,6 @@ export function writeStartPendingSuspenseBoundary(\n export function writeStartClientRenderedSuspenseBoundary(\n destination: Destination,\n responseState: ResponseState,\n- id: SuspenseBoundaryID,\n ): boolean {\n return writeChunk(destination, startClientRenderedSuspenseBoundary);\n }\ndiff --git a\/packages\/react-dom\/src\/server\/ReactDOMServerLegacyFormatConfig.js b\/packages\/react-dom\/src\/server\/ReactDOMServerLegacyFormatConfig.js\nindex 3dc354b452..60ab7544d8 100644\n--- a\/packages\/react-dom\/src\/server\/ReactDOMServerLegacyFormatConfig.js\n+++ b\/packages\/react-dom\/src\/server\/ReactDOMServerLegacyFormatConfig.js\n@@ -86,6 +86,8 @@ export {\n pushEmpty,\n pushStartInstance,\n pushEndInstance,\n+ pushStartCompletedSuspenseBoundary,\n+ pushEndCompletedSuspenseBoundary,\n writeStartSegment,\n writeEndSegment,\n writeCompletedSegmentInstruction,\n@@ -116,23 +118,17 @@ export function pushTextInstance(\n export function writeStartCompletedSuspenseBoundary(\n destination: Destination,\n responseState: ResponseState,\n- id: SuspenseBoundaryID,\n ): boolean {\n if (responseState.generateStaticMarkup) {\n \/\/ A completed boundary is done and doesn't need a representation in the HTML\n \/\/ if we're not going to be hydrating it.\n return true;\n }\n- return writeStartCompletedSuspenseBoundaryImpl(\n- destination,\n- responseState,\n- id,\n- );\n+ return writeStartCompletedSuspenseBoundaryImpl(destination, responseState);\n }\n export function writeStartClientRenderedSuspenseBoundary(\n destination: Destination,\n responseState: ResponseState,\n- id: SuspenseBoundaryID,\n ): boolean {\n if (responseState.generateStaticMarkup) {\n \/\/ A client rendered boundary is done and doesn't need a representation in the HTML\n@@ -142,7 +138,6 @@ export function writeStartClientRenderedSuspenseBoundary(\n return writeStartClientRenderedSuspenseBoundaryImpl(\n destination,\n responseState,\n- id,\n );\n }\n export function writeEndCompletedSuspenseBoundary(\ndiff --git a\/packages\/react-native-renderer\/src\/server\/ReactNativeServerFormatConfig.js b\/packages\/react-native-renderer\/src\/server\/ReactNativeServerFormatConfig.js\nindex 9f7501007e..24e9da4542 100644\n--- a\/packages\/react-native-renderer\/src\/server\/ReactNativeServerFormatConfig.js\n+++ b\/packages\/react-native-renderer\/src\/server\/ReactNativeServerFormatConfig.js\n@@ -204,11 +204,16 @@ export function writePlaceholder(\n export function writeStartCompletedSuspenseBoundary(\n destination: Destination,\n responseState: ResponseState,\n- id: SuspenseBoundaryID,\n ): boolean {\n- writeChunk(destination, SUSPENSE_COMPLETE);\n- return writeChunk(destination, formatID(id));\n+ return writeChunk(destination, SUSPENSE_COMPLETE);\n }\n+\n+export function pushStartCompletedSuspenseBoundary(\n+ target: Array,\n+): void {\n+ target.push(SUSPENSE_COMPLETE);\n+}\n+\n export function writeStartPendingSuspenseBoundary(\n destination: Destination,\n responseState: ResponseState,\n@@ -220,10 +225,8 @@ export function writeStartPendingSuspenseBoundary(\n export function writeStartClientRenderedSuspenseBoundary(\n destination: Destination,\n responseState: ResponseState,\n- id: SuspenseBoundaryID,\n ): boolean {\n- writeChunk(destination, SUSPENSE_CLIENT_RENDER);\n- return writeChunk(destination, formatID(id));\n+ return writeChunk(destination, SUSPENSE_CLIENT_RENDER);\n }\n export function writeEndCompletedSuspenseBoundary(\n destination: Destination,\n@@ -231,6 +234,11 @@ export function writeEndCompletedSuspenseBoundary(\n ): boolean {\n return writeChunk(destination, END);\n }\n+export function pushEndCompletedSuspenseBoundary(\n+ target: Array,\n+): void {\n+ target.push(END);\n+}\n export function writeEndPendingSuspenseBoundary(\n destination: Destination,\n responseState: ResponseState,\ndiff --git a\/packages\/react-server\/src\/ReactFizzServer.js b\/packages\/react-server\/src\/ReactFizzServer.js\nindex 4b7eb46d94..f19f45e41f 100644\n--- a\/packages\/react-server\/src\/ReactFizzServer.js\n+++ b\/packages\/react-server\/src\/ReactFizzServer.js\n@@ -52,6 +52,8 @@ import {\n pushTextInstance,\n pushStartInstance,\n pushEndInstance,\n+ pushStartCompletedSuspenseBoundary,\n+ pushEndCompletedSuspenseBoundary,\n createSuspenseBoundaryID,\n getChildFormatContext,\n } from '.\/ReactServerFormatConfig';\n@@ -107,6 +109,7 @@ import {\n warnAboutDefaultPropsOnFunctionComponents,\n enableScopeAPI,\n enableLazyElements,\n+ enableSuspenseAvoidThisFallback,\n } from 'shared\/ReactFeatureFlags';\n \n import getComponentNameFromType from 'shared\/getComponentNameFromType';\n@@ -520,6 +523,23 @@ function renderSuspenseBoundary(\n popComponentStackInDEV(task);\n }\n \n+function renderBackupSuspenseBoundary(\n+ request: Request,\n+ task: Task,\n+ props: Object,\n+) {\n+ pushBuiltInComponentStackInDEV(task, 'Suspense');\n+\n+ const content = props.children;\n+ const segment = task.blockedSegment;\n+\n+ pushStartCompletedSuspenseBoundary(segment.chunks);\n+ renderNode(request, task, content);\n+ pushEndCompletedSuspenseBoundary(segment.chunks);\n+\n+ popComponentStackInDEV(task);\n+}\n+\n function renderHostElement(\n request: Request,\n task: Task,\n@@ -986,7 +1006,14 @@ function renderElement(\n }\n \/\/ eslint-disable-next-line-no-fallthrough\n case REACT_SUSPENSE_TYPE: {\n- renderSuspenseBoundary(request, task, props);\n+ if (\n+ enableSuspenseAvoidThisFallback &&\n+ props.unstable_avoidThisFallback === true\n+ ) {\n+ renderBackupSuspenseBoundary(request, task, props);\n+ } else {\n+ renderSuspenseBoundary(request, task, props);\n+ }\n return;\n }\n }\n@@ -1604,7 +1631,6 @@ function flushSegment(\n writeStartClientRenderedSuspenseBoundary(\n destination,\n request.responseState,\n- boundary.id,\n );\n \n \/\/ Flush the fallback.\n@@ -1658,12 +1684,7 @@ function flushSegment(\n return writeEndPendingSuspenseBoundary(destination, request.responseState);\n } else {\n \/\/ We can inline this boundary's content as a complete boundary.\n-\n- writeStartCompletedSuspenseBoundary(\n- destination,\n- request.responseState,\n- boundary.id,\n- );\n+ writeStartCompletedSuspenseBoundary(destination, request.responseState);\n \n const completedSegments = boundary.completedSegments;\n invariant(\ndiff --git a\/packages\/react-server\/src\/forks\/ReactServerFormatConfig.custom.js b\/packages\/react-server\/src\/forks\/ReactServerFormatConfig.custom.js\nindex 5458a4f50a..22539f3aa8 100644\n--- a\/packages\/react-server\/src\/forks\/ReactServerFormatConfig.custom.js\n+++ b\/packages\/react-server\/src\/forks\/ReactServerFormatConfig.custom.js\n@@ -39,6 +39,10 @@ export const pushEmpty = $$$hostConfig.pushEmpty;\n export const pushTextInstance = $$$hostConfig.pushTextInstance;\n export const pushStartInstance = $$$hostConfig.pushStartInstance;\n export const pushEndInstance = $$$hostConfig.pushEndInstance;\n+export const pushStartCompletedSuspenseBoundary =\n+ $$$hostConfig.pushStartCompletedSuspenseBoundary;\n+export const pushEndCompletedSuspenseBoundary =\n+ $$$hostConfig.pushEndCompletedSuspenseBoundary;\n export const writePlaceholder = $$$hostConfig.writePlaceholder;\n export const writeStartCompletedSuspenseBoundary =\n $$$hostConfig.writeStartCompletedSuspenseBoundary;\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex b9adc3b247..608db694be 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -101,6 +101,8 @@ export const warnAboutSpreadingKeyToJSX = false;\n \n export const warnOnSubscriptionInsideStartTransition = false;\n \n+export const enableSuspenseAvoidThisFallback = false;\n+\n export const enableComponentStackLocations = true;\n \n export const enableNewReconciler = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex a16e267d34..9c3d45528c 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -49,6 +49,7 @@ export const disableModulePatternComponents = false;\n export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n+export const enableSuspenseAvoidThisFallback = false;\n export const enableComponentStackLocations = false;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex 5e6e925e8d..bf96cc00e6 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -40,6 +40,7 @@ export const disableModulePatternComponents = false;\n export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n+export const enableSuspenseAvoidThisFallback = false;\n export const enableComponentStackLocations = false;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex a74e056faf..0d2b226adf 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -40,6 +40,7 @@ export const disableModulePatternComponents = false;\n export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n+export const enableSuspenseAvoidThisFallback = false;\n export const enableComponentStackLocations = true;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\nindex 028755cbe0..f760425ce0 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n@@ -50,6 +50,7 @@ export const enableGetInspectorDataForInstanceInProduction = false;\n export const enableNewReconciler = false;\n export const deferRenderPhaseUpdateToNextBatch = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n+export const enableSuspenseAvoidThisFallback = false;\n export const enableStrictEffects = false;\n export const createRootStrictEffectsByDefault = false;\n export const enableUseRefAccessWarning = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex 103d02e8a6..cb0efcc34b 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -40,6 +40,7 @@ export const disableModulePatternComponents = true;\n export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n+export const enableSuspenseAvoidThisFallback = false;\n export const enableComponentStackLocations = true;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.testing.js b\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\nindex 0f9e710eda..d1cfdbb749 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\n@@ -40,6 +40,7 @@ export const disableModulePatternComponents = false;\n export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n+export const enableSuspenseAvoidThisFallback = false;\n export const enableComponentStackLocations = true;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\nindex 740377f5ae..62a10f475a 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n@@ -40,6 +40,7 @@ export const disableModulePatternComponents = true;\n export const warnUnstableRenderSubtreeIntoContainer = false;\n export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n+export const enableSuspenseAvoidThisFallback = false;\n export const enableComponentStackLocations = true;\n export const enableLegacyFBSupport = !__EXPERIMENTAL__;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex 3522244a3e..c5dde53578 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -48,6 +48,7 @@ export const enableProfilerNestedUpdateScheduledHook =\n export const enableUpdaterTracking = __PROFILE__;\n \n export const enableSuspenseLayoutEffectSemantics = true;\n+export const enableSuspenseAvoidThisFallback = false;\n \n \/\/ Logs additional User Timing API marks for use with an experimental profiling tool.\n export const enableSchedulingProfiler =\n","body":"","commit":{"authorName":"salazarm","authorEmail":"salazarm@users.noreply.github.com","authoredAt":"2021-09-20T15:44:48-04:00","shortRevision":"64e70f82e9","revision":"64e70f82e99e5836307aeefbde6b58240531c1ab","subject":"[Fizz] add avoidThisFallback support (#22318)"},"parents":["cbf6178ed3b450774a11bd2ca7735c2073cd1bc4"],"files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js","status":"M"},{"path":"packages\/react-dom\/src\/server\/ReactDOMServerFormatConfig.js","status":"M"},{"path":"packages\/react-dom\/src\/server\/ReactDOMServerLegacyFormatConfig.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/server\/ReactNativeServerFormatConfig.js","status":"M"},{"path":"packages\/react-server\/src\/ReactFizzServer.js","status":"M"},{"path":"packages\/react-server\/src\/forks\/ReactServerFormatConfig.custom.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.test-renderer.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.testing.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.testing.www.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.www.js","status":"M"}]}

dillon1000/react

Files changed