@samitouri / QOS-React-2 / commits / 0dc4e6663d

Land enableClientRenderFallbackOnHydrationMismatch (#24410)

This flag is already enabled on all relevant surfaces. We can remove it.

Andrew Clark committed Apr 20, 2022 at 14:09 UTC 0dc4e6663dc875e0f734b1a96b26ebc33902323a
20 files changed +175 -609
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+41 -72
@@ -1832,41 +1832,26 @@ describe('ReactDOMFizzServer', () => {
1832 },
1833 });
1834
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>);
1855 });
1856
1857 // The selector implementation uses the lazy ref initialization pattern
@@ -1932,43 +1917,27 @@ describe('ReactDOMFizzServer', () => {
1917 },
1918 });
1919
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>);
1941 });
1942
1943 // @gate experimental
packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
+85 -120
@@ -240,23 +240,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
240 Scheduler.unstable_yieldValue(error.message);
241 },
242 });
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 + );
255 expect(getVisibleChildren(container)).toEqual(
256 <div>
257 <span>
@@ -329,23 +324,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
324 Scheduler.unstable_yieldValue(error.message);
325 },
326 });
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 + );
339 expect(getVisibleChildren(container)).toEqual(
340 <div>
341 <span />
@@ -383,23 +373,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
373 Scheduler.unstable_yieldValue(error.message);
374 },
375 });
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 + );
388 expect(getVisibleChildren(container)).toEqual(
389 <div>
390 <span>
@@ -440,23 +425,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
425 Scheduler.unstable_yieldValue(error.message);
426 },
427 });
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 + );
440 expect(getVisibleChildren(container)).toEqual(
441 <div>
442 <span>
@@ -495,24 +475,19 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
475 Scheduler.unstable_yieldValue(error.message);
476 },
477 });
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 + );
491 expect(getVisibleChildren(container)).toEqual(
492 <div>
493 <span>
@@ -627,23 +602,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
602 Scheduler.unstable_yieldValue(error.message);
603 },
604 });
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 + );
617 expect(getVisibleChildren(container)).toEqual(
618 <div>
619 <p>Client and server</p>
@@ -679,23 +649,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
649 Scheduler.unstable_yieldValue(error.message);
650 },
651 });
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 + );
664 expect(getVisibleChildren(container)).toEqual(
665 <div>
666 <p>Client and server</p>
packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+33 -348
@@ -83,7 +83,7 @@ describe('ReactDOMServerHydration', () => {
83 </div>
84 );
85 }
86 - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
86 + if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
87 expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
88 Array [
89 "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
@@ -262,10 +262,7 @@ describe('ReactDOMServerHydration', () => {
262 </div>
263 );
264 }
265 - if (
266 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
267 - ) {
268 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
265 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
266 Array [
267 "Warning: Expected server HTML to contain a matching <main> in <div>.
268 in main (at **)
@@ -276,16 +273,6 @@ describe('ReactDOMServerHydration', () => {
273 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
274 ]
275 `);
279 - } else {
280 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
281 - Array [
282 - "Warning: Expected server HTML to contain a matching <main> in <div>.
283 - in main (at **)
284 - in div (at **)
285 - in Mismatch (at **)",
286 - ]
287 - `);
288 - }
276 });
277
278 // @gate __DEV__
@@ -299,10 +286,7 @@ describe('ReactDOMServerHydration', () => {
286 </div>
287 );
288 }
302 - if (
303 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
304 - ) {
305 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
289 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
290 Array [
291 "Warning: Expected server HTML to contain a matching <header> in <div>.
292 in header (at **)
@@ -313,16 +297,6 @@ describe('ReactDOMServerHydration', () => {
297 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
298 ]
299 `);
316 - } else {
317 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
318 - Array [
319 - "Warning: Expected server HTML to contain a matching <header> in <div>.
320 - in header (at **)
321 - in div (at **)
322 - in Mismatch (at **)",
323 - ]
324 - `);
325 - }
300 });
301
302 // @gate __DEV__
@@ -336,10 +310,7 @@ describe('ReactDOMServerHydration', () => {
310 </div>
311 );
312 }
339 - if (
340 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
341 - ) {
342 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
313 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
314 Array [
315 "Warning: Expected server HTML to contain a matching <main> in <div>.
316 in main (at **)
@@ -350,16 +321,6 @@ describe('ReactDOMServerHydration', () => {
321 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
322 ]
323 `);
353 - } else {
354 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
355 - Array [
356 - "Warning: Expected server HTML to contain a matching <main> in <div>.
357 - in main (at **)
358 - in div (at **)
359 - in Mismatch (at **)",
360 - ]
361 - `);
362 - }
324 });
325
326 // @gate __DEV__
@@ -373,10 +334,7 @@ describe('ReactDOMServerHydration', () => {
334 </div>
335 );
336 }
376 - if (
377 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
378 - ) {
379 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
337 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
338 Array [
339 "Warning: Expected server HTML to contain a matching <footer> in <div>.
340 in footer (at **)
@@ -387,16 +345,6 @@ describe('ReactDOMServerHydration', () => {
345 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
346 ]
347 `);
390 - } else {
391 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
392 - Array [
393 - "Warning: Expected server HTML to contain a matching <footer> in <div>.
394 - in footer (at **)
395 - in div (at **)
396 - in Mismatch (at **)",
397 - ]
398 - `);
399 - }
348 });
349 });
350
@@ -406,9 +354,7 @@ describe('ReactDOMServerHydration', () => {
354 function Mismatch({isClient}) {
355 return <div className="parent">{isClient && 'only'}</div>;
356 }
409 - if (
410 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
411 - ) {
357 + if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
358 expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
359 Array [
360 "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
@@ -441,10 +387,7 @@ describe('ReactDOMServerHydration', () => {
387 </div>
388 );
389 }
444 - if (
445 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
446 - ) {
447 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
390 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
391 Array [
392 "Warning: Expected server HTML to contain a matching text node for \\"second\\" in <div>.
393 in div (at **)
@@ -454,15 +397,6 @@ describe('ReactDOMServerHydration', () => {
397 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
398 ]
399 `);
457 - } else {
458 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
459 - Array [
460 - "Warning: Expected server HTML to contain a matching text node for \\"second\\" in <div>.
461 - in div (at **)
462 - in Mismatch (at **)",
463 - ]
464 - `);
465 - }
400 });
401
402 // @gate __DEV__
@@ -476,10 +410,7 @@ describe('ReactDOMServerHydration', () => {
410 </div>
411 );
412 }
479 - if (
480 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
481 - ) {
482 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
413 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
414 Array [
415 "Warning: Expected server HTML to contain a matching text node for \\"first\\" in <div>.
416 in div (at **)
@@ -489,15 +420,6 @@ describe('ReactDOMServerHydration', () => {
420 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
421 ]
422 `);
492 - } else {
493 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
494 - Array [
495 - "Warning: Expected server HTML to contain a matching text node for \\"first\\" in <div>.
496 - in div (at **)
497 - in Mismatch (at **)",
498 - ]
499 - `);
500 - }
423 });
424
425 // @gate __DEV__
@@ -511,10 +433,7 @@ describe('ReactDOMServerHydration', () => {
433 </div>
434 );
435 }
514 - if (
515 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
516 - ) {
517 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
436 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
437 Array [
438 "Warning: Expected server HTML to contain a matching text node for \\"third\\" in <div>.
439 in div (at **)
@@ -524,15 +443,6 @@ describe('ReactDOMServerHydration', () => {
443 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
444 ]
445 `);
527 - } else {
528 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
529 - Array [
530 - "Warning: Expected server HTML to contain a matching text node for \\"third\\" in <div>.
531 - in div (at **)
532 - in Mismatch (at **)",
533 - ]
534 - `);
535 - }
446 });
447 });
448 });
@@ -548,10 +458,7 @@ describe('ReactDOMServerHydration', () => {
458 </div>
459 );
460 }
551 - if (
552 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
553 - ) {
554 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
461 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
462 Array [
463 "Warning: Did not expect server HTML to contain a <main> in <div>.
464 in div (at **)
@@ -561,15 +468,6 @@ describe('ReactDOMServerHydration', () => {
468 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
469 ]
470 `);
564 - } else {
565 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
566 - Array [
567 - "Warning: Did not expect server HTML to contain a <main> in <div>.
568 - in div (at **)
569 - in Mismatch (at **)",
570 - ]
571 - `);
572 - }
471 });
472
473 // @gate __DEV__
@@ -583,10 +481,7 @@ describe('ReactDOMServerHydration', () => {
481 </div>
482 );
483 }
586 - if (
587 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
588 - ) {
589 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
484 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
485 Array [
486 "Warning: Expected server HTML to contain a matching <main> in <div>.
487 in main (at **)
@@ -598,16 +493,6 @@ describe('ReactDOMServerHydration', () => {
493 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
494 ]
495 `);
601 - } else {
602 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
603 - Array [
604 - "Warning: Did not expect server HTML to contain a <header> in <div>.
605 - in main (at **)
606 - in div (at **)
607 - in Mismatch (at **)",
608 - ]
609 - `);
610 - }
496 });
497
498 // @gate __DEV__
@@ -621,10 +506,7 @@ describe('ReactDOMServerHydration', () => {
506 </div>
507 );
508 }
624 - if (
625 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
626 - ) {
627 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
509 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
510 Array [
511 "Warning: Expected server HTML to contain a matching <footer> in <div>.
512 in footer (at **)
@@ -635,16 +517,6 @@ describe('ReactDOMServerHydration', () => {
517 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
518 ]
519 `);
638 - } else {
639 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
640 - Array [
641 - "Warning: Did not expect server HTML to contain a <main> in <div>.
642 - in footer (at **)
643 - in div (at **)
644 - in Mismatch (at **)",
645 - ]
646 - `);
647 - }
520 });
521
522 // @gate __DEV__
@@ -658,10 +530,7 @@ describe('ReactDOMServerHydration', () => {
530 </div>
531 );
532 }
661 - if (
662 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
663 - ) {
664 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
533 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
534 Array [
535 "Warning: Did not expect server HTML to contain a <footer> in <div>.
536 in div (at **)
@@ -671,15 +540,6 @@ describe('ReactDOMServerHydration', () => {
540 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
541 ]
542 `);
674 - } else {
675 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
676 - Array [
677 - "Warning: Did not expect server HTML to contain a <footer> in <div>.
678 - in div (at **)
679 - in Mismatch (at **)",
680 - ]
681 - `);
682 - }
543 });
544 });
545
@@ -689,10 +549,7 @@ describe('ReactDOMServerHydration', () => {
549 function Mismatch({isClient}) {
550 return <div className="parent">{!isClient && 'only'}</div>;
551 }
692 - if (
693 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
694 - ) {
695 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
552 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
553 Array [
554 "Warning: Did not expect server HTML to contain the text node \\"only\\" in <div>.
555 in div (at **)
@@ -702,15 +559,6 @@ describe('ReactDOMServerHydration', () => {
559 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
560 ]
561 `);
705 - } else {
706 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
707 - Array [
708 - "Warning: Did not expect server HTML to contain the text node \\"only\\" in <div>.
709 - in div (at **)
710 - in Mismatch (at **)",
711 - ]
712 - `);
713 - }
562 });
563
564 // @gate __DEV__
@@ -724,10 +572,7 @@ describe('ReactDOMServerHydration', () => {
572 </div>
573 );
574 }
727 - if (
728 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
729 - ) {
730 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
575 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
576 Array [
577 "Warning: Expected server HTML to contain a matching <main> in <div>.
578 in main (at **)
@@ -739,16 +584,6 @@ describe('ReactDOMServerHydration', () => {
584 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
585 ]
586 `);
742 - } else {
743 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
744 - Array [
745 - "Warning: Did not expect server HTML to contain the text node \\"first\\" in <div>.
746 - in main (at **)
747 - in div (at **)
748 - in Mismatch (at **)",
749 - ]
750 - `);
751 - }
587 });
588
589 // @gate __DEV__
@@ -762,10 +597,7 @@ describe('ReactDOMServerHydration', () => {
597 </div>
598 );
599 }
765 - if (
766 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
767 - ) {
768 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
600 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
601 Array [
602 "Warning: Expected server HTML to contain a matching <footer> in <div>.
603 in footer (at **)
@@ -776,16 +608,6 @@ describe('ReactDOMServerHydration', () => {
608 "Caught [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 `);
779 - } else {
780 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
781 - Array [
782 - "Warning: Did not expect server HTML to contain the text node \\"second\\" in <div>.
783 - in footer (at **)
784 - in div (at **)
785 - in Mismatch (at **)",
786 - ]
787 - `);
788 - }
611 });
612
613 // @gate __DEV__
@@ -799,10 +621,7 @@ describe('ReactDOMServerHydration', () => {
621 </div>
622 );
623 }
802 - if (
803 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
804 - ) {
805 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
624 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
625 Array [
626 "Warning: Did not expect server HTML to contain the text node \\"third\\" in <div>.
627 in div (at **)
@@ -812,15 +631,6 @@ describe('ReactDOMServerHydration', () => {
631 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
632 ]
633 `);
815 - } else {
816 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
817 - Array [
818 - "Warning: Did not expect server HTML to contain the text node \\"third\\" in <div>.
819 - in div (at **)
820 - in Mismatch (at **)",
821 - ]
822 - `);
823 - }
634 });
635 });
636 });
@@ -844,20 +654,14 @@ describe('ReactDOMServerHydration', () => {
654 </div>
655 );
656 }
847 - if (
848 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
849 - ) {
850 - // TODO: This message doesn't seem to have any useful details.
851 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
657 + // TODO: This message doesn't seem to have any useful details.
658 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
659 Array [
660 "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
661 "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
662 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
663 ]
664 `);
858 - } else {
859 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
860 - }
665 });
666
667 // @gate __DEV__
@@ -873,10 +677,7 @@ describe('ReactDOMServerHydration', () => {
677 </div>
678 );
679 }
876 - if (
877 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
878 - ) {
879 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
680 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
681 Array [
682 "Warning: Did not expect server HTML to contain a <main> in <div>.
683 in div (at **)
@@ -886,15 +687,6 @@ describe('ReactDOMServerHydration', () => {
687 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
688 ]
689 `);
889 - } else {
890 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
891 - Array [
892 - "Warning: Did not expect server HTML to contain a <main> in <div>.
893 - in div (at **)
894 - in Mismatch (at **)",
895 - ]
896 - `);
897 - }
690 });
691
692 // @gate __DEV__
@@ -911,20 +703,14 @@ describe('ReactDOMServerHydration', () => {
703 </div>
704 );
705 }
914 - if (
915 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
916 - ) {
917 - // TODO: This message doesn't seem to have any useful details.
918 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
706 + // TODO: This message doesn't seem to have any useful details.
707 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
708 Array [
709 "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
710 "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
711 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
712 ]
713 `);
925 - } else {
926 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
927 - }
714 });
715
716 // @gate __DEV__
@@ -941,10 +727,7 @@ describe('ReactDOMServerHydration', () => {
727 </div>
728 );
729 }
944 - if (
945 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
946 - ) {
947 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
730 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
731 Array [
732 "Warning: Did not expect server HTML to contain a <p> in <div>.
733 in div (at **)
@@ -954,15 +737,6 @@ describe('ReactDOMServerHydration', () => {
737 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
738 ]
739 `);
957 - } else {
958 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
959 - Array [
960 - "Warning: Did not expect server HTML to contain a <p> in <div>.
961 - in div (at **)
962 - in Mismatch (at **)",
963 - ]
964 - `);
965 - }
740 });
741
742 // @gate __DEV__
@@ -978,10 +752,7 @@ describe('ReactDOMServerHydration', () => {
752 </div>
753 );
754 }
981 - if (
982 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
983 - ) {
984 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
755 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
756 Array [
757 "Warning: Expected server HTML to contain a matching <main> in <div>.
758 in main (at **)
@@ -992,17 +763,6 @@ describe('ReactDOMServerHydration', () => {
763 "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
764 ]
765 `);
995 - } else {
996 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
997 - Array [
998 - "Warning: Expected server HTML to contain a matching <main> in <div>.
999 - in main (at **)
1000 - in Suspense (at **)
1001 - in div (at **)
1002 - in Mismatch (at **)",
1003 - ]
1004 - `);
1005 - }
766 });
767
768 // @gate __DEV__
@@ -1018,10 +778,7 @@ describe('ReactDOMServerHydration', () => {
778 </div>
779 );
780 }
1021 - if (
1022 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
1023 - ) {
1024 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
781 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
782 Array [
783 "Warning: Expected server HTML to contain a matching <footer> in <div>.
784 in footer (at **)
@@ -1032,17 +789,6 @@ describe('ReactDOMServerHydration', () => {
789 "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
790 ]
791 `);
1035 - } else {
1036 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1037 - Array [
1038 - "Warning: Did not expect server HTML to contain a <main> in <div>.
1039 - in footer (at **)
1040 - in Suspense (at **)
1041 - in div (at **)
1042 - in Mismatch (at **)",
1043 - ]
1044 - `);
1045 - }
792 });
793
794 // @gate __DEV__
@@ -1063,14 +809,8 @@ describe('ReactDOMServerHydration', () => {
809 </div>
810 );
811 }
1066 - if (
1067 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
1068 - ) {
1069 - // There is no error because we don't actually hydrate fallbacks.
1070 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
1071 - } else {
1072 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
1073 - }
812 + // There is no error because we don't actually hydrate fallbacks.
813 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
814 });
815
816 // @gate __DEV__
@@ -1091,14 +831,8 @@ describe('ReactDOMServerHydration', () => {
831 </div>
832 );
833 }
1094 - if (
1095 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
1096 - ) {
1097 - // There is no error because we don't actually hydrate fallbacks.
1098 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
1099 - } else {
1100 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
1101 - }
834 + // There is no error because we don't actually hydrate fallbacks.
835 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
836 });
837 });
838
@@ -1118,10 +852,7 @@ describe('ReactDOMServerHydration', () => {
852 </div>
853 );
854 }
1121 - if (
1122 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
1123 - ) {
1124 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
855 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
856 Array [
857 "Warning: Expected server HTML to contain a matching <header> in <div>.
858 in header (at **)
@@ -1134,16 +865,6 @@ describe('ReactDOMServerHydration', () => {
865 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
866 ]
867 `);
1137 - } else {
1138 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1139 - Array [
1140 - "Warning: Expected server HTML to contain a matching <header> in <div>.
1141 - in header (at **)
1142 - in div (at **)
1143 - in Mismatch (at **)",
1144 - ]
1145 - `);
1146 - }
868 });
869
870 // @gate __DEV__
@@ -1161,10 +882,7 @@ describe('ReactDOMServerHydration', () => {
882 </div>
883 );
884 }
1164 - if (
1165 - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
1166 - ) {
1167 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
885 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
886 Array [
887 "Warning: Did not expect server HTML to contain a <header> in <div>.
888 in div (at **)
@@ -1174,15 +892,6 @@ describe('ReactDOMServerHydration', () => {
892 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
893 ]
894 `);
1177 - } else {
1178 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1179 - Array [
1180 - "Warning: Did not expect server HTML to contain a <header> in <div>.
1181 - in div (at **)
1182 - in Mismatch (at **)",
1183 - ]
1184 - `);
1185 - }
895 });
896 });
897 });
@@ -1222,8 +931,7 @@ describe('ReactDOMServerHydration', () => {
931 );
932 }
933
1225 - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
1226 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
934 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
935 Array [
936 "Warning: Expected server HTML to contain a matching <footer> in <div>.
937 in footer (at **)
@@ -1236,18 +944,6 @@ describe('ReactDOMServerHydration', () => {
944 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
945 ]
946 `);
1239 - } else {
1240 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1241 - Array [
1242 - "Warning: Expected server HTML to contain a matching <footer> in <div>.
1243 - in footer (at **)
1244 - in Panel (at **)
1245 - in div (at **)
1246 - in ProfileSettings (at **)
1247 - in Mismatch (at **)",
1248 - ]
1249 - `);
1250 - }
947 });
948
949 // @gate __DEV__
@@ -1284,8 +980,7 @@ describe('ReactDOMServerHydration', () => {
980 );
981 }
982
1287 - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
1288 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
983 + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
984 Array [
985 "Warning: Did not expect server HTML to contain a <footer> in <div>.
986 in div (at **)
@@ -1296,16 +991,6 @@ describe('ReactDOMServerHydration', () => {
991 "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
992 ]
993 `);
1299 - } else {
1300 - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
1301 - Array [
1302 - "Warning: Did not expect server HTML to contain a <footer> in <div>.
1303 - in div (at **)
1304 - in ProfileSettings (at **)
1305 - in Mismatch (at **)",
1306 - ]
1307 - `);
1308 - }
994 });
995 });
996 });
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+12 -37
@@ -224,16 +224,7 @@ describe('ReactDOMServerPartialHydration', () => {
224 Scheduler.unstable_yieldValue(error.message);
225 },
226 });
227 - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
228 - Scheduler.unstable_flushAll();
229 - } else {
230 - expect(() => {
231 - Scheduler.unstable_flushAll();
232 - }).toErrorDev(
233 - // TODO: This error should not be logged in this case. It's a false positive.
234 - 'Did not expect server HTML to contain the text node "Hello" in <div>.',
235 - );
236 - }
227 + Scheduler.unstable_flushAll();
228 jest.runAllTimers();
229
230 // Expect the server-generated HTML to stay intact.
@@ -249,7 +240,6 @@ describe('ReactDOMServerPartialHydration', () => {
240 expect(container.textContent).toBe('HelloHello');
241 });
242
252 - // @gate enableClientRenderFallbackOnHydrationMismatch
243 it('falls back to client rendering boundary on mismatch', async () => {
244 // We can't use the toErrorDev helper here because this is async.
245 const originalConsoleError = console.error;
@@ -532,15 +522,11 @@ describe('ReactDOMServerPartialHydration', () => {
522 expect(container.innerHTML).toContain('<span>A</span>');
523 expect(container.innerHTML).not.toContain('<span>B</span>');
524
535 - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
536 - expect(Scheduler).toHaveYielded([
537 - 'There was an error while hydrating this Suspense boundary. ' +
538 - 'Switched to client rendering.',
539 - ]);
540 - expect(ref.current).not.toBe(span);
541 - } else {
542 - expect(ref.current).toBe(span);
543 - }
525 + expect(Scheduler).toHaveYielded([
526 + 'There was an error while hydrating this Suspense boundary. ' +
527 + 'Switched to client rendering.',
528 + ]);
529 + expect(ref.current).not.toBe(span);
530 });
531
532 it('recovers with client render when server rendered additional nodes at suspense root after unsuspending', async () => {
@@ -603,11 +589,7 @@ describe('ReactDOMServerPartialHydration', () => {
589
590 expect(container.innerHTML).toContain('<span>A</span>');
591 expect(container.innerHTML).not.toContain('<span>B</span>');
606 - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
607 - expect(ref.current).not.toBe(span);
608 - } else {
609 - expect(ref.current).toBe(span);
610 - }
592 + expect(ref.current).not.toBe(span);
593 if (__DEV__) {
594 expect(mockError).toHaveBeenCalledWith(
595 'Warning: Did not expect server HTML to contain a <%s> in <%s>.%s',
@@ -660,20 +642,14 @@ describe('ReactDOMServerPartialHydration', () => {
642 });
643 });
644 }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
663 - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
664 - expect(Scheduler).toHaveYielded([
665 - 'Hydration failed because the initial UI does not match what was rendered on the server.',
666 - 'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
667 - ]);
668 - }
645 + expect(Scheduler).toHaveYielded([
646 + 'Hydration failed because the initial UI does not match what was rendered on the server.',
647 + 'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
648 + ]);
649
650 expect(container.innerHTML).toContain('<span>A</span>');
651 expect(container.innerHTML).not.toContain('<span>B</span>');
672 - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
673 - expect(ref.current).not.toBe(span);
674 - } else {
675 - expect(ref.current).toBe(span);
676 - }
652 + expect(ref.current).not.toBe(span);
653 });
654
655 it('calls the onDeleted hydration callback if the parent gets deleted', async () => {
@@ -3292,7 +3268,6 @@ describe('ReactDOMServerPartialHydration', () => {
3268
3269 itHydratesWithoutMismatch('an empty string in class component', TestAppClass);
3270
3295 - // @gate enableClientRenderFallbackOnHydrationMismatch
3271 it('fallback to client render on hydration mismatch at root', async () => {
3272 let isClient = false;
3273 let suspend = true;
packages/react-dom/src/client/ReactDOMHostConfig.js
+3 -13
@@ -62,7 +62,6 @@ import dangerousStyleValue from '../shared/dangerousStyleValue';
62 import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
63
64 import {
65 - enableClientRenderFallbackOnHydrationMismatch,
65 enableCreateEventHandleAPI,
66 enableScopeAPI,
67 } from 'shared/ReactFeatureFlags';
@@ -1005,10 +1004,7 @@ export function didNotHydrateInstance(
1004 isConcurrentMode: boolean,
1005 ) {
1006 if (__DEV__) {
1008 - if (
1009 - (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
1010 - parentProps[SUPPRESS_HYDRATION_WARNING] !== true
1011 - ) {
1007 + if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
1008 if (instance.nodeType === ELEMENT_NODE) {
1009 warnForDeletedHydratableElement(parentInstance, (instance: any));
1010 } else if (instance.nodeType === COMMENT_NODE) {
@@ -1089,10 +1085,7 @@ export function didNotFindHydratableInstance(
1085 isConcurrentMode: boolean,
1086 ) {
1087 if (__DEV__) {
1092 - if (
1093 - (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
1094 - parentProps[SUPPRESS_HYDRATION_WARNING] !== true
1095 - ) {
1088 + if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
1089 warnForInsertedHydratedElement(parentInstance, type, props);
1090 }
1091 }
@@ -1106,10 +1099,7 @@ export function didNotFindHydratableTextInstance(
1099 isConcurrentMode: boolean,
1100 ) {
1101 if (__DEV__) {
1109 - if (
1110 - (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
1111 - parentProps[SUPPRESS_HYDRATION_WARNING] !== true
1112 - ) {
1102 + if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
1103 warnForInsertedHydratedText(parentInstance, text);
1104 }
1105 }
packages/react-reconciler/src/ReactFiberCompleteWork.new.js
-2
@@ -31,7 +31,6 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
31 import type {OffscreenState} from './ReactFiberOffscreenComponent';
32 import type {Cache} from './ReactFiberCacheComponent.new';
33 import {
34 - enableClientRenderFallbackOnHydrationMismatch,
34 enableSuspenseAvoidThisFallback,
35 enableLegacyHidden,
36 } from 'shared/ReactFeatureFlags';
@@ -1066,7 +1065,6 @@ function completeWork(
1065 const nextState: null | SuspenseState = workInProgress.memoizedState;
1066
1067 if (
1069 - enableClientRenderFallbackOnHydrationMismatch &&
1068 hasUnhydratedTailNodes() &&
1069 (workInProgress.mode & ConcurrentMode) !== NoMode &&
1070 (workInProgress.flags & DidCapture) === NoFlags
packages/react-reconciler/src/ReactFiberCompleteWork.old.js
-2
@@ -31,7 +31,6 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
31 import type {OffscreenState} from './ReactFiberOffscreenComponent';
32 import type {Cache} from './ReactFiberCacheComponent.old';
33 import {
34 - enableClientRenderFallbackOnHydrationMismatch,
34 enableSuspenseAvoidThisFallback,
35 enableLegacyHidden,
36 } from 'shared/ReactFeatureFlags';
@@ -1066,7 +1065,6 @@ function completeWork(
1065 const nextState: null | SuspenseState = workInProgress.memoizedState;
1066
1067 if (
1069 - enableClientRenderFallbackOnHydrationMismatch &&
1068 hasUnhydratedTailNodes() &&
1069 (workInProgress.mode & ConcurrentMode) !== NoMode &&
1070 (workInProgress.flags & DidCapture) === NoFlags
packages/react-reconciler/src/ReactFiberHydrationContext.new.js
-2
@@ -68,7 +68,6 @@ import {
68 didNotFindHydratableTextInstance,
69 didNotFindHydratableSuspenseInstance,
70 } from './ReactFiberHostConfig';
71 -import {enableClientRenderFallbackOnHydrationMismatch} from 'shared/ReactFeatureFlags';
71 import {OffscreenLane} from './ReactFiberLane.new';
72 import {
73 getSuspendedTreeContext,
@@ -378,7 +377,6 @@ function tryHydrate(fiber, nextInstance) {
377
378 function shouldClientRenderOnMismatch(fiber: Fiber) {
379 return (
381 - enableClientRenderFallbackOnHydrationMismatch &&
380 (fiber.mode & ConcurrentMode) !== NoMode &&
381 (fiber.flags & DidCapture) === NoFlags
382 );
packages/react-reconciler/src/ReactFiberHydrationContext.old.js
-2
@@ -68,7 +68,6 @@ import {
68 didNotFindHydratableTextInstance,
69 didNotFindHydratableSuspenseInstance,
70 } from './ReactFiberHostConfig';
71 -import {enableClientRenderFallbackOnHydrationMismatch} from 'shared/ReactFeatureFlags';
71 import {OffscreenLane} from './ReactFiberLane.old';
72 import {
73 getSuspendedTreeContext,
@@ -378,7 +377,6 @@ function tryHydrate(fiber, nextInstance) {
377
378 function shouldClientRenderOnMismatch(fiber: Fiber) {
379 return (
381 - enableClientRenderFallbackOnHydrationMismatch &&
380 (fiber.mode & ConcurrentMode) !== NoMode &&
381 (fiber.flags & DidCapture) === NoFlags
382 );
packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+1 -1
@@ -169,7 +169,7 @@ describe('useMutableSourceHydration', () => {
169 });
170
171 // @gate enableUseMutableSource
172 - // @gate enableClientRenderFallbackOnHydrationMismatch
172 + // @gate enableClientRenderFallbackOnTextMismatch
173 it('should detect a tear before hydrating a component', () => {
174 const source = createSource('one');
175 const mutableSource = createMutableSource(source, param => param.version);
packages/shared/ReactFeatureFlags.js
-1
@@ -41,7 +41,6 @@ export const skipUnmountedBoundaries = true;
41 export const enableSuspenseLayoutEffectSemantics = true;
42
43 // TODO: Finish rolling out in www
44 -export const enableClientRenderFallbackOnHydrationMismatch = true;
44 export const enableClientRenderFallbackOnTextMismatch = true;
45
46 // TODO: Need to review this code one more time before landing
packages/shared/forks/ReactFeatureFlags.native-fb.js
-1
@@ -50,7 +50,6 @@ export const enableSuspenseAvoidThisFallback = false;
50 export const enableSuspenseAvoidThisFallbackFizz = false;
51 export const enableCPUSuspense = true;
52 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
53 -export const enableClientRenderFallbackOnHydrationMismatch = true;
53 export const enableClientRenderFallbackOnTextMismatch = true;
54 export const enableComponentStackLocations = false;
55 export const enableLegacyFBSupport = false;
packages/shared/forks/ReactFeatureFlags.native-oss.js
-1
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
41 export const enableSuspenseAvoidThisFallbackFizz = false;
42 export const enableCPUSuspense = false;
43 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
44 -export const enableClientRenderFallbackOnHydrationMismatch = true;
44 export const enableClientRenderFallbackOnTextMismatch = true;
45 export const enableComponentStackLocations = false;
46 export const enableLegacyFBSupport = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
-1
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
41 export const enableSuspenseAvoidThisFallbackFizz = false;
42 export const enableCPUSuspense = false;
43 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
44 -export const enableClientRenderFallbackOnHydrationMismatch = true;
44 export const enableClientRenderFallbackOnTextMismatch = true;
45 export const enableComponentStackLocations = true;
46 export const enableLegacyFBSupport = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
-1
@@ -51,7 +51,6 @@ export const enableSuspenseAvoidThisFallback = false;
51 export const enableSuspenseAvoidThisFallbackFizz = false;
52 export const enableCPUSuspense = false;
53 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
54 -export const enableClientRenderFallbackOnHydrationMismatch = true;
54 export const enableClientRenderFallbackOnTextMismatch = true;
55 export const enableStrictEffects = false;
56 export const createRootStrictEffectsByDefault = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
-1
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = true;
41 export const enableSuspenseAvoidThisFallbackFizz = false;
42 export const enableCPUSuspense = false;
43 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
44 -export const enableClientRenderFallbackOnHydrationMismatch = true;
44 export const enableClientRenderFallbackOnTextMismatch = true;
45 export const enableComponentStackLocations = true;
46 export const enableLegacyFBSupport = false;
packages/shared/forks/ReactFeatureFlags.testing.js
-1
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
41 export const enableSuspenseAvoidThisFallbackFizz = false;
42 export const enableCPUSuspense = false;
43 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
44 -export const enableClientRenderFallbackOnHydrationMismatch = true;
44 export const enableClientRenderFallbackOnTextMismatch = true;
45 export const enableComponentStackLocations = true;
46 export const enableLegacyFBSupport = false;
packages/shared/forks/ReactFeatureFlags.testing.www.js
-1
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = true;
41 export const enableSuspenseAvoidThisFallbackFizz = false;
42 export const enableCPUSuspense = true;
43 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
44 -export const enableClientRenderFallbackOnHydrationMismatch = true;
44 export const enableClientRenderFallbackOnTextMismatch = true;
45 export const enableComponentStackLocations = true;
46 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
packages/shared/forks/ReactFeatureFlags.www-dynamic.js
-1
@@ -26,7 +26,6 @@ export const enableLazyContextPropagation = __VARIANT__;
26 export const enableSyncDefaultUpdates = __VARIANT__;
27 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
28 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
29 -export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
29 export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
30 export const enableTransitionTracing = __VARIANT__;
31 export const enableSymbolFallbackForWWW = __VARIANT__;
packages/shared/forks/ReactFeatureFlags.www.js
-1
@@ -32,7 +32,6 @@ export const {
32 enableLazyContextPropagation,
33 enableSyncDefaultUpdates,
34 enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
35 - enableClientRenderFallbackOnHydrationMismatch,
35 enableClientRenderFallbackOnTextMismatch,
36 } = dynamicFeatureFlags;
37