{"body":"Build on top of #28440.\r\n\r\nThis lets us remove the path where updates are tracked on differences in\r\ntext.","parents":["f73d11f0923ace72b867bec6a9f48930c3a4b9b6"],"commit":{"shortRevision":"84c84d72f1","authorName":"Sebastian Markbåge","authorEmail":"sebastian@calyptus.eu","revision":"84c84d72f11ff1961a103b3cd59919876e48f759","subject":"Remove enableClientRenderFallbackOnTextMismatch flag (#28458)","authoredAt":"2024-03-26T14:55:14-07:00"},"files":[{"path":"packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzSuppressHydrationWarning-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberHydrationContext.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.www-dynamic.js","status":"M"},{"path":"packages\/shared\/forks\/ReactFeatureFlags.www.js","status":"M"}],"patch":"diff --git a\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js b\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\nindex 6067ba010d..68f0e5b39a 100644\n--- a\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\n+++ b\/packages\/react-dom-bindings\/src\/client\/ReactDOMComponent.js\n@@ -68,7 +68,6 @@ import sanitizeURL from '..\/shared\/sanitizeURL';\n import {\n enableBigIntSupport,\n enableCustomElementPropertySupport,\n- enableClientRenderFallbackOnTextMismatch,\n disableIEWorkarounds,\n enableTrustedTypesIntegration,\n enableFilterEmptyStringAttributesDOM,\n@@ -351,11 +350,9 @@ export function checkForUnmatchedText(\n }\n }\n \n- if (enableClientRenderFallbackOnTextMismatch) {\n- \/\/ In concurrent roots, we throw when there's a text mismatch and revert to\n- \/\/ client rendering, up to the nearest Suspense boundary.\n- throw new Error('Text content does not match server-rendered HTML.');\n- }\n+ \/\/ In concurrent roots, we throw when there's a text mismatch and revert to\n+ \/\/ client rendering, up to the nearest Suspense boundary.\n+ throw new Error('Text content does not match server-rendered HTML.');\n }\n \n function noop() {}\n@@ -2865,16 +2862,6 @@ export function diffHydratedProperties(\n if (props.suppressHydrationWarning !== true) {\n checkForUnmatchedText(domElement.textContent, children, shouldWarnDev);\n }\n- if (!enableClientRenderFallbackOnTextMismatch) {\n- \/\/ We really should be patching this in the commit phase but since\n- \/\/ this only affects legacy mode hydration which is deprecated anyway\n- \/\/ we can get away with it.\n- \/\/ Host singletons get their children appended and don't use the text\n- \/\/ content mechanism.\n- if (tag !== 'body') {\n- domElement.textContent = (children: any);\n- }\n- }\n }\n }\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex 06d0c1b93a..b0945ba911 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -4419,7 +4419,6 @@ describe('ReactDOMFizzServer', () => {\n );\n });\n \n- \/\/ @gate enableClientRenderFallbackOnTextMismatch\n it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {\n const makeApp = () => {\n let resolve, resolved;\n@@ -4505,7 +4504,6 @@ describe('ReactDOMFizzServer', () => {\n await waitForAll([]);\n });\n \n- \/\/ @gate enableClientRenderFallbackOnTextMismatch\n it('only warns once on hydration mismatch while within a suspense boundary', async () => {\n const originalConsoleError = console.error;\n const mockError = jest.fn();\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzSuppressHydrationWarning-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzSuppressHydrationWarning-test.js\nindex 3300297b77..d4cefa214c 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzSuppressHydrationWarning-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzSuppressHydrationWarning-test.js\n@@ -130,7 +130,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {\n : children;\n }\n \n- \/\/ @gate enableClientRenderFallbackOnTextMismatch\n it('suppresses but does not fix text mismatches with suppressHydrationWarning', async () => {\n function App({isClient}) {\n return (\n@@ -170,47 +169,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {\n );\n });\n \n- \/\/ @gate !enableClientRenderFallbackOnTextMismatch\n- it('suppresses and fixes text mismatches with suppressHydrationWarning', async () => {\n- function App({isClient}) {\n- return (\n-

\n- \n- {isClient ? 'Client Text' : 'Server Text'}\n- <\/span>\n- {isClient ? 2 : 1}<\/span>\n- <\/div>\n- );\n- }\n- await act(() => {\n- const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n- ,\n- );\n- pipe(writable);\n- });\n- expect(getVisibleChildren(container)).toEqual(\n-

\n- Server Text<\/span>\n- 1<\/span>\n- <\/div>,\n- );\n- ReactDOMClient.hydrateRoot(container, , {\n- onRecoverableError(error) {\n- \/\/ Don't miss a hydration error. There should be none.\n- Scheduler.log(error.message);\n- },\n- });\n- await waitForAll([]);\n- \/\/ The text mismatch should be *silently* fixed. Even in production.\n- expect(getVisibleChildren(container)).toEqual(\n-

\n- Client Text<\/span>\n- 2<\/span>\n- <\/div>,\n- );\n- });\n-\n- \/\/ @gate enableClientRenderFallbackOnTextMismatch\n it('suppresses but does not fix multiple text node mismatches with suppressHydrationWarning', async () => {\n function App({isClient}) {\n return (\n@@ -252,48 +210,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {\n );\n });\n \n- \/\/ @gate !enableClientRenderFallbackOnTextMismatch\n- it('suppresses and fixes multiple text node mismatches with suppressHydrationWarning', async () => {\n- function App({isClient}) {\n- return (\n-

\n- \n- {isClient ? 'Client1' : 'Server1'}\n- {isClient ? 'Client2' : 'Server2'}\n- <\/span>\n- <\/div>\n- );\n- }\n- await act(() => {\n- const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n- ,\n- );\n- pipe(writable);\n- });\n- expect(getVisibleChildren(container)).toEqual(\n-

\n- \n- {'Server1'}\n- {'Server2'}\n- <\/span>\n- <\/div>,\n- );\n- ReactDOMClient.hydrateRoot(container, , {\n- onRecoverableError(error) {\n- Scheduler.log(error.message);\n- },\n- });\n- await waitForAll([]);\n- expect(getVisibleChildren(container)).toEqual(\n-

\n- \n- {'Client1'}\n- {'Client2'}\n- <\/span>\n- <\/div>,\n- );\n- });\n-\n it('errors on text-to-element mismatches with suppressHydrationWarning', async () => {\n function App({isClient}) {\n return (\n@@ -345,7 +261,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {\n );\n });\n \n- \/\/ @gate enableClientRenderFallbackOnTextMismatch\n it('suppresses but does not fix client-only single text node mismatches with suppressHydrationWarning', async () => {\n function App({text}) {\n return (\n@@ -386,41 +301,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {\n );\n });\n \n- \/\/ @gate !enableClientRenderFallbackOnTextMismatch\n- it('suppresses and fixes client-only single text node mismatches with suppressHydrationWarning', async () => {\n- function App({isClient}) {\n- return (\n-

\n- \n- {isClient ? 'Client' : null}\n- <\/span>\n- <\/div>\n- );\n- }\n- await act(() => {\n- const {pipe} = ReactDOMFizzServer.renderToPipeableStream(\n- ,\n- );\n- pipe(writable);\n- });\n- expect(getVisibleChildren(container)).toEqual(\n-

\n- \n- <\/div>,\n- );\n- ReactDOMClient.hydrateRoot(container, , {\n- onRecoverableError(error) {\n- Scheduler.log(error.message);\n- },\n- });\n- await waitForAll([]);\n- expect(getVisibleChildren(container)).toEqual(\n-

\n- {'Client'}<\/span>\n- <\/div>,\n- );\n- });\n-\n \/\/ TODO: This behavior is not consistent with client-only single text node.\n \n it('errors on server-only single text node mismatches with suppressHydrationWarning', async () => {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js\nindex bd17e32742..736b831702 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js\n@@ -6446,7 +6446,6 @@ body {\n );\n });\n \n- \/\/ @gate enableClientRenderFallbackOnTextMismatch\n it('retains styles even when a new html, head, and\/body mount', async () => {\n await act(() => {\n const {pipe} = renderToPipeableStream(\n@@ -8232,7 +8231,6 @@ background-color: green;\n ]);\n });\n \n- \/\/ @gate enableClientRenderFallbackOnTextMismatch || !__DEV__\n it('can render a title before a singleton even if that singleton clears its contents', async () => {\n await act(() => {\n const {pipe} = renderToPipeableStream(\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js\nindex 0eb9cc3fe4..8a7cfb55d6 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js\n@@ -80,28 +80,17 @@ describe('ReactDOMServerHydration', () => {\n <\/div>\n );\n }\n- if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n- [\n- \"Warning: Text content did not match. Server: \"server\" Client: \"client\"\n- in main (at **)\n- in div (at **)\n- in Mismatch (at **)\",\n- \"Warning: An error occurred during hydration. The server HTML was replaced with client content in

.\",\n- \"Caught [Text content does not match server-rendered HTML.]\",\n- \"Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]\",\n- ]\n- `);\n- } else {\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n- [\n- \"Warning: Text content did not match. Server: \"server\" Client: \"client\"\n- in main (at **)\n- in div (at **)\n- in Mismatch (at **)\",\n- ]\n- `);\n- }\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ [\n+ \"Warning: Text content did not match. Server: \"server\" Client: \"client\"\n+ in main (at **)\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ \"Warning: An error occurred during hydration. The server HTML was replaced with client content in

.\",\n- \"Caught [Text content does not match server-rendered HTML.]\",\n- \"Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]\",\n- ]\n- `);\n- } else {\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n- [\n- \"Warning: Text content did not match. Server: \"This markup contains an nbsp entity: server text\" Client: \"This markup contains an nbsp entity: client text\"\n- in div (at **)\n- in Mismatch (at **)\",\n- ]\n- `);\n- }\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ [\n+ \"Warning: Text content did not match. Server: \"This markup contains an nbsp entity: server text\" Client: \"This markup contains an nbsp entity: client text\"\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ \"Warning: An error occurred during hydration. The server HTML was replaced with client content in

.\",\n+ \"Caught [Text content does not match server-rendered HTML.]\",\n+ \"Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]\",\n+ ]\n+ `);\n \/* eslint-enable no-irregular-whitespace *\/\n });\n \n@@ -388,26 +367,16 @@ describe('ReactDOMServerHydration', () => {\n function Mismatch({isClient}) {\n return

{isClient && 'only'}<\/div>;\n }\n- if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n- [\n- \"Warning: Text content did not match. Server: \"\" Client: \"only\"\n- in div (at **)\n- in Mismatch (at **)\",\n- \"Warning: An error occurred during hydration. The server HTML was replaced with client content in

.\",\n- \"Caught [Text content does not match server-rendered HTML.]\",\n- \"Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]\",\n- ]\n- `);\n- } else {\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n- [\n- \"Warning: Text content did not match. Server: \"\" Client: \"only\"\n- in div (at **)\n- in Mismatch (at **)\",\n- ]\n- `);\n- }\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ [\n+ \"Warning: Text content did not match. Server: \"\" Client: \"only\"\n+ in div (at **)\n+ in Mismatch (at **)\",\n+ \"Warning: An error occurred during hydration. The server HTML was replaced with client content in

.\",\n+ \"Caught [Text content does not match server-rendered HTML.]\",\n+ \"Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]\",\n+ ]\n+ `);\n });\n \n \/\/ @gate __DEV__\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js\nindex d7dc81d2d4..a66cd12cd9 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationElements-test.js\n@@ -18,7 +18,6 @@ let React;\n let ReactDOM;\n let ReactDOMClient;\n let ReactDOMServer;\n-let ReactFeatureFlags;\n \n function initModules() {\n jest.resetModules();\n@@ -26,7 +25,6 @@ function initModules() {\n ReactDOM = require('react-dom');\n ReactDOMClient = require('react-dom\/client');\n ReactDOMServer = require('react-dom\/server');\n- ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n \n \/\/ Make them available to the helpers.\n return {\n@@ -843,16 +841,15 @@ describe('ReactDOMServerIntegration', () => {\n if (\n render === serverRender ||\n render === streamRender ||\n- (render === clientRenderOnServerString &&\n- ReactFeatureFlags.enableClientRenderFallbackOnTextMismatch)\n+ render === clientRenderOnServerString\n ) {\n expect(e.childNodes.length).toBe(1);\n- \/\/ Everything becomes LF when parsed from server HTML or hydrated if enableClientRenderFallbackOnTextMismatch is on.\n+ \/\/ Everything becomes LF when parsed from server HTML or hydrated.\n \/\/ Null character is ignored.\n expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\\nbar\\nbaz\\nqux');\n } else {\n expect(e.childNodes.length).toBe(1);\n- \/\/ Client rendering (or hydration without enableClientRenderFallbackOnTextMismatch) uses JS value with CR.\n+ \/\/ Client rendering uses JS value with CR.\n \/\/ Null character stays.\n \n expectNode(\n@@ -876,19 +873,18 @@ describe('ReactDOMServerIntegration', () => {\n if (\n render === serverRender ||\n render === streamRender ||\n- (render === clientRenderOnServerString &&\n- ReactFeatureFlags.enableClientRenderFallbackOnTextMismatch)\n+ render === clientRenderOnServerString\n ) {\n \/\/ We have three nodes because there is a comment between them.\n expect(e.childNodes.length).toBe(3);\n- \/\/ Everything becomes LF when parsed from server HTML or hydrated if enableClientRenderFallbackOnTextMismatch is on.\n+ \/\/ Everything becomes LF when parsed from server HTML or hydrated.\n \/\/ Null character is ignored.\n expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\\nbar');\n expectNode(e.childNodes[2], TEXT_NODE_TYPE, '\\nbaz\\nqux');\n } else if (render === clientRenderOnServerString) {\n \/\/ We have three nodes because there is a comment between them.\n expect(e.childNodes.length).toBe(3);\n- \/\/ Hydration without enableClientRenderFallbackOnTextMismatch uses JS value with CR and null character.\n+ \/\/ Hydration uses JS value with CR and null character.\n \n expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\\rbar');\n expectNode(e.childNodes[2], TEXT_NODE_TYPE, '\\r\\nbaz\\nqux\\u0000');\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\nindex c8ce39f86e..cbdbf7c3be 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n@@ -4059,7 +4059,6 @@ describe('ReactDOMServerPartialHydration', () => {\n );\n });\n \n- \/\/ @gate enableClientRenderFallbackOnTextMismatch\n it(\"falls back to client rendering when there's a text mismatch (direct text child)\", async () => {\n function DirectTextChild({text}) {\n return

{text}<\/div>;\n@@ -4091,7 +4090,6 @@ describe('ReactDOMServerPartialHydration', () => {\n ]);\n });\n \n- \/\/ @gate enableClientRenderFallbackOnTextMismatch\n it(\"falls back to client rendering when there's a text mismatch (text child with siblings)\", async () => {\n function Sibling() {\n return 'Sibling';\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js b\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\nindex f719be6981..a42c6848dc 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\n@@ -265,9 +265,6 @@ describe('rendering React components at document', () => {\n );\n const testDocument = getTestDocument(markup);\n \n- const enableClientRenderFallbackOnTextMismatch = gate(\n- flags => flags.enableClientRenderFallbackOnTextMismatch,\n- );\n expect(() => {\n ReactDOM.flushSync(() => {\n ReactDOMClient.hydrateRoot(\n@@ -281,25 +278,19 @@ describe('rendering React components at document', () => {\n );\n });\n }).toErrorDev(\n- enableClientRenderFallbackOnTextMismatch\n- ? [\n- 'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',\n- 'Warning: Text content did not match.',\n- ]\n- : ['Warning: Text content did not match.'],\n+ [\n+ 'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',\n+ 'Warning: Text content did not match.',\n+ ],\n {\n- withoutStack: enableClientRenderFallbackOnTextMismatch ? 1 : 0,\n+ withoutStack: 1,\n },\n );\n \n- assertLog(\n- enableClientRenderFallbackOnTextMismatch\n- ? [\n- 'Log recoverable error: Text content does not match server-rendered HTML.',\n- 'Log recoverable error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',\n- ]\n- : [],\n- );\n+ assertLog([\n+ 'Log recoverable error: Text content does not match server-rendered HTML.',\n+ 'Log recoverable error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',\n+ ]);\n expect(testDocument.body.innerHTML).toBe('Hello world');\n });\n \ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js b\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\nindex e28296348a..76b6e4f947 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\n@@ -123,9 +123,6 @@ describe('ReactDOMServerHydration', () => {\n \/\/ Now simulate a situation where the app is not idempotent. React should\n \/\/ warn but do the right thing.\n element.innerHTML = lastMarkup;\n- const enableClientRenderFallbackOnTextMismatch = gate(\n- flags => flags.enableClientRenderFallbackOnTextMismatch,\n- );\n await expect(async () => {\n root = await act(() => {\n return ReactDOMClient.hydrateRoot(\n@@ -142,13 +139,11 @@ describe('ReactDOMServerHydration', () => {\n );\n });\n }).toErrorDev(\n- enableClientRenderFallbackOnTextMismatch\n- ? [\n- 'An error occurred during hydration. The server HTML was replaced with client content in

.',\n- 'Text content did not match. Server: \"x\" Client: \"y\"',\n- ]\n- : ['Text content did not match. Server: \"x\" Client: \"y\"'],\n- {withoutStack: enableClientRenderFallbackOnTextMismatch ? 1 : 0},\n+ [\n+ 'An error occurred during hydration. The server HTML was replaced with client content in

.',\n+ 'Text content did not match. Server: \"x\" Client: \"y\"',\n+ ],\n+ {withoutStack: 1},\n );\n expect(mountCount).toEqual(4);\n expect(element.innerHTML.length > 0).toBe(true);\n@@ -218,9 +213,6 @@ describe('ReactDOMServerHydration', () => {\n const onFocusAfterHydration = jest.fn();\n element.firstChild.focus = onFocusBeforeHydration;\n \n- const enableClientRenderFallbackOnTextMismatch = gate(\n- flags => flags.enableClientRenderFallbackOnTextMismatch,\n- );\n await expect(async () => {\n await act(() => {\n ReactDOMClient.hydrateRoot(\n@@ -232,15 +224,11 @@ describe('ReactDOMServerHydration', () => {\n );\n });\n }).toErrorDev(\n- enableClientRenderFallbackOnTextMismatch\n- ? [\n- 'An error occurred during hydration. The server HTML was replaced with client content in

.',\n- 'Warning: Text content did not match. Server: \"server\" Client: \"client\"',\n- ]\n- : [\n- 'Warning: Text content did not match. Server: \"server\" Client: \"client\"',\n- ],\n- {withoutStack: enableClientRenderFallbackOnTextMismatch ? 1 : 0},\n+ [\n+ 'An error occurred during hydration. The server HTML was replaced with client content in

.',\n+ 'Warning: Text content did not match. Server: \"server\" Client: \"client\"',\n+ ],\n+ {withoutStack: 1},\n );\n \n expect(onFocusBeforeHydration).not.toHaveBeenCalled();\n@@ -530,9 +518,6 @@ describe('ReactDOMServerHydration', () => {\n );\n domElement.innerHTML = markup;\n \n- const enableClientRenderFallbackOnTextMismatch = gate(\n- flags => flags.enableClientRenderFallbackOnTextMismatch,\n- );\n await expect(async () => {\n await act(() => {\n ReactDOMClient.hydrateRoot(\n@@ -546,15 +531,11 @@ describe('ReactDOMServerHydration', () => {\n \n expect(domElement.innerHTML).not.toEqual(markup);\n }).toErrorDev(\n- enableClientRenderFallbackOnTextMismatch\n- ? [\n- 'An error occurred during hydration. The server HTML was replaced with client content in

.',\n+ 'Warning: Text content did not match. Server: \"server\" Client: \"client\"',\n+ ],\n+ {withoutStack: 1},\n );\n });\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\nindex e8249b8293..e7462bf24a 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.js\n@@ -1306,9 +1306,7 @@ function completeWork(\n const currentHostContext = getHostContext();\n const wasHydrated = popHydrationState(workInProgress);\n if (wasHydrated) {\n- if (prepareToHydrateHostTextInstance(workInProgress)) {\n- markUpdate(workInProgress);\n- }\n+ prepareToHydrateHostTextInstance(workInProgress);\n } else {\n workInProgress.stateNode = createTextInstance(\n newText,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.js b\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.js\nindex 11cb591ec9..dab48e40cd 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHydrationContext.js\n@@ -27,7 +27,6 @@ import {\n HostRoot,\n SuspenseComponent,\n } from '.\/ReactWorkTags';\n-import {enableClientRenderFallbackOnTextMismatch} from 'shared\/ReactFeatureFlags';\n \n import {createFiberFromDehydratedFragment} from '.\/ReactFiber';\n import {\n@@ -489,7 +488,7 @@ function prepareToHydrateHostInstance(\n );\n }\n \n-function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {\n+function prepareToHydrateHostTextInstance(fiber: Fiber): void {\n if (!supportsHydration) {\n throw new Error(\n 'Expected prepareToHydrateHostTextInstance() to never be called. ' +\n@@ -500,13 +499,13 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {\n const textInstance: TextInstance = fiber.stateNode;\n const textContent: string = fiber.memoizedProps;\n const shouldWarnIfMismatchDev = !didSuspendOrErrorDEV;\n- const shouldUpdate = hydrateTextInstance(\n+ const textIsDifferent = hydrateTextInstance(\n textInstance,\n textContent,\n fiber,\n shouldWarnIfMismatchDev,\n );\n- if (shouldUpdate) {\n+ if (textIsDifferent) {\n \/\/ We assume that prepareToHydrateHostTextInstance is called in a context where the\n \/\/ hydration parent is the parent host component of this host text.\n const returnFiber = hydrationParentFiber;\n@@ -520,11 +519,6 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {\n textContent,\n shouldWarnIfMismatchDev,\n );\n- if (enableClientRenderFallbackOnTextMismatch) {\n- \/\/ In concurrent mode we never update the mismatched text,\n- \/\/ even if the error was ignored.\n- return false;\n- }\n break;\n }\n case HostSingleton:\n@@ -540,17 +534,11 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {\n textContent,\n shouldWarnIfMismatchDev,\n );\n- if (enableClientRenderFallbackOnTextMismatch) {\n- \/\/ In concurrent mode we never update the mismatched text,\n- \/\/ even if the error was ignored.\n- return false;\n- }\n break;\n }\n }\n }\n }\n- return shouldUpdate;\n }\n \n function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {\ndiff --git a\/packages\/shared\/ReactFeatureFlags.js b\/packages\/shared\/ReactFeatureFlags.js\nindex 2576e3030d..fc4c241c2a 100644\n--- a\/packages\/shared\/ReactFeatureFlags.js\n+++ b\/packages\/shared\/ReactFeatureFlags.js\n@@ -30,7 +30,6 @@ export const enableComponentStackLocations = true;\n \/\/ -----------------------------------------------------------------------------\n \n \/\/ TODO: Finish rolling out in www\n-export const enableClientRenderFallbackOnTextMismatch = true;\n export const enableAsyncActions = true;\n \n \/\/ Need to remove didTimeout argument from Scheduler before landing\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\nindex 582cb14010..642af8be74 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-fb.js\n@@ -65,7 +65,6 @@ export const enableSuspenseAvoidThisFallbackFizz = false;\n export const enableCPUSuspense = true;\n export const enableUseMemoCacheHook = true;\n export const enableUseEffectEventHook = false;\n-export const enableClientRenderFallbackOnTextMismatch = true;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = true;\n export const enableGetInspectorDataForInstanceInProduction = true;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\nindex 46f96b7c9d..c03dd5ac12 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.native-oss.js\n@@ -87,7 +87,6 @@ export const disableTextareaChildren = false;\n export const enableSuspenseAvoidThisFallback = false;\n export const enableSuspenseAvoidThisFallbackFizz = false;\n export const enableUseEffectEventHook = false;\n-export const enableClientRenderFallbackOnTextMismatch = true;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = true;\n export const enableGetInspectorDataForInstanceInProduction = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\nindex 551b625f41..d1143a36ba 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.js\n@@ -39,7 +39,6 @@ export const enableSuspenseAvoidThisFallbackFizz = false;\n export const enableCPUSuspense = false;\n export const enableUseMemoCacheHook = true;\n export const enableUseEffectEventHook = false;\n-export const enableClientRenderFallbackOnTextMismatch = true;\n export const enableComponentStackLocations = true;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = true;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\nindex f307540b20..b61b27ea3a 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.native.js\n@@ -45,7 +45,6 @@ export const enableSuspenseAvoidThisFallbackFizz = false;\n export const enableCPUSuspense = false;\n export const enableUseMemoCacheHook = true;\n export const enableUseEffectEventHook = false;\n-export const enableClientRenderFallbackOnTextMismatch = true;\n export const enableUseRefAccessWarning = false;\n export const enableInfiniteRenderLoopDetection = false;\n export const enableRenderableContext = false;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\nindex cb499f31d7..7cb09b6a61 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.test-renderer.www.js\n@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallbackFizz = false;\n export const enableCPUSuspense = false;\n export const enableUseMemoCacheHook = true;\n export const enableUseEffectEventHook = false;\n-export const enableClientRenderFallbackOnTextMismatch = true;\n export const enableComponentStackLocations = true;\n export const enableLegacyFBSupport = false;\n export const enableFilterEmptyStringAttributesDOM = true;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\nindex 89ef7fae08..9d5dccc464 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www-dynamic.js\n@@ -30,7 +30,6 @@ export const enableUseDeferredValueInitialArg = __VARIANT__;\n export const enableRenderableContext = __VARIANT__;\n export const useModernStrictMode = __VARIANT__;\n export const enableRefAsProp = __VARIANT__;\n-export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;\n export const enableNewBooleanProps = __VARIANT__;\n export const enableRetryLaneExpiration = __VARIANT__;\n export const retryLaneExpirationMs = 5000;\ndiff --git a\/packages\/shared\/forks\/ReactFeatureFlags.www.js b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\nindex 8902b5efac..fc839d73ce 100644\n--- a\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n+++ b\/packages\/shared\/forks\/ReactFeatureFlags.www.js\n@@ -39,7 +39,6 @@ export const {\n useModernStrictMode,\n enableRefAsProp,\n enableNewBooleanProps,\n- enableClientRenderFallbackOnTextMismatch,\n } = dynamicFeatureFlags;\n \n \/\/ On WWW, __EXPERIMENTAL__ is used for a new modern build.\n"}

dillon1000/react

Files changed