Skip to content

Commit 327e4a1

Browse files
acdliteacdlite
committed
[Follow-up] Land enableClientRenderFallbackOnTextMismatch
This was meant to land in the previous commit; forgot to stage the changes when I was rebasing.
1 parent 29c2c63 commit 327e4a1

15 files changed

Lines changed: 10 additions & 51 deletions

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

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3535,7 +3535,7 @@ describe('ReactDOMFizzServer', () => {
35353535
);
35363536
});
35373537

3538-
// @gate experimental && enableClientRenderFallbackOnTextMismatch
3538+
// @gate experimental
35393539
it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {
35403540
const makeApp = () => {
35413541
let resolve, resolved;
@@ -3625,7 +3625,7 @@ describe('ReactDOMFizzServer', () => {
36253625
expect(Scheduler).toFlushAndYield([]);
36263626
});
36273627

3628-
// @gate experimental && enableClientRenderFallbackOnTextMismatch
3628+
// @gate experimental
36293629
it('only warns once on hydration mismatch while within a suspense boundary', async () => {
36303630
const originalConsoleError = console.error;
36313631
const mockError = jest.fn();
@@ -4715,15 +4715,11 @@ describe('ReactDOMFizzServer', () => {
47154715
},
47164716
});
47174717
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+
]);
47274723
expect(getVisibleChildren(container)).toEqual(
47284724
<title>{['hello1', 'hello2']}</title>,
47294725
);

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

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,7 @@ describe('ReactDOMServerHydration', () => {
8686
</div>
8787
);
8888
}
89-
if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
90-
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
89+
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
9190
Array [
9291
"Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
9392
in main (at **)
@@ -98,16 +97,6 @@ describe('ReactDOMServerHydration', () => {
9897
"Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
9998
]
10099
`);
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-
}
111100
});
112101

113102
// @gate __DEV__
@@ -357,8 +346,7 @@ describe('ReactDOMServerHydration', () => {
357346
function Mismatch({isClient}) {
358347
return <div className="parent">{isClient && 'only'}</div>;
359348
}
360-
if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
361-
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
349+
expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
362350
Array [
363351
"Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
364352
in div (at **)
@@ -368,15 +356,6 @@ describe('ReactDOMServerHydration', () => {
368356
"Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
369357
]
370358
`);
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-
}
380359
});
381360

382361
// @gate __DEV__

‎packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3416,7 +3416,6 @@ describe('ReactDOMServerPartialHydration', () => {
34163416
);
34173417
});
34183418

3419-
// @gate enableClientRenderFallbackOnTextMismatch
34203419
it("falls back to client rendering when there's a text mismatch (direct text child)", async () => {
34213420
function DirectTextChild({text}) {
34223421
return <div>{text}</div>;
@@ -3448,7 +3447,6 @@ describe('ReactDOMServerPartialHydration', () => {
34483447
]);
34493448
});
34503449

3451-
// @gate enableClientRenderFallbackOnTextMismatch
34523450
it("falls back to client rendering when there's a text mismatch (text child with siblings)", async () => {
34533451
function Sibling() {
34543452
return 'Sibling';

‎packages/react-dom/src/client/ReactDOMComponent.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
7272
import {
7373
enableTrustedTypesIntegration,
7474
enableCustomElementPropertySupport,
75-
enableClientRenderFallbackOnTextMismatch,
7675
} from 'shared/ReactFeatureFlags';
7776
import {
7877
mediaEventTypes,
@@ -250,7 +249,7 @@ export function checkForUnmatchedText(
250249
}
251250
}
252251

253-
if (isConcurrentMode && enableClientRenderFallbackOnTextMismatch) {
252+
if (isConcurrentMode) {
254253
// In concurrent roots, we throw when there's a text mismatch and revert to
255254
// client rendering, up to the nearest Suspense boundary.
256255
throw new Error('Text content does not match server-rendered HTML.');

‎packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,6 @@ describe('useMutableSourceHydration', () => {
169169
});
170170

171171
// @gate enableUseMutableSource
172-
// @gate enableClientRenderFallbackOnTextMismatch
173172
it('should detect a tear before hydrating a component', () => {
174173
const source = createSource('one');
175174
const mutableSource = createMutableSource(source, param => param.version);

‎packages/shared/ReactFeatureFlags.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,6 @@ export const enableSymbolFallbackForWWW = false;
3131
// internal tests need to be updated. The open source behavior is correct.
3232
export const skipUnmountedBoundaries = true;
3333

34-
// TODO: Finish rolling out in www
35-
export const enableClientRenderFallbackOnTextMismatch = true;
36-
3734
// TODO: Need to review this code one more time before landing
3835
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
3936

‎packages/shared/forks/ReactFeatureFlags.native-fb.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ export const enableSuspenseAvoidThisFallback = false;
5151
export const enableSuspenseAvoidThisFallbackFizz = false;
5252
export const enableCPUSuspense = true;
5353
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
54-
export const enableClientRenderFallbackOnTextMismatch = true;
5554
export const enableComponentStackLocations = false;
5655
export const enableLegacyFBSupport = false;
5756
export const enableFilterEmptyStringAttributesDOM = false;

‎packages/shared/forks/ReactFeatureFlags.native-oss.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
4141
export const enableSuspenseAvoidThisFallbackFizz = false;
4242
export const enableCPUSuspense = false;
4343
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
44-
export const enableClientRenderFallbackOnTextMismatch = true;
4544
export const enableComponentStackLocations = false;
4645
export const enableLegacyFBSupport = false;
4746
export const enableFilterEmptyStringAttributesDOM = false;

‎packages/shared/forks/ReactFeatureFlags.test-renderer.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
4141
export const enableSuspenseAvoidThisFallbackFizz = false;
4242
export const enableCPUSuspense = false;
4343
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
44-
export const enableClientRenderFallbackOnTextMismatch = true;
4544
export const enableComponentStackLocations = true;
4645
export const enableLegacyFBSupport = false;
4746
export const enableFilterEmptyStringAttributesDOM = false;

‎packages/shared/forks/ReactFeatureFlags.test-renderer.native.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ export const enableSuspenseAvoidThisFallback = false;
5050
export const enableSuspenseAvoidThisFallbackFizz = false;
5151
export const enableCPUSuspense = false;
5252
export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
53-
export const enableClientRenderFallbackOnTextMismatch = true;
5453
export const enableStrictEffects = false;
5554
export const createRootStrictEffectsByDefault = false;
5655
export const enableUseRefAccessWarning = false;

0 commit comments

Comments
 (0)