Flag for text hydration mismatch (#24107)
* flag for text hydration mismatch * rm unused import
salazarm committed
Mar 16, 2022 at 10:12 UTC
ef23a9ee8114c939946ceff91becc13415d99d5a
12 files changed
+14
-4
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+2
-2
@@ -3376,7 +3376,7 @@ describe('ReactDOMServerPartialHydration', () => {
3376
);
3377
});
3378
3379
- // @gate enableClientRenderFallbackOnHydrationMismatch
3379
+ // @gate enableClientRenderFallbackOnTextMismatch
3380
it("falls back to client rendering when there's a text mismatch (direct text child)", async () => {
3381
function DirectTextChild({text}) {
3382
return <div>{text}</div>;
@@ -3408,7 +3408,7 @@ describe('ReactDOMServerPartialHydration', () => {
3408
]);
3409
});
3410
3411
- // @gate enableClientRenderFallbackOnHydrationMismatch
3411
+ // @gate enableClientRenderFallbackOnTextMismatch
3412
it("falls back to client rendering when there's a text mismatch (text child with siblings)", async () => {
3413
function Sibling() {
3414
return 'Sibling';
packages/react-dom/src/client/ReactDOMComponent.js
+2
-2
@@ -72,7 +72,7 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
72
import {
73
enableTrustedTypesIntegration,
74
enableCustomElementPropertySupport,
75
- enableClientRenderFallbackOnHydrationMismatch,
75
+ enableClientRenderFallbackOnTextMismatch,
76
} from 'shared/ReactFeatureFlags';
77
import {
78
mediaEventTypes,
@@ -251,7 +251,7 @@ export function checkForUnmatchedText(
251
}
252
}
253
254
- if (isConcurrentMode && enableClientRenderFallbackOnHydrationMismatch) {
254
+ if (isConcurrentMode && enableClientRenderFallbackOnTextMismatch) {
255
// In concurrent roots, we throw when there's a text mismatch and revert to
256
// client rendering, up to the nearest Suspense boundary.
257
throw new Error('Text content does not match server-rendered HTML.');
packages/shared/ReactFeatureFlags.js
+1
@@ -42,6 +42,7 @@ export const enableSuspenseLayoutEffectSemantics = true;
42
43
// TODO: Finish rolling out in www
44
export const enableClientRenderFallbackOnHydrationMismatch = true;
45
+export const enableClientRenderFallbackOnTextMismatch = true;
46
47
// TODO: Need to review this code one more time before landing
48
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
@@ -53,6 +53,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
53
export const enableCPUSuspense = true;
54
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
55
export const enableClientRenderFallbackOnHydrationMismatch = true;
56
+export const enableClientRenderFallbackOnTextMismatch = true;
57
export const enableComponentStackLocations = false;
58
export const enableLegacyFBSupport = false;
59
export const enableFilterEmptyStringAttributesDOM = false;
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
@@ -44,6 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
44
export const enableCPUSuspense = false;
45
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
46
export const enableClientRenderFallbackOnHydrationMismatch = true;
47
+export const enableClientRenderFallbackOnTextMismatch = true;
48
export const enableComponentStackLocations = false;
49
export const enableLegacyFBSupport = false;
50
export const enableFilterEmptyStringAttributesDOM = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
@@ -44,6 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
44
export const enableCPUSuspense = false;
45
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
46
export const enableClientRenderFallbackOnHydrationMismatch = true;
47
+export const enableClientRenderFallbackOnTextMismatch = true;
48
export const enableComponentStackLocations = true;
49
export const enableLegacyFBSupport = false;
50
export const enableFilterEmptyStringAttributesDOM = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+1
@@ -54,6 +54,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
54
export const enableCPUSuspense = false;
55
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
56
export const enableClientRenderFallbackOnHydrationMismatch = true;
57
+export const enableClientRenderFallbackOnTextMismatch = true;
58
export const enableStrictEffects = false;
59
export const createRootStrictEffectsByDefault = false;
60
export const enableUseRefAccessWarning = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
@@ -44,6 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
44
export const enableCPUSuspense = false;
45
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
46
export const enableClientRenderFallbackOnHydrationMismatch = true;
47
+export const enableClientRenderFallbackOnTextMismatch = true;
48
export const enableComponentStackLocations = true;
49
export const enableLegacyFBSupport = false;
50
export const enableFilterEmptyStringAttributesDOM = false;
packages/shared/forks/ReactFeatureFlags.testing.js
+1
@@ -44,6 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
44
export const enableCPUSuspense = false;
45
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
46
export const enableClientRenderFallbackOnHydrationMismatch = true;
47
+export const enableClientRenderFallbackOnTextMismatch = true;
48
export const enableComponentStackLocations = true;
49
export const enableLegacyFBSupport = false;
50
export const enableFilterEmptyStringAttributesDOM = false;
packages/shared/forks/ReactFeatureFlags.testing.www.js
+1
@@ -44,6 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
44
export const enableCPUSuspense = true;
45
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
46
export const enableClientRenderFallbackOnHydrationMismatch = true;
47
+export const enableClientRenderFallbackOnTextMismatch = true;
48
export const enableComponentStackLocations = true;
49
export const enableLegacyFBSupport = !__EXPERIMENTAL__;
50
export const enableFilterEmptyStringAttributesDOM = false;
packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+1
@@ -27,6 +27,7 @@ export const enableSyncDefaultUpdates = __VARIANT__;
27
export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
28
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
29
export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
30
+export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
31
export const enableTransitionTracing = __VARIANT__;
32
33
// Enable this flag to help with concurrent mode debugging.
packages/shared/forks/ReactFeatureFlags.www.js
+1
@@ -33,6 +33,7 @@ export const {
33
enableSyncDefaultUpdates,
34
enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
35
enableClientRenderFallbackOnHydrationMismatch,
36
+ enableClientRenderFallbackOnTextMismatch,
37
} = dynamicFeatureFlags;
38
39
// On WWW, __EXPERIMENTAL__ is used for a new modern build.