[Follow-up] Land enableClientRenderFallbackOnTextMismatch
This was meant to land in the previous commit; forgot to stage the changes when I was rebasing.
Andrew Clark committed
Jun 12, 2022 at 18:12 UTC
327e4a1f96fbb874001b17684fbb073046a84938
15 files changed
+10
-51
packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+7
-11
@@ -3535,7 +3535,7 @@ describe('ReactDOMFizzServer', () => {
3535
);
3536
});
3537
3538
- // @gate experimental && enableClientRenderFallbackOnTextMismatch
3538
+ // @gate experimental
3539
it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {
3540
const makeApp = () => {
3541
let resolve, resolved;
@@ -3625,7 +3625,7 @@ describe('ReactDOMFizzServer', () => {
3625
expect(Scheduler).toFlushAndYield([]);
3626
});
3627
3628
- // @gate experimental && enableClientRenderFallbackOnTextMismatch
3628
+ // @gate experimental
3629
it('only warns once on hydration mismatch while within a suspense boundary', async () => {
3630
const originalConsoleError = console.error;
3631
const mockError = jest.fn();
@@ -4715,15 +4715,11 @@ describe('ReactDOMFizzServer', () => {
4715
},
4716
});
4717
expect(Scheduler).toFlushAndYield([]);
4718
- expect(errors).toEqual(
4719
- [
4720
- gate(flags => flags.enableClientRenderFallbackOnTextMismatch)
4721
- ? 'Text content does not match server-rendered HTML.'
4722
- : null,
4723
- 'Hydration failed because the initial UI does not match what was rendered on the server.',
4724
- 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
4725
- ].filter(Boolean),
4726
- );
4718
+ expect(errors).toEqual([
4719
+ 'Text content does not match server-rendered HTML.',
4720
+ 'Hydration failed because the initial UI does not match what was rendered on the server.',
4721
+ 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
4722
+ ]);
4723
expect(getVisibleChildren(container)).toEqual(
4724
<title>{['hello1', 'hello2']}</title>,
4725
);
packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+2
-23
@@ -86,8 +86,7 @@ describe('ReactDOMServerHydration', () => {
86
</div>
87
);
88
}
89
- if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
90
- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
89
+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
90
Array [
91
"Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
92
in main (at **)
@@ -98,16 +97,6 @@ describe('ReactDOMServerHydration', () => {
97
"Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
98
]
99
`);
101
- } else {
102
- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
103
- Array [
104
- "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
105
- in main (at **)
106
- in div (at **)
107
- in Mismatch (at **)",
108
- ]
109
- `);
110
- }
100
});
101
102
// @gate __DEV__
@@ -357,8 +346,7 @@ describe('ReactDOMServerHydration', () => {
346
function Mismatch({isClient}) {
347
return <div className="parent">{isClient && 'only'}</div>;
348
}
360
- if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
361
- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
349
+ expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
350
Array [
351
"Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
352
in div (at **)
@@ -368,15 +356,6 @@ describe('ReactDOMServerHydration', () => {
356
"Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
357
]
358
`);
371
- } else {
372
- expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
373
- Array [
374
- "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
375
- in div (at **)
376
- in Mismatch (at **)",
377
- ]
378
- `);
379
- }
359
});
360
361
// @gate __DEV__
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
-2
@@ -3416,7 +3416,6 @@ describe('ReactDOMServerPartialHydration', () => {
3416
);
3417
});
3418
3419
- // @gate enableClientRenderFallbackOnTextMismatch
3419
it("falls back to client rendering when there's a text mismatch (direct text child)", async () => {
3420
function DirectTextChild({text}) {
3421
return <div>{text}</div>;
@@ -3448,7 +3447,6 @@ describe('ReactDOMServerPartialHydration', () => {
3447
]);
3448
});
3449
3451
- // @gate enableClientRenderFallbackOnTextMismatch
3450
it("falls back to client rendering when there's a text mismatch (text child with siblings)", async () => {
3451
function Sibling() {
3452
return 'Sibling';
packages/react-dom/src/client/ReactDOMComponent.js
+1
-2
@@ -72,7 +72,6 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
72
import {
73
enableTrustedTypesIntegration,
74
enableCustomElementPropertySupport,
75
- enableClientRenderFallbackOnTextMismatch,
75
} from 'shared/ReactFeatureFlags';
76
import {
77
mediaEventTypes,
@@ -250,7 +249,7 @@ export function checkForUnmatchedText(
249
}
250
}
251
253
- if (isConcurrentMode && enableClientRenderFallbackOnTextMismatch) {
252
+ if (isConcurrentMode) {
253
// In concurrent roots, we throw when there's a text mismatch and revert to
254
// client rendering, up to the nearest Suspense boundary.
255
throw new Error('Text content does not match server-rendered HTML.');
packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
-1
@@ -169,7 +169,6 @@ describe('useMutableSourceHydration', () => {
169
});
170
171
// @gate enableUseMutableSource
172
- // @gate enableClientRenderFallbackOnTextMismatch
172
it('should detect a tear before hydrating a component', () => {
173
const source = createSource('one');
174
const mutableSource = createMutableSource(source, param => param.version);
packages/shared/ReactFeatureFlags.js
-3
@@ -31,9 +31,6 @@ export const enableSymbolFallbackForWWW = false;
31
// internal tests need to be updated. The open source behavior is correct.
32
export const skipUnmountedBoundaries = true;
33
34
-// TODO: Finish rolling out in www
35
-export const enableClientRenderFallbackOnTextMismatch = true;
36
-
34
// TODO: Need to review this code one more time before landing
35
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
36
packages/shared/forks/ReactFeatureFlags.native-fb.js
-1
@@ -51,7 +51,6 @@ export const enableSuspenseAvoidThisFallback = false;
51
export const enableSuspenseAvoidThisFallbackFizz = false;
52
export const enableCPUSuspense = true;
53
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
54
-export const enableClientRenderFallbackOnTextMismatch = true;
54
export const enableComponentStackLocations = false;
55
export const enableLegacyFBSupport = false;
56
export const enableFilterEmptyStringAttributesDOM = 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 enableClientRenderFallbackOnTextMismatch = true;
44
export const enableComponentStackLocations = false;
45
export const enableLegacyFBSupport = false;
46
export const enableFilterEmptyStringAttributesDOM = 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 enableClientRenderFallbackOnTextMismatch = true;
44
export const enableComponentStackLocations = true;
45
export const enableLegacyFBSupport = false;
46
export const enableFilterEmptyStringAttributesDOM = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
-1
@@ -50,7 +50,6 @@ export const enableSuspenseAvoidThisFallback = false;
50
export const enableSuspenseAvoidThisFallbackFizz = false;
51
export const enableCPUSuspense = false;
52
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
53
-export const enableClientRenderFallbackOnTextMismatch = true;
53
export const enableStrictEffects = false;
54
export const createRootStrictEffectsByDefault = false;
55
export const enableUseRefAccessWarning = 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 enableClientRenderFallbackOnTextMismatch = true;
44
export const enableComponentStackLocations = true;
45
export const enableLegacyFBSupport = false;
46
export const enableFilterEmptyStringAttributesDOM = 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 enableClientRenderFallbackOnTextMismatch = true;
44
export const enableComponentStackLocations = true;
45
export const enableLegacyFBSupport = false;
46
export const enableFilterEmptyStringAttributesDOM = 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 enableClientRenderFallbackOnTextMismatch = true;
44
export const enableComponentStackLocations = true;
45
export const enableLegacyFBSupport = !__EXPERIMENTAL__;
46
export const enableFilterEmptyStringAttributesDOM = false;
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 enableClientRenderFallbackOnTextMismatch = __VARIANT__;
29
export const enableTransitionTracing = __VARIANT__;
30
export const enableSymbolFallbackForWWW = __VARIANT__;
31
// Enable this flag to help with concurrent mode debugging.
packages/shared/forks/ReactFeatureFlags.www.js
-1
@@ -32,7 +32,6 @@ export const {
32
enableLazyContextPropagation,
33
enableSyncDefaultUpdates,
34
enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
35
- enableClientRenderFallbackOnTextMismatch,
35
} = dynamicFeatureFlags;
36
37
// On WWW, __EXPERIMENTAL__ is used for a new modern build.