Skip to content

Commit e43986f

Browse files
rickhanloniirickhanlonii
authored
Finally remove favorSafetyOverHydrationPerf (#33619)
This is rolled out to 100%. Let me merge it though.
1 parent c932e45 commit e43986f

17 files changed

+35
-373
lines changed

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

Lines changed: 13 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4656,7 +4656,6 @@ describe('ReactDOMFizzServer', () => {
46564656
);
46574657
});
46584658

4659-
// @gate favorSafetyOverHydrationPerf
46604659
it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {
46614660
const makeApp = () => {
46624661
let resolve, resolved;
@@ -4740,7 +4739,6 @@ describe('ReactDOMFizzServer', () => {
47404739
await waitForAll([]);
47414740
});
47424741

4743-
// @gate favorSafetyOverHydrationPerf
47444742
it('only warns once on hydration mismatch while within a suspense boundary', async () => {
47454743
const App = ({text}) => {
47464744
return (
@@ -10248,75 +10246,19 @@ describe('ReactDOMFizzServer', () => {
1024810246
},
1024910247
});
1025010248
await waitForAll([]);
10251-
if (gate(flags => flags.favorSafetyOverHydrationPerf)) {
10252-
expect(getVisibleChildren(document)).toEqual(
10253-
<html data-y="client">
10254-
<head data-y="client">
10255-
<meta itemprop="" name="client" />
10256-
</head>
10257-
<body data-y="client">client</body>
10258-
</html>,
10259-
);
10260-
expect(recoverableErrors).toEqual([
10261-
expect.stringContaining(
10262-
"Hydration failed because the server rendered text didn't match the client.",
10263-
),
10264-
]);
10265-
} else {
10266-
expect(getVisibleChildren(document)).toEqual(
10267-
<html data-x="server">
10268-
<head data-x="server">
10269-
<meta itemprop="" content="server" />
10270-
</head>
10271-
<body data-x="server">server</body>
10272-
</html>,
10273-
);
10274-
expect(recoverableErrors).toEqual([]);
10275-
assertConsoleErrorDev([
10276-
"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:" +
10277-
'\n' +
10278-
"\n- A server/client branch `if (typeof window !== 'undefined')`." +
10279-
"\n- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called." +
10280-
"\n- Date formatting in a user's locale which doesn't match the server." +
10281-
'\n- External changing data without sending a snapshot of it along with the HTML.' +
10282-
'\n- Invalid HTML tag nesting.' +
10283-
'\n' +
10284-
'\nIt can also happen if the client has a browser extension installed which messes with the HTML before React loaded.' +
10285-
'\n' +
10286-
'\nhttps://react.dev/link/hydration-mismatch' +
10287-
'\n' +
10288-
'\n <ClientApp>' +
10289-
'\n <Suspense>' +
10290-
'\n <html' +
10291-
'\n+ data-y="client"' +
10292-
'\n- data-y={null}' +
10293-
'\n- data-x="server"' +
10294-
'\n >' +
10295-
'\n <head' +
10296-
'\n+ data-y="client"' +
10297-
'\n- data-y={null}' +
10298-
'\n- data-x="server"' +
10299-
'\n >' +
10300-
'\n <meta' +
10301-
'\n itemProp=""' +
10302-
'\n+ name="client"' +
10303-
'\n- name={null}' +
10304-
'\n- content="server"' +
10305-
'\n >' +
10306-
'\n <body' +
10307-
'\n+ data-y="client"' +
10308-
'\n- data-y={null}' +
10309-
'\n- data-x="server"' +
10310-
'\n >' +
10311-
'\n+ client' +
10312-
'\n- server' +
10313-
'\n+ client' +
10314-
'\n- server' +
10315-
'\n' +
10316-
'\n in meta (at **)' +
10317-
'\n in ClientApp (at **)',
10318-
]);
10319-
}
10249+
expect(getVisibleChildren(document)).toEqual(
10250+
<html data-y="client">
10251+
<head data-y="client">
10252+
<meta itemprop="" name="client" />
10253+
</head>
10254+
<body data-y="client">client</body>
10255+
</html>,
10256+
);
10257+
expect(recoverableErrors).toEqual([
10258+
expect.stringContaining(
10259+
"Hydration failed because the server rendered text didn't match the client.",
10260+
),
10261+
]);
1032010262

1032110263
root.unmount();
1032210264
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 & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ let hasErrored = false;
2424
let fatalError = undefined;
2525
let waitForPaint;
2626
let SuspenseList;
27-
let assertConsoleErrorDev;
2827

2928
describe('useId', () => {
3029
beforeEach(() => {
@@ -33,8 +32,6 @@ describe('useId', () => {
3332
React = require('react');
3433
ReactDOMClient = require('react-dom/client');
3534
clientAct = require('internal-test-utils').act;
36-
assertConsoleErrorDev =
37-
require('internal-test-utils').assertConsoleErrorDev;
3835
ReactDOMFizzServer = require('react-dom/server');
3936
Stream = require('stream');
4037
Suspense = React.Suspense;
@@ -667,82 +664,31 @@ describe('useId', () => {
667664
</div>
668665
`);
669666

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 {
667+
// TODO: This is a bug with revealOrder="backwards" in that it hydrates in reverse.
668+
await expect(async () => {
697669
await clientAct(async () => {
698670
ReactDOMClient.hydrateRoot(container, <Foo />);
699671
});
672+
}).rejects.toThrowError(
673+
`Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.`,
674+
);
700675

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(`
676+
expect(container).toMatchInlineSnapshot(`
730677
<div
731678
id="container"
732679
>
733680
<span
734-
id="_R_1_"
681+
id="_r_1_"
735682
>
736683
A
737684
</span>
738685
<span
739-
id="_R_2_"
686+
id="_r_0_"
740687
>
741688
B
742689
</span>
743690
</div>
744691
`);
745-
}
746692
});
747693

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

0 commit comments

Comments
 (0)