{"files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberHydrationContext.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberHydrationContext.old.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-dynamic.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.www.js","status":"M"}],"commit":{"revision":"fdc1d617a44cb9015c3bac3a6341b5af3311faf6","authorName":"salazarm","authorEmail":"salazarm@users.noreply.github.com","authoredAt":"2021-11-18T08:16:09-05:00","subject":"Flag for client render fallback behavior on hydration mismatch (#22787)","shortRevision":"fdc1d617a4"},"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex 6d169f9fbb..ca592002ad 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -1680,19 +1680,25 @@ describe('ReactDOMFizzServer', () => {\n \n \/\/ @gate experimental\n it('calls getServerSnapshot instead of getSnapshot', async () => {\n+ const ref = React.createRef();\n+\n function getServerSnapshot() {\n return 'server';\n }\n+\n function getClientSnapshot() {\n return 'client';\n }\n+\n function subscribe() {\n return () => {};\n }\n+\n function Child({text}) {\n Scheduler.unstable_yieldValue(text);\n return text;\n }\n+\n function App() {\n const value = useSyncExternalStore(\n subscribe,\n@@ -1700,11 +1706,12 @@ describe('ReactDOMFizzServer', () => {\n getServerSnapshot,\n );\n return (\n-

\n+

\n \n <\/div>\n );\n }\n+\n const loggedErrors = [];\n await act(async () => {\n const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n@@ -1723,14 +1730,29 @@ describe('ReactDOMFizzServer', () => {\n \n ReactDOM.hydrateRoot(container, );\n \n- expect(() => {\n- \/\/ The first paint switches to client rendering due to mismatch\n+ if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {\n+ expect(() => {\n+ \/\/ The first paint switches to client rendering due to mismatch\n+ expect(Scheduler).toFlushUntilNextPaint(['client']);\n+ }).toErrorDev(\n+ 'Warning: An error occurred during hydration. The server HTML was replaced with client content',\n+ {withoutStack: true},\n+ );\n+ expect(getVisibleChildren(container)).toEqual(

client<\/div>);\n+ } else {\n+ const serverRenderedDiv = container.getElementsByTagName('div')[0];\n+ \/\/ The first paint uses the server snapshot\n+ expect(Scheduler).toFlushUntilNextPaint(['server']);\n+ expect(getVisibleChildren(container)).toEqual(

server<\/div>);\n+ \/\/ Hydration succeeded\n+ expect(ref.current).toEqual(serverRenderedDiv);\n+\n+ \/\/ Asynchronously we detect that the store has changed on the client,\n+ \/\/ and patch up the inconsistency\n expect(Scheduler).toFlushUntilNextPaint(['client']);\n- }).toErrorDev(\n- 'Warning: An error occurred during hydration. The server HTML was replaced with client content',\n- {withoutStack: true},\n- );\n- expect(getVisibleChildren(container)).toEqual(

client<\/div>);\n+ expect(getVisibleChildren(container)).toEqual(

client<\/div>);\n+ expect(ref.current).toEqual(serverRenderedDiv);\n+ }\n });\n \n \/\/ The selector implementation uses the lazy ref initialization pattern\n@@ -1790,15 +1812,31 @@ describe('ReactDOMFizzServer', () => {\n \n ReactDOM.hydrateRoot(container, );\n \n- \/\/ The first paint uses the client due to mismatch forcing client render\n- expect(() => {\n- \/\/ The first paint switches to client rendering due to mismatch\n+ if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {\n+ \/\/ The first paint uses the client due to mismatch forcing client render\n+ expect(() => {\n+ \/\/ The first paint switches to client rendering due to mismatch\n+ expect(Scheduler).toFlushUntilNextPaint(['client']);\n+ }).toErrorDev(\n+ 'Warning: An error occurred during hydration. The server HTML was replaced with client content',\n+ {withoutStack: true},\n+ );\n+ expect(getVisibleChildren(container)).toEqual(

client<\/div>);\n+ } else {\n+ const serverRenderedDiv = container.getElementsByTagName('div')[0];\n+\n+ \/\/ The first paint uses the server snapshot\n+ expect(Scheduler).toFlushUntilNextPaint(['server']);\n+ expect(getVisibleChildren(container)).toEqual(

client<\/div>);\n+ expect(getVisibleChildren(container)).toEqual(

client<\/div>);\n+ expect(ref.current).toEqual(serverRenderedDiv);\n+ }\n });\n \n \/\/ @gate experimental\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\nindex 25ec3c590e..f6bee806f3 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n@@ -199,7 +199,16 @@ describe('ReactDOMServerPartialHydration', () => {\n \/\/ hydrating anyway.\n suspend = true;\n ReactDOM.hydrateRoot(container, );\n- Scheduler.unstable_flushAll();\n+ if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {\n+ Scheduler.unstable_flushAll();\n+ } else {\n+ expect(() => {\n+ Scheduler.unstable_flushAll();\n+ }).toErrorDev(\n+ \/\/ TODO: This error should not be logged in this case. It's a false positive.\n+ 'Did not expect server HTML to contain the text node \"Hello\" in

.',\n+ );\n+ }\n jest.runAllTimers();\n \n \/\/ Expect the server-generated HTML to stay intact.\n@@ -215,6 +224,7 @@ describe('ReactDOMServerPartialHydration', () => {\n expect(container.textContent).toBe('HelloHello');\n });\n \n+ \/\/ @gate enableClientRenderFallbackOnHydrationMismatch\n it('falls back to client rendering boundary on mismatch', async () => {\n let client = false;\n let suspend = false;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.new.js b\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.new.js\nindex 5e915579a7..614c6c9d94 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.new.js\n@@ -62,7 +62,10 @@ import {\n didNotFindHydratableTextInstance,\n didNotFindHydratableSuspenseInstance,\n } from '.\/ReactFiberHostConfig';\n-import {enableSuspenseServerRenderer} from 'shared\/ReactFeatureFlags';\n+import {\n+ enableClientRenderFallbackOnHydrationMismatch,\n+ enableSuspenseServerRenderer,\n+} from 'shared\/ReactFeatureFlags';\n import {OffscreenLane} from '.\/ReactFiberLane.new';\n import {\n getSuspendedTreeContext,\n@@ -324,8 +327,11 @@ function tryHydrate(fiber, nextInstance) {\n }\n }\n \n-function throwOnHydrationMismatchIfConcurrentMode(fiber) {\n- if ((fiber.mode & ConcurrentMode) !== NoMode) {\n+function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {\n+ if (\n+ enableClientRenderFallbackOnHydrationMismatch &&\n+ (fiber.mode & ConcurrentMode) !== NoMode\n+ ) {\n throw new Error(\n 'An error occurred during hydration. The server HTML was replaced with client content',\n );\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.old.js b\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.old.js\nindex e7e08d5f3b..b7bca8217d 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.old.js\n@@ -62,7 +62,10 @@ import {\n didNotFindHydratableTextInstance,\n didNotFindHydratableSuspenseInstance,\n } from '.\/ReactFiberHostConfig';\n-import {enableSuspenseServerRenderer} from 'shared\/ReactFeatureFlags';\n+import {\n+ enableClientRenderFallbackOnHydrationMismatch,\n+ enableSuspenseServerRenderer,\n+} from 'shared\/ReactFeatureFlags';\n import {OffscreenLane} from '.\/ReactFiberLane.old';\n import {\n getSuspendedTreeContext,\n@@ -324,8 +327,11 @@ function tryHydrate(fiber, nextInstance) {\n }\n }\n \n-function throwOnHydrationMismatchIfConcurrentMode(fiber) {\n- if ((fiber.mode & ConcurrentMode) !== NoMode) {\n+function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {\n+ if (\n+ enableClientRenderFallbackOnHydrationMismatch &&\n+ (fiber.mode & ConcurrentMode) !== NoMode\n+ ) {\n throw new Error(\n 'An error occurred during hydration. The server HTML was replaced with client content',\n );\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex ede13f2c2e..a5d8f214bf 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -105,6 +105,8 @@ export const enableSuspenseAvoidThisFallback = false;\n \n export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n \n+export const enableClientRenderFallbackOnHydrationMismatch = true;\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 221e94fb85..5994f0eefc 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -51,6 +51,7 @@ export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n+export const enableClientRenderFallbackOnHydrationMismatch = true;\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 7e24f2a0a2..aac8579f0e 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -42,6 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n+export const enableClientRenderFallbackOnHydrationMismatch = true;\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 bce24128a7..853907907e 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -42,6 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n+export const enableClientRenderFallbackOnHydrationMismatch = true;\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 02f063e58a..e2431deb9e 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n@@ -52,6 +52,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n+export const enableClientRenderFallbackOnHydrationMismatch = true;\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 7227c254dc..63d6afaeb4 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -42,6 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n+export const enableClientRenderFallbackOnHydrationMismatch = true;\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 3e9233f9c8..57038ecda8 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.testing.js\n@@ -42,6 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n+export const enableClientRenderFallbackOnHydrationMismatch = true;\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 87d7247d6e..b1c0b679d5 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.testing.www.js\n@@ -42,6 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;\n export const warnOnSubscriptionInsideStartTransition = false;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;\n+export const enableClientRenderFallbackOnHydrationMismatch = true;\n export const enableComponentStackLocations = true;\n export const enableLegacyFBSupport = !__EXPERIMENTAL__;\n export const enableFilterEmptyStringAttributesDOM = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\nindex ef980529f3..288e9631c7 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n@@ -28,6 +28,7 @@ export const enableSyncDefaultUpdates = __VARIANT__;\n export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;\n export const warnOnSubscriptionInsideStartTransition = __VARIANT__;\n export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;\n+export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;\n \n \/\/ Enable this flag to help with concurrent mode debugging.\n \/\/ It logs information to the console about React scheduling, rendering, and commit phases.\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex e280e1ff9a..7c17ae8b5c 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -33,6 +33,7 @@ export const {\n enableSyncDefaultUpdates,\n warnOnSubscriptionInsideStartTransition,\n enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,\n+ enableClientRenderFallbackOnHydrationMismatch,\n } = dynamicFeatureFlags;\n \n \/\/ On WWW, __EXPERIMENTAL__ is used for a new modern build.\n","body":"* Add flag for new client-render fallback behavior on hydration mismatch\r\n\r\n* gate test\r\n\r\n* gate tests too\r\n\r\n* fix test gating","parents":["f320ef88f51fbdc5aba38bdf07108678a84f7339"]}

dillon1000/react

Files changed