Skip to content

Commit 2c49b15

Browse files
rickhanloniirickhanlonii
committed
Remove favorSafetyOverHydrationPerf
1 parent 18ee505 commit 2c49b15

17 files changed

+35
-365
lines changed

‎packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js‎

Lines changed: 13 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4610,7 +4610,6 @@ describe('ReactDOMFizzServer', () => {
46104610
);
46114611
});
46124612

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

4697-
// @gate favorSafetyOverHydrationPerf
46984696
it('only warns once on hydration mismatch while within a suspense boundary', async () => {
46994697
const App = ({text}) => {
47004698
return (
@@ -10202,75 +10200,19 @@ describe('ReactDOMFizzServer', () => {
1020210200
},
1020310201
});
1020410202
await waitForAll([]);
10205-
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
10206-
expect(getVisibleChildren(document)).toEqual(
10207-
<html data-y="client">
10208-
<head data-y="client">
10209-
<meta itemprop="" name="client" />
10210-
</head>
10211-
<body data-y="client">client</body>
10212-
</html>,
10213-
);
10214-
expect(recoverableErrors).toEqual([
10215-
expect.stringContaining(
10216-
"Hydration failed because the server rendered text didn't match the client.",
10217-
),
10218-
]);
10219-
} else {
10220-
expect(getVisibleChildren(document)).toEqual(
10221-
<html data-x="server">
10222-
<head data-x="server">
10223-
<meta itemprop="" content="server" />
10224-
</head>
10225-
<body data-x="server">server</body>
10226-
</html>,
10227-
);
10228-
expect(recoverableErrors).toEqual([]);
10229-
assertConsoleErrorDev([
10230-
"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:" +
10231-
'\n' +
10232-
"\n- A server/client branch `if (typeof window !== 'undefined')`." +
10233-
"\n- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called." +
10234-
"\n- Date formatting in a user's locale which doesn't match the server." +
10235-
'\n- External changing data without sending a snapshot of it along with the HTML.' +
10236-
'\n- Invalid HTML tag nesting.' +
10237-
'\n' +
10238-
'\nIt can also happen if the client has a browser extension installed which messes with the HTML before React loaded.' +
10239-
'\n' +
10240-
'\nhttps://react.dev/link/hydration-mismatch' +
10241-
'\n' +
10242-
'\n <ClientApp>' +
10243-
'\n <Suspense>' +
10244-
'\n <html' +
10245-
'\n+ data-y="client"' +
10246-
'\n- data-y={null}' +
10247-
'\n- data-x="server"' +
10248-
'\n >' +
10249-
'\n <head' +
10250-
'\n+ data-y="client"' +
10251-
'\n- data-y={null}' +
10252-
'\n- data-x="server"' +
10253-
'\n >' +
10254-
'\n <meta' +
10255-
'\n itemProp=""' +
10256-
'\n+ name="client"' +
10257-
'\n- name={null}' +
10258-
'\n- content="server"' +
10259-
'\n >' +
10260-
'\n <body' +
10261-
'\n+ data-y="client"' +
10262-
'\n- data-y={null}' +
10263-
'\n- data-x="server"' +
10264-
'\n >' +
10265-
'\n+ client' +
10266-
'\n- server' +
10267-
'\n+ client' +
10268-
'\n- server' +
10269-
'\n' +
10270-
'\n in meta (at **)' +
10271-
'\n in ClientApp (at **)',
10272-
]);
10273-
}
10203+
expect(getVisibleChildren(document)).toEqual(
10204+
<html data-y="client">
10205+
<head data-y="client">
10206+
<meta itemprop="" name="client" />
10207+
</head>
10208+
<body data-y="client">client</body>
10209+
</html>,
10210+
);
10211+
expect(recoverableErrors).toEqual([
10212+
expect.stringContaining(
10213+
"Hydration failed because the server rendered text didn't match the client.",
10214+
),
10215+
]);
1027410216

1027510217
root.unmount();
1027610218
expect(getVisibleChildren(document)).toEqual(

‎packages/react-dom/src/__tests__/ReactDOMFloat-test.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7391,7 +7391,6 @@ body {
73917391
);
73927392
});
73937393

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

9361-
// @gate favorSafetyOverHydrationPerf
93629360
it('can render a title before a singleton even if that singleton clears its contents', async () => {
93639361
await act(() => {
93649362
const {pipe} = renderToPipeableStream(

‎packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js‎

Lines changed: 3 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,7 @@ describe('ReactDOMServerHydration', () => {
124124
</div>
125125
);
126126
}
127-
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
128-
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
127+
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
129128
[
130129
"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:
131130
@@ -150,33 +149,6 @@ describe('ReactDOMServerHydration', () => {
150149
in Mismatch (at **)",
151150
]
152151
`);
153-
} else {
154-
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
155-
[
156-
"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:
157-
158-
- A server/client branch \`if (typeof window !== 'undefined')\`.
159-
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
160-
- Date formatting in a user's locale which doesn't match the server.
161-
- External changing data without sending a snapshot of it along with the HTML.
162-
- Invalid HTML tag nesting.
163-
164-
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
165-
166-
https://react.dev/link/hydration-mismatch
167-
168-
<Mismatch isClient={true}>
169-
<div className="parent">
170-
<main className="child">
171-
+ client
172-
- server
173-
174-
Owner Stack:
175-
in main (at **)
176-
in Mismatch (at **)",
177-
]
178-
`);
179-
}
180152
});
181153

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

195167
/* eslint-disable no-irregular-whitespace */
196-
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
197-
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
168+
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
198169
[
199170
"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:
200171
@@ -218,32 +189,6 @@ describe('ReactDOMServerHydration', () => {
218189
in Mismatch (at **)",
219190
]
220191
`);
221-
} else {
222-
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
223-
[
224-
"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:
225-
226-
- A server/client branch \`if (typeof window !== 'undefined')\`.
227-
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
228-
- Date formatting in a user's locale which doesn't match the server.
229-
- External changing data without sending a snapshot of it along with the HTML.
230-
- Invalid HTML tag nesting.
231-
232-
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
233-
234-
https://react.dev/link/hydration-mismatch
235-
236-
<Mismatch isClient={true}>
237-
<div>
238-
+ This markup contains an nbsp entity:   client text
239-
- This markup contains an nbsp entity:   server text
240-
241-
Owner Stack:
242-
in div (at **)
243-
in Mismatch (at **)",
244-
]
245-
`);
246-
}
247192
/* eslint-enable no-irregular-whitespace */
248193
});
249194

@@ -740,8 +685,7 @@ describe('ReactDOMServerHydration', () => {
740685
function Mismatch({isClient}) {
741686
return <div className="parent">{isClient && 'only'}</div>;
742687
}
743-
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
744-
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
688+
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
745689
[
746690
"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:
747691
@@ -765,32 +709,6 @@ describe('ReactDOMServerHydration', () => {
765709
in Mismatch (at **)",
766710
]
767711
`);
768-
} else {
769-
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
770-
[
771-
"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:
772-
773-
- A server/client branch \`if (typeof window !== 'undefined')\`.
774-
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
775-
- Date formatting in a user's locale which doesn't match the server.
776-
- External changing data without sending a snapshot of it along with the HTML.
777-
- Invalid HTML tag nesting.
778-
779-
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
780-
781-
https://react.dev/link/hydration-mismatch
782-
783-
<Mismatch isClient={true}>
784-
<div className="parent">
785-
+ only
786-
-
787-
788-
Owner Stack:
789-
in div (at **)
790-
in Mismatch (at **)",
791-
]
792-
`);
793-
}
794712
});
795713

796714
// @gate __DEV__

‎packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3913,7 +3913,6 @@ describe('ReactDOMServerPartialHydration', () => {
39133913
);
39143914
});
39153915

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

3940-
// @gate favorSafetyOverHydrationPerf
39413939
it("falls back to client rendering when there's a text mismatch (text child with siblings)", async () => {
39423940
function Sibling() {
39433941
return 'Sibling';

‎packages/react-dom/src/__tests__/ReactDOMUseId-test.js‎

Lines changed: 8 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -667,82 +667,31 @@ describe('useId', () => {
667667
</div>
668668
`);
669669

670-
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
671-
// TODO: This is a bug with revealOrder="backwards" in that it hydrates in reverse.
672-
await expect(async () => {
673-
await clientAct(async () => {
674-
ReactDOMClient.hydrateRoot(container, <Foo />);
675-
});
676-
}).rejects.toThrowError(
677-
`Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.`,
678-
);
679-
680-
expect(container).toMatchInlineSnapshot(`
681-
<div
682-
id="container"
683-
>
684-
<span
685-
id="_r_1_"
686-
>
687-
A
688-
</span>
689-
<span
690-
id="_r_0_"
691-
>
692-
B
693-
</span>
694-
</div>
695-
`);
696-
} else {
670+
// TODO: This is a bug with revealOrder="backwards" in that it hydrates in reverse.
671+
await expect(async () => {
697672
await clientAct(async () => {
698673
ReactDOMClient.hydrateRoot(container, <Foo />);
699674
});
675+
}).rejects.toThrowError(
676+
`Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.`,
677+
);
700678

701-
// TODO: This is a bug with revealOrder="backwards" in that it hydrates in reverse.
702-
assertConsoleErrorDev([
703-
`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:
704-
705-
- A server/client branch \`if (typeof window !== 'undefined')\`.
706-
- Variable input such as \`Date.now()\` or \`Math.random()\` which changes each time it's called.
707-
- Date formatting in a user's locale which doesn't match the server.
708-
- External changing data without sending a snapshot of it along with the HTML.
709-
- Invalid HTML tag nesting.
710-
711-
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
712-
713-
https://react.dev/link/hydration-mismatch
714-
715-
<Foo>
716-
<SuspenseList revealOrder="unstable_l..." tail="visible">
717-
<Bar>
718-
<Bar>
719-
<Baz id="_R_2_">
720-
<span
721-
+ id="_R_2_"
722-
- id="_R_1_"
723-
>
724-
+ B
725-
- A
726-
`,
727-
]);
728-
729-
expect(container).toMatchInlineSnapshot(`
679+
expect(container).toMatchInlineSnapshot(`
730680
<div
731681
id="container"
732682
>
733683
<span
734-
id="_R_1_"
684+
id="_r_1_"
735685
>
736686
A
737687
</span>
738688
<span
739-
id="_R_2_"
689+
id="_r_0_"
740690
>
741691
B
742692
</span>
743693
</div>
744694
`);
745-
}
746695
});
747696

748697
it('basic incremental hydration', async () => {

0 commit comments

Comments
 (0)