Skip to content

Finally remove favorSafetyOverHydrationPerf #33619

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 7, 2025
+35 −373
Merged

Finally remove favorSafetyOverHydrationPerf #33619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 13 additions & 71 deletions packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4610,7 +4610,6 @@ describe('ReactDOMFizzServer', () => {
);
});

// @gate favorSafetyOverHydrationPerf
it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {
const makeApp = () => {
let resolve, resolved;
Expand Down Expand Up @@ -4694,7 +4693,6 @@ describe('ReactDOMFizzServer', () => {
await waitForAll([]);
});

// @gate favorSafetyOverHydrationPerf
it('only warns once on hydration mismatch while within a suspense boundary', async () => {
const App = ({text}) => {
return (
Expand Down Expand Up @@ -10202,75 +10200,19 @@ describe('ReactDOMFizzServer', () => {
},
});
await waitForAll([]);
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
expect(getVisibleChildren(document)).toEqual(
<html data-y="client">
<head data-y="client">
<meta itemprop="" name="client" />
</head>
<body data-y="client">client</body>
</html>,
);
expect(recoverableErrors).toEqual([
expect.stringContaining(
"Hydration failed because the server rendered text didn't match the client.",
),
]);
} else {
expect(getVisibleChildren(document)).toEqual(
<html data-x="server">
<head data-x="server">
<meta itemprop="" content="server" />
</head>
<body data-x="server">server</body>
</html>,
);
expect(recoverableErrors).toEqual([]);
assertConsoleErrorDev([
"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' +
'\nIt can also happen if the client has a browser extension installed which messes with the HTML before React loaded.' +
'\n' +
'\nhttps://react.dev/link/hydration-mismatch' +
'\n' +
'\n <ClientApp>' +
'\n <Suspense>' +
'\n <html' +
'\n+ data-y="client"' +
'\n- data-y={null}' +
'\n- data-x="server"' +
'\n >' +
'\n <head' +
'\n+ data-y="client"' +
'\n- data-y={null}' +
'\n- data-x="server"' +
'\n >' +
'\n <meta' +
'\n itemProp=""' +
'\n+ name="client"' +
'\n- name={null}' +
'\n- content="server"' +
'\n >' +
'\n <body' +
'\n+ data-y="client"' +
'\n- data-y={null}' +
'\n- data-x="server"' +
'\n >' +
'\n+ client' +
'\n- server' +
'\n+ client' +
'\n- server' +
'\n' +
'\n in meta (at **)' +
'\n in ClientApp (at **)',
]);
}
expect(getVisibleChildren(document)).toEqual(
<html data-y="client">
<head data-y="client">
<meta itemprop="" name="client" />
</head>
<body data-y="client">client</body>
</html>,
);
expect(recoverableErrors).toEqual([
expect.stringContaining(
"Hydration failed because the server rendered text didn't match the client.",
),
]);

root.unmount();
expect(getVisibleChildren(document)).toEqual(
Expand Down
2 changes: 0 additions & 2 deletions packages/react-dom/src/__tests__/ReactDOMFloat-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7391,7 +7391,6 @@ body {
);
});

// @gate favorSafetyOverHydrationPerf
it('retains styles even when a new html, head, and/body mount', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
Expand Down Expand Up @@ -9358,7 +9357,6 @@ background-color: green;
]);
});

// @gate favorSafetyOverHydrationPerf
it('can render a title before a singleton even if that singleton clears its contents', async () => {
await act(() => {
const {pipe} = renderToPipeableStream(
Expand Down
88 changes: 3 additions & 85 deletions packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,7 @@ describe('ReactDOMServerHydration', () => {
</div>
);
}
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
"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:
Expand All @@ -150,33 +149,6 @@ describe('ReactDOMServerHydration', () => {
in Mismatch (at **)",
]
`);
} else {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
"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:
- A server/client branch \`if (typeof window !== 'undefined')\`.
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
<Mismatch isClient={true}>
<div className="parent">
<main className="child">
+ client
- server
Owner Stack:
in main (at **)
in Mismatch (at **)",
]
`);
}
});

// @gate __DEV__
Expand All @@ -193,8 +165,7 @@ describe('ReactDOMServerHydration', () => {
}

/* eslint-disable no-irregular-whitespace */
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
"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:
Expand All @@ -218,32 +189,6 @@ describe('ReactDOMServerHydration', () => {
in Mismatch (at **)",
]
`);
} else {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
"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:
- A server/client branch \`if (typeof window !== 'undefined')\`.
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
<Mismatch isClient={true}>
<div>
+ This markup contains an nbsp entity:   client text
- This markup contains an nbsp entity:   server text
Owner Stack:
in div (at **)
in Mismatch (at **)",
]
`);
}
/* eslint-enable no-irregular-whitespace */
});

Expand Down Expand Up @@ -740,8 +685,7 @@ describe('ReactDOMServerHydration', () => {
function Mismatch({isClient}) {
return <div className="parent">{isClient && 'only'}</div>;
}
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
"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:
Expand All @@ -765,32 +709,6 @@ describe('ReactDOMServerHydration', () => {
in Mismatch (at **)",
]
`);
} else {
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
[
"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:
- A server/client branch \`if (typeof window !== 'undefined')\`.
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
<Mismatch isClient={true}>
<div className="parent">
+ only
-
Owner Stack:
in div (at **)
in Mismatch (at **)",
]
`);
}
});

// @gate __DEV__
Expand Down
2 changes: 0 additions & 2 deletions packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3913,7 +3913,6 @@ describe('ReactDOMServerPartialHydration', () => {
);
});

// @gate favorSafetyOverHydrationPerf
it("falls back to client rendering when there's a text mismatch (direct text child)", async () => {
function DirectTextChild({text}) {
return <div>{text}</div>;
Expand All @@ -3937,7 +3936,6 @@ describe('ReactDOMServerPartialHydration', () => {
]);
});

// @gate favorSafetyOverHydrationPerf
it("falls back to client rendering when there's a text mismatch (text child with siblings)", async () => {
function Sibling() {
return 'Sibling';
Expand Down
70 changes: 8 additions & 62 deletions packages/react-dom/src/__tests__/ReactDOMUseId-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ let hasErrored = false;
let fatalError = undefined;
let waitForPaint;
let SuspenseList;
let assertConsoleErrorDev;

describe('useId', () => {
beforeEach(() => {
Expand All @@ -33,8 +32,6 @@ describe('useId', () => {
React = require('react');
ReactDOMClient = require('react-dom/client');
clientAct = require('internal-test-utils').act;
assertConsoleErrorDev =
require('internal-test-utils').assertConsoleErrorDev;
ReactDOMFizzServer = require('react-dom/server');
Stream = require('stream');
Suspense = React.Suspense;
Expand Down Expand Up @@ -667,82 +664,31 @@ describe('useId', () => {
</div>
`);

if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
// TODO: This is a bug with revealOrder="backwards" in that it hydrates in reverse.
await expect(async () => {
await clientAct(async () => {
ReactDOMClient.hydrateRoot(container, <Foo />);
});
}).rejects.toThrowError(
`Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.`,
);

expect(container).toMatchInlineSnapshot(`
<div
id="container"
>
<span
id="_r_1_"
>
A
</span>
<span
id="_r_0_"
>
B
</span>
</div>
`);
} else {
// TODO: This is a bug with revealOrder="backwards" in that it hydrates in reverse.
await expect(async () => {
await clientAct(async () => {
ReactDOMClient.hydrateRoot(container, <Foo />);
});
}).rejects.toThrowError(
`Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.`,
);

// TODO: This is a bug with revealOrder="backwards" in that it hydrates in reverse.
assertConsoleErrorDev([
`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:

- A server/client branch \`if (typeof window !== 'undefined')\`.
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

<Foo>
<SuspenseList revealOrder="unstable_l..." tail="visible">
<Bar>
<Bar>
<Baz id="_R_2_">
<span
+ id="_R_2_"
- id="_R_1_"
>
+ B
- A
`,
]);

expect(container).toMatchInlineSnapshot(`
expect(container).toMatchInlineSnapshot(`
<div
id="container"
>
<span
id="_R_1_"
id="_r_1_"
>
A
</span>
<span
id="_R_2_"
id="_r_0_"
>
B
</span>
</div>
`);
}
});

it('basic incremental hydration', async () => {
Expand Down
Loading
Loading