Skip to content

Commit 0dc4e66

Browse files
acdliteacdlite
authored
Land enableClientRenderFallbackOnHydrationMismatch (#24410)
This flag is already enabled on all relevant surfaces. We can remove it.
1 parent 3547729 commit 0dc4e66

20 files changed

+175
-609
lines changed

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

Lines changed: 41 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1832,41 +1832,26 @@ describe('ReactDOMFizzServer', () => {
18321832
},
18331833
});
18341834

1835-
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
1836-
expect(() => {
1837-
// The first paint switches to client rendering due to mismatch
1838-
expect(Scheduler).toFlushUntilNextPaint([
1839-
'client',
1840-
'Log recoverable error: Hydration failed because the initial ' +
1841-
'UI does not match what was rendered on the server.',
1842-
'Log recoverable error: There was an error while hydrating. ' +
1843-
'Because the error happened outside of a Suspense boundary, the ' +
1844-
'entire root will switch to client rendering.',
1845-
]);
1846-
}).toErrorDev(
1847-
[
1848-
'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
1849-
'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
1850-
' in div (at **)\n' +
1851-
' in App (at **)',
1852-
],
1853-
{withoutStack: 1},
1854-
);
1855-
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
1856-
} else {
1857-
const serverRenderedDiv = container.getElementsByTagName('div')[0];
1858-
// The first paint uses the server snapshot
1859-
expect(Scheduler).toFlushUntilNextPaint(['server']);
1860-
expect(getVisibleChildren(container)).toEqual(<div>server</div>);
1861-
// Hydration succeeded
1862-
expect(ref.current).toEqual(serverRenderedDiv);
1863-
1864-
// Asynchronously we detect that the store has changed on the client,
1865-
// and patch up the inconsistency
1866-
expect(Scheduler).toFlushUntilNextPaint(['client']);
1867-
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
1868-
expect(ref.current).toEqual(serverRenderedDiv);
1869-
}
1835+
expect(() => {
1836+
// The first paint switches to client rendering due to mismatch
1837+
expect(Scheduler).toFlushUntilNextPaint([
1838+
'client',
1839+
'Log recoverable error: Hydration failed because the initial ' +
1840+
'UI does not match what was rendered on the server.',
1841+
'Log recoverable error: There was an error while hydrating. ' +
1842+
'Because the error happened outside of a Suspense boundary, the ' +
1843+
'entire root will switch to client rendering.',
1844+
]);
1845+
}).toErrorDev(
1846+
[
1847+
'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
1848+
'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
1849+
' in div (at **)\n' +
1850+
' in App (at **)',
1851+
],
1852+
{withoutStack: 1},
1853+
);
1854+
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
18701855
});
18711856

18721857
// The selector implementation uses the lazy ref initialization pattern
@@ -1932,43 +1917,27 @@ describe('ReactDOMFizzServer', () => {
19321917
},
19331918
});
19341919

1935-
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
1936-
// The first paint uses the client due to mismatch forcing client render
1937-
expect(() => {
1938-
// The first paint switches to client rendering due to mismatch
1939-
expect(Scheduler).toFlushUntilNextPaint([
1940-
'client',
1941-
'Log recoverable error: Hydration failed because the initial ' +
1942-
'UI does not match what was rendered on the server.',
1943-
'Log recoverable error: There was an error while hydrating. ' +
1944-
'Because the error happened outside of a Suspense boundary, the ' +
1945-
'entire root will switch to client rendering.',
1946-
]);
1947-
}).toErrorDev(
1948-
[
1949-
'Warning: An error occurred during hydration. The server HTML was replaced with client content',
1950-
'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
1951-
' in div (at **)\n' +
1952-
' in App (at **)',
1953-
],
1954-
{withoutStack: 1},
1955-
);
1956-
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
1957-
} else {
1958-
const serverRenderedDiv = container.getElementsByTagName('div')[0];
1959-
1960-
// The first paint uses the server snapshot
1961-
expect(Scheduler).toFlushUntilNextPaint(['server']);
1962-
expect(getVisibleChildren(container)).toEqual(<div>server</div>);
1963-
// Hydration succeeded
1964-
expect(ref.current).toEqual(serverRenderedDiv);
1965-
1966-
// Asynchronously we detect that the store has changed on the client,
1967-
// and patch up the inconsistency
1968-
expect(Scheduler).toFlushUntilNextPaint(['client']);
1969-
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
1970-
expect(ref.current).toEqual(serverRenderedDiv);
1971-
}
1920+
// The first paint uses the client due to mismatch forcing client render
1921+
expect(() => {
1922+
// The first paint switches to client rendering due to mismatch
1923+
expect(Scheduler).toFlushUntilNextPaint([
1924+
'client',
1925+
'Log recoverable error: Hydration failed because the initial ' +
1926+
'UI does not match what was rendered on the server.',
1927+
'Log recoverable error: There was an error while hydrating. ' +
1928+
'Because the error happened outside of a Suspense boundary, the ' +
1929+
'entire root will switch to client rendering.',
1930+
]);
1931+
}).toErrorDev(
1932+
[
1933+
'Warning: An error occurred during hydration. The server HTML was replaced with client content',
1934+
'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
1935+
' in div (at **)\n' +
1936+
' in App (at **)',
1937+
],
1938+
{withoutStack: 1},
1939+
);
1940+
expect(getVisibleChildren(container)).toEqual(<div>client</div>);
19721941
});
19731942

19741943
// @gate experimental

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

Lines changed: 85 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -240,23 +240,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
240240
Scheduler.unstable_yieldValue(error.message);
241241
},
242242
});
243-
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
244-
expect(() => {
245-
expect(Scheduler).toFlushAndYield([
246-
'Hydration failed because the initial UI does not match what was rendered on the server.',
247-
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
248-
]);
249-
}).toErrorDev(
250-
[
251-
'Expected server HTML to contain a matching <span> in <span>',
252-
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
253-
],
254-
{withoutStack: 1},
255-
);
256-
} else {
257-
// This used to not warn.
258-
expect(Scheduler).toFlushAndYield([]);
259-
}
243+
expect(() => {
244+
expect(Scheduler).toFlushAndYield([
245+
'Hydration failed because the initial UI does not match what was rendered on the server.',
246+
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
247+
]);
248+
}).toErrorDev(
249+
[
250+
'Expected server HTML to contain a matching <span> in <span>',
251+
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
252+
],
253+
{withoutStack: 1},
254+
);
260255
expect(getVisibleChildren(container)).toEqual(
261256
<div>
262257
<span>
@@ -329,23 +324,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
329324
Scheduler.unstable_yieldValue(error.message);
330325
},
331326
});
332-
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
333-
expect(() => {
334-
expect(Scheduler).toFlushAndYield([
335-
'Hydration failed because the initial UI does not match what was rendered on the server.',
336-
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
337-
]);
338-
}).toErrorDev(
339-
[
340-
'Did not expect server HTML to contain the text node "Server" in <span>',
341-
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
342-
],
343-
{withoutStack: 1},
344-
);
345-
} else {
346-
// This used to not warn.
347-
expect(Scheduler).toFlushAndYield([]);
348-
}
327+
expect(() => {
328+
expect(Scheduler).toFlushAndYield([
329+
'Hydration failed because the initial UI does not match what was rendered on the server.',
330+
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
331+
]);
332+
}).toErrorDev(
333+
[
334+
'Did not expect server HTML to contain the text node "Server" in <span>',
335+
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
336+
],
337+
{withoutStack: 1},
338+
);
349339
expect(getVisibleChildren(container)).toEqual(
350340
<div>
351341
<span />
@@ -383,23 +373,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
383373
Scheduler.unstable_yieldValue(error.message);
384374
},
385375
});
386-
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
387-
expect(() => {
388-
expect(Scheduler).toFlushAndYield([
389-
'Hydration failed because the initial UI does not match what was rendered on the server.',
390-
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
391-
]);
392-
}).toErrorDev(
393-
[
394-
'Expected server HTML to contain a matching text node for "Client" in <span>.',
395-
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
396-
],
397-
{withoutStack: 1},
398-
);
399-
} else {
400-
// This used to not warn.
401-
expect(Scheduler).toFlushAndYield([]);
402-
}
376+
expect(() => {
377+
expect(Scheduler).toFlushAndYield([
378+
'Hydration failed because the initial UI does not match what was rendered on the server.',
379+
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
380+
]);
381+
}).toErrorDev(
382+
[
383+
'Expected server HTML to contain a matching text node for "Client" in <span>.',
384+
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
385+
],
386+
{withoutStack: 1},
387+
);
403388
expect(getVisibleChildren(container)).toEqual(
404389
<div>
405390
<span>
@@ -440,23 +425,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
440425
Scheduler.unstable_yieldValue(error.message);
441426
},
442427
});
443-
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
444-
expect(() => {
445-
expect(Scheduler).toFlushAndYield([
446-
'Hydration failed because the initial UI does not match what was rendered on the server.',
447-
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
448-
]);
449-
}).toErrorDev(
450-
[
451-
'Did not expect server HTML to contain the text node "Server" in <span>.',
452-
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
453-
],
454-
{withoutStack: 1},
455-
);
456-
} else {
457-
// This used to not warn.
458-
expect(Scheduler).toFlushAndYield([]);
459-
}
428+
expect(() => {
429+
expect(Scheduler).toFlushAndYield([
430+
'Hydration failed because the initial UI does not match what was rendered on the server.',
431+
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
432+
]);
433+
}).toErrorDev(
434+
[
435+
'Did not expect server HTML to contain the text node "Server" in <span>.',
436+
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
437+
],
438+
{withoutStack: 1},
439+
);
460440
expect(getVisibleChildren(container)).toEqual(
461441
<div>
462442
<span>
@@ -495,24 +475,19 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
495475
Scheduler.unstable_yieldValue(error.message);
496476
},
497477
});
498-
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
499-
expect(() => {
500-
expect(Scheduler).toFlushAndYield([
501-
'Hydration failed because the initial UI does not match what was rendered on the server.',
502-
'Hydration failed because the initial UI does not match what was rendered on the server.',
503-
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
504-
]);
505-
}).toErrorDev(
506-
[
507-
'Expected server HTML to contain a matching text node for "Client" in <span>.',
508-
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
509-
],
510-
{withoutStack: 1},
511-
);
512-
} else {
513-
// This used to not warn.
514-
expect(Scheduler).toFlushAndYield([]);
515-
}
478+
expect(() => {
479+
expect(Scheduler).toFlushAndYield([
480+
'Hydration failed because the initial UI does not match what was rendered on the server.',
481+
'Hydration failed because the initial UI does not match what was rendered on the server.',
482+
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
483+
]);
484+
}).toErrorDev(
485+
[
486+
'Expected server HTML to contain a matching text node for "Client" in <span>.',
487+
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
488+
],
489+
{withoutStack: 1},
490+
);
516491
expect(getVisibleChildren(container)).toEqual(
517492
<div>
518493
<span>
@@ -627,23 +602,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
627602
Scheduler.unstable_yieldValue(error.message);
628603
},
629604
});
630-
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
631-
expect(() => {
632-
expect(Scheduler).toFlushAndYield([
633-
'Hydration failed because the initial UI does not match what was rendered on the server.',
634-
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
635-
]);
636-
}).toErrorDev(
637-
[
638-
'Expected server HTML to contain a matching <p> in <div>.',
639-
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
640-
],
641-
{withoutStack: 1},
642-
);
643-
} else {
644-
// This used to not warn.
645-
expect(Scheduler).toFlushAndYield([]);
646-
}
605+
expect(() => {
606+
expect(Scheduler).toFlushAndYield([
607+
'Hydration failed because the initial UI does not match what was rendered on the server.',
608+
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
609+
]);
610+
}).toErrorDev(
611+
[
612+
'Expected server HTML to contain a matching <p> in <div>.',
613+
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
614+
],
615+
{withoutStack: 1},
616+
);
647617
expect(getVisibleChildren(container)).toEqual(
648618
<div>
649619
<p>Client and server</p>
@@ -679,23 +649,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
679649
Scheduler.unstable_yieldValue(error.message);
680650
},
681651
});
682-
if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
683-
expect(() => {
684-
expect(Scheduler).toFlushAndYield([
685-
'Hydration failed because the initial UI does not match what was rendered on the server.',
686-
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
687-
]);
688-
}).toErrorDev(
689-
[
690-
'Did not expect server HTML to contain a <p> in <div>.',
691-
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
692-
],
693-
{withoutStack: 1},
694-
);
695-
} else {
696-
// This used to not warn.
697-
expect(Scheduler).toFlushAndYield([]);
698-
}
652+
expect(() => {
653+
expect(Scheduler).toFlushAndYield([
654+
'Hydration failed because the initial UI does not match what was rendered on the server.',
655+
'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
656+
]);
657+
}).toErrorDev(
658+
[
659+
'Did not expect server HTML to contain a <p> in <div>.',
660+
'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
661+
],
662+
{withoutStack: 1},
663+
);
699664
expect(getVisibleChildren(container)).toEqual(
700665
<div>
701666
<p>Client and server</p>

0 commit comments

Comments
 (0)