{"parents":["c932e457800f077352b1b322f14a796e589299fb"],"commit":{"authoredAt":"2025-07-07T13:57:51-04:00","revision":"e43986f1f3e6e94f7eef86fb21c830959e0ade6c","shortRevision":"e43986f1f3","authorName":"Ricky","authorEmail":"rickhanlonii@gmail.com","subject":"Finally remove favorSafetyOverHydrationPerf (#33619)"},"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\nindex b8c659b022..edc3293cad 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzServer-test.js\n@@ -4656,7 +4656,6 @@ describe('ReactDOMFizzServer', () => {\n );\n });\n \n- \/\/ @gate favorSafetyOverHydrationPerf\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@@ -4740,7 +4739,6 @@ describe('ReactDOMFizzServer', () => {\n await waitForAll([]);\n });\n \n- \/\/ @gate favorSafetyOverHydrationPerf\n it('only warns once on hydration mismatch while within a suspense boundary', async () => {\n const App = ({text}) => {\n return (\n@@ -10248,75 +10246,19 @@ describe('ReactDOMFizzServer', () => {\n },\n });\n await waitForAll([]);\n- if (gate(flags => flags.favorSafetyOverHydrationPerf)) {\n- expect(getVisibleChildren(document)).toEqual(\n- \n- \n- \n- <\/head>\n- client<\/body>\n- <\/html>,\n- );\n- expect(recoverableErrors).toEqual([\n- expect.stringContaining(\n- \"Hydration failed because the server rendered text didn't match the client.\",\n- ),\n- ]);\n- } else {\n- expect(getVisibleChildren(document)).toEqual(\n- \n- \n- \n- <\/head>\n- server<\/body>\n- <\/html>,\n- );\n- expect(recoverableErrors).toEqual([]);\n- assertConsoleErrorDev([\n- \"A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:\" +\n- '\\n' +\n- \"\\n- A server\/client branch `if (typeof window !== 'undefined')`.\" +\n- \"\\n- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\" +\n- \"\\n- Date formatting in a user's locale which doesn't match the server.\" +\n- '\\n- External changing data without sending a snapshot of it along with the HTML.' +\n- '\\n- Invalid HTML tag nesting.' +\n- '\\n' +\n- '\\nIt can also happen if the client has a browser extension installed which messes with the HTML before React loaded.' +\n- '\\n' +\n- '\\nhttps:\/\/react.dev\/link\/hydration-mismatch' +\n- '\\n' +\n- '\\n ' +\n- '\\n ' +\n- '\\n ' +\n- '\\n ' +\n- '\\n ' +\n- '\\n ' +\n- '\\n+ client' +\n- '\\n- server' +\n- '\\n+ client' +\n- '\\n- server' +\n- '\\n' +\n- '\\n in meta (at **)' +\n- '\\n in ClientApp (at **)',\n- ]);\n- }\n+ expect(getVisibleChildren(document)).toEqual(\n+ \n+ \n+ \n+ <\/head>\n+ client<\/body>\n+ <\/html>,\n+ );\n+ expect(recoverableErrors).toEqual([\n+ expect.stringContaining(\n+ \"Hydration failed because the server rendered text didn't match the client.\",\n+ ),\n+ ]);\n \n root.unmount();\n expect(getVisibleChildren(document)).toEqual(\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js\nindex a28d492b1c..848fdd6521 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFloat-test.js\n@@ -7391,7 +7391,6 @@ body {\n );\n });\n \n- \/\/ @gate favorSafetyOverHydrationPerf\n it('retains styles even when a new html, head, and\/body mount', async () => {\n await act(() => {\n const {pipe} = renderToPipeableStream(\n@@ -9358,7 +9357,6 @@ background-color: green;\n ]);\n });\n \n- \/\/ @gate favorSafetyOverHydrationPerf\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 8b0bb44ccf..92da0bc123 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMHydrationDiff-test.js\n@@ -124,8 +124,7 @@ describe('ReactDOMServerHydration', () => {\n <\/div>\n );\n }\n- if (gate(flags => flags.favorSafetyOverHydrationPerf)) {\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n [\n \"Caught [Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n \n@@ -150,33 +149,6 @@ describe('ReactDOMServerHydration', () => {\n in Mismatch (at **)\",\n ]\n `);\n- } else {\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n- [\n- \"A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:\n-\n- - A server\/client branch \\`if (typeof window !== 'undefined')\\`.\n- - Variable input such as \\`Date.now()\\` or \\`Math.random()\\` which changes each time it's called.\n- - Date formatting in a user's locale which doesn't match the server.\n- - External changing data without sending a snapshot of it along with the HTML.\n- - Invalid HTML tag nesting.\n-\n- It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n-\n- https:\/\/react.dev\/link\/hydration-mismatch\n-\n- \n-

\n-

\n- + client\n- - server\n-\n- Owner Stack:\n- in main (at **)\n- in Mismatch (at **)\",\n- ]\n- `);\n- }\n });\n \n \/\/ @gate __DEV__\n@@ -193,8 +165,7 @@ describe('ReactDOMServerHydration', () => {\n }\n \n \/* eslint-disable no-irregular-whitespace *\/\n- if (gate(flags => flags.favorSafetyOverHydrationPerf)) {\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n [\n \"Caught [Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n \n@@ -218,32 +189,6 @@ describe('ReactDOMServerHydration', () => {\n in Mismatch (at **)\",\n ]\n `);\n- } else {\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n- [\n- \"A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:\n-\n- - A server\/client branch \\`if (typeof window !== 'undefined')\\`.\n- - Variable input such as \\`Date.now()\\` or \\`Math.random()\\` which changes each time it's called.\n- - Date formatting in a user's locale which doesn't match the server.\n- - External changing data without sending a snapshot of it along with the HTML.\n- - Invalid HTML tag nesting.\n-\n- It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n-\n- https:\/\/react.dev\/link\/hydration-mismatch\n-\n- \n-

\n- + This markup contains an nbsp entity: client text\n- - This markup contains an nbsp entity: server text\n-\n- Owner Stack:\n- in div (at **)\n- in Mismatch (at **)\",\n- ]\n- `);\n- }\n \/* eslint-enable no-irregular-whitespace *\/\n });\n \n@@ -740,8 +685,7 @@ describe('ReactDOMServerHydration', () => {\n function Mismatch({isClient}) {\n return

{isClient && 'only'}<\/div>;\n }\n- if (gate(flags => flags.favorSafetyOverHydrationPerf)) {\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n [\n \"Caught [Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n \n@@ -765,32 +709,6 @@ describe('ReactDOMServerHydration', () => {\n in Mismatch (at **)\",\n ]\n `);\n- } else {\n- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`\n- [\n- \"A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:\n-\n- - A server\/client branch \\`if (typeof window !== 'undefined')\\`.\n- - Variable input such as \\`Date.now()\\` or \\`Math.random()\\` which changes each time it's called.\n- - Date formatting in a user's locale which doesn't match the server.\n- - External changing data without sending a snapshot of it along with the HTML.\n- - Invalid HTML tag nesting.\n-\n- It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n-\n- https:\/\/react.dev\/link\/hydration-mismatch\n-\n- \n-

\n- + only\n- - \n-\n- Owner Stack:\n- in div (at **)\n- in Mismatch (at **)\",\n- ]\n- `);\n- }\n });\n \n \/\/ @gate __DEV__\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\nindex 5b719ddf4a..b865b6afd7 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerPartialHydration-test.internal.js\n@@ -3913,7 +3913,6 @@ describe('ReactDOMServerPartialHydration', () => {\n );\n });\n \n- \/\/ @gate favorSafetyOverHydrationPerf\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@@ -3937,7 +3936,6 @@ describe('ReactDOMServerPartialHydration', () => {\n ]);\n });\n \n- \/\/ @gate favorSafetyOverHydrationPerf\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__\/ReactDOMUseId-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMUseId-test.js\nindex 0654e8c6e6..08c48d5f0d 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMUseId-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMUseId-test.js\n@@ -24,7 +24,6 @@ let hasErrored = false;\n let fatalError = undefined;\n let waitForPaint;\n let SuspenseList;\n-let assertConsoleErrorDev;\n \n describe('useId', () => {\n beforeEach(() => {\n@@ -33,8 +32,6 @@ describe('useId', () => {\n React = require('react');\n ReactDOMClient = require('react-dom\/client');\n clientAct = require('internal-test-utils').act;\n- assertConsoleErrorDev =\n- require('internal-test-utils').assertConsoleErrorDev;\n ReactDOMFizzServer = require('react-dom\/server');\n Stream = require('stream');\n Suspense = React.Suspense;\n@@ -667,82 +664,31 @@ describe('useId', () => {\n <\/div>\n `);\n \n- if (gate(flags => flags.favorSafetyOverHydrationPerf)) {\n- \/\/ TODO: This is a bug with revealOrder=\"backwards\" in that it hydrates in reverse.\n- await expect(async () => {\n- await clientAct(async () => {\n- ReactDOMClient.hydrateRoot(container, );\n- });\n- }).rejects.toThrowError(\n- `Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.`,\n- );\n-\n- expect(container).toMatchInlineSnapshot(`\n- \n- \n- A\n- <\/span>\n- \n- B\n- <\/span>\n- <\/div>\n- `);\n- } else {\n+ \/\/ TODO: This is a bug with revealOrder=\"backwards\" in that it hydrates in reverse.\n+ await expect(async () => {\n await clientAct(async () => {\n ReactDOMClient.hydrateRoot(container, );\n });\n+ }).rejects.toThrowError(\n+ `Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.`,\n+ );\n \n- \/\/ TODO: This is a bug with revealOrder=\"backwards\" in that it hydrates in reverse.\n- assertConsoleErrorDev([\n- `A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:\n-\n-- A server\/client branch \\`if (typeof window !== 'undefined')\\`.\n-- Variable input such as \\`Date.now()\\` or \\`Math.random()\\` which changes each time it's called.\n-- Date formatting in a user's locale which doesn't match the server.\n-- External changing data without sending a snapshot of it along with the HTML.\n-- Invalid HTML tag nesting.\n-\n-It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n-\n-https:\/\/react.dev\/link\/hydration-mismatch\n-\n- \n- \n- \n- \n- \n- \n-+ B\n-- A\n-`,\n- ]);\n-\n- expect(container).toMatchInlineSnapshot(`\n+ expect(container).toMatchInlineSnapshot(`\n \n \n A\n <\/span>\n \n B\n <\/span>\n <\/div>\n `);\n- }\n });\n \n it('basic incremental hydration', async () => {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js b\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\nindex f53354073e..583643449f 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactRenderDocument-test.js\n@@ -16,7 +16,6 @@ let ReactDOMServer;\n let act;\n let Scheduler;\n let assertLog;\n-let assertConsoleErrorDev;\n \n function getTestDocument(markup) {\n const doc = document.implementation.createHTMLDocument('');\n@@ -49,8 +48,6 @@ describe('rendering React components at document', () => {\n act = require('internal-test-utils').act;\n assertLog = require('internal-test-utils').assertLog;\n Scheduler = require('scheduler');\n- assertConsoleErrorDev =\n- require('internal-test-utils').assertConsoleErrorDev;\n });\n \n describe('with new explicit hydration API', () => {\n@@ -270,9 +267,6 @@ describe('rendering React components at document', () => {\n );\n const testDocument = getTestDocument(markup);\n \n- const favorSafetyOverHydrationPerf = gate(\n- flags => flags.favorSafetyOverHydrationPerf,\n- );\n ReactDOM.flushSync(() => {\n ReactDOMClient.hydrateRoot(\n testDocument,\n@@ -289,45 +283,11 @@ describe('rendering React components at document', () => {\n },\n );\n });\n- assertConsoleErrorDev(\n- favorSafetyOverHydrationPerf\n- ? []\n- : [\n- \"A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. \" +\n- \"This won't be patched up. This can happen if a SSR-ed Client Component used:\\n\" +\n- '\\n' +\n- \"- A server\/client branch `if (typeof window !== 'undefined')`.\\n\" +\n- \"- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\\n\" +\n- \"- Date formatting in a user's locale which doesn't match the server.\\n\" +\n- '- External changing data without sending a snapshot of it along with the HTML.\\n' +\n- '- Invalid HTML tag nesting.\\n\\nIt can also happen if the client has a browser extension ' +\n- 'installed which messes with the HTML before React loaded.\\n' +\n- '\\n' +\n- 'https:\/\/react.dev\/link\/hydration-mismatch\\n' +\n- '\\n' +\n- ' \\n' +\n- ' \\n' +\n- ' \\n' +\n- ' \\n' +\n- '+ Hello world\\n' +\n- '- Goodbye world\\n' +\n- '+ Hello world\\n' +\n- '- Goodbye world\\n' +\n- '\\n in body (at **)' +\n- '\\n in Component (at **)',\n- ],\n- );\n \n- assertLog(\n- favorSafetyOverHydrationPerf\n- ? [\n- \"onRecoverableError: Hydration failed because the server rendered text didn't match the client.\",\n- ]\n- : [],\n- );\n- expect(testDocument.body.innerHTML).toBe(\n- favorSafetyOverHydrationPerf ? 'Hello world' : 'Goodbye world',\n- );\n+ assertLog([\n+ \"onRecoverableError: Hydration failed because the server rendered text didn't match the client.\",\n+ ]);\n+ expect(testDocument.body.innerHTML).toBe('Hello world');\n });\n \n it('should render w\/ no markup to full document', async () => {\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js b\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\nindex e8435bd1ce..5ea0ceeac4 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactServerRenderingHydration-test.js\n@@ -127,9 +127,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 favorSafetyOverHydrationPerf = gate(\n- flags => flags.favorSafetyOverHydrationPerf,\n- );\n root = await act(() => {\n return ReactDOMClient.hydrateRoot(\n element,\n@@ -144,37 +141,10 @@ describe('ReactDOMServerHydration', () => {\n },\n );\n });\n- assertConsoleErrorDev(\n- favorSafetyOverHydrationPerf\n- ? []\n- : [\n- \"A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. \" +\n- \"This won't be patched up. This can happen if a SSR-ed Client Component used:\\n\" +\n- '\\n' +\n- \"- A server\/client branch `if (typeof window !== 'undefined')`.\\n\" +\n- \"- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\\n\" +\n- \"- Date formatting in a user's locale which doesn't match the server.\\n\" +\n- '- External changing data without sending a snapshot of it along with the HTML.\\n' +\n- '- Invalid HTML tag nesting.\\n\\nIt can also happen if the client has a browser extension ' +\n- 'installed which messes with the HTML before React loaded.\\n' +\n- '\\n' +\n- 'https:\/\/react.dev\/link\/hydration-mismatch\\n' +\n- '\\n' +\n- ' \\n' +\n- ' \\n' +\n- '+ y\\n' +\n- '- x\\n' +\n- '\\n in span (at **)' +\n- '\\n in TestComponent (at **)',\n- ],\n- );\n+\n expect(mountCount).toEqual(4);\n expect(element.innerHTML.length > 0).toBe(true);\n- if (favorSafetyOverHydrationPerf) {\n- expect(element.innerHTML).not.toEqual(lastMarkup);\n- } else {\n- expect(element.innerHTML).toEqual(lastMarkup);\n- }\n+ expect(element.innerHTML).not.toEqual(lastMarkup);\n \n \/\/ Ensure the events system works after markup mismatch.\n expect(numClicks).toEqual(1);\n@@ -240,9 +210,6 @@ describe('ReactDOMServerHydration', () => {\n const onFocusAfterHydration = jest.fn();\n element.firstChild.focus = onFocusBeforeHydration;\n \n- const favorSafetyOverHydrationPerf = gate(\n- flags => flags.favorSafetyOverHydrationPerf,\n- );\n await act(() => {\n ReactDOMClient.hydrateRoot(\n element,\n@@ -252,28 +219,6 @@ describe('ReactDOMServerHydration', () => {\n {onRecoverableError: error => {}},\n );\n });\n- assertConsoleErrorDev(\n- favorSafetyOverHydrationPerf\n- ? []\n- : [\n- \"A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. \" +\n- \"This won't be patched up. This can happen if a SSR-ed Client Component used:\\n\" +\n- '\\n' +\n- \"- A server\/client branch `if (typeof window !== 'undefined')`.\\n\" +\n- \"- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\\n\" +\n- \"- Date formatting in a user's locale which doesn't match the server.\\n\" +\n- '- External changing data without sending a snapshot of it along with the HTML.\\n' +\n- '- Invalid HTML tag nesting.\\n\\nIt can also happen if the client has a browser extension ' +\n- 'installed which messes with the HTML before React loaded.\\n' +\n- '\\n' +\n- 'https:\/\/react.dev\/link\/hydration-mismatch\\n' +\n- '\\n' +\n- '

dillon1000/react

Files changed