From 0dc4e6663dc875e0f734b1a96b26ebc33902323a Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Wed, 20 Apr 2022 14:09:11 -0400 Subject: [PATCH] Land enableClientRenderFallbackOnHydrationMismatch (#24410) This flag is already enabled on all relevant surfaces. We can remove it. --- .../src/__tests__/ReactDOMFizzServer-test.js | 113 ++---- ...actDOMFizzSuppressHydrationWarning-test.js | 205 ++++------ .../__tests__/ReactDOMHydrationDiff-test.js | 381 ++---------------- ...DOMServerPartialHydration-test.internal.js | 49 +-- .../src/client/ReactDOMHostConfig.js | 16 +- .../src/ReactFiberCompleteWork.new.js | 2 - .../src/ReactFiberCompleteWork.old.js | 2 - .../src/ReactFiberHydrationContext.new.js | 2 - .../src/ReactFiberHydrationContext.old.js | 2 - .../useMutableSourceHydration-test.js | 2 +- packages/shared/ReactFeatureFlags.js | 1 - .../forks/ReactFeatureFlags.native-fb.js | 1 - .../forks/ReactFeatureFlags.native-oss.js | 1 - .../forks/ReactFeatureFlags.test-renderer.js | 1 - .../ReactFeatureFlags.test-renderer.native.js | 1 - .../ReactFeatureFlags.test-renderer.www.js | 1 - .../shared/forks/ReactFeatureFlags.testing.js | 1 - .../forks/ReactFeatureFlags.testing.www.js | 1 - .../forks/ReactFeatureFlags.www-dynamic.js | 1 - .../shared/forks/ReactFeatureFlags.www.js | 1 - 20 files changed, 175 insertions(+), 609 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js index da9097c51d5e3..bc609efcf0d0d 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js @@ -1832,41 +1832,26 @@ describe('ReactDOMFizzServer', () => { }, }); - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) { - expect(() => { - // The first paint switches to client rendering due to mismatch - expect(Scheduler).toFlushUntilNextPaint([ - 'client', - 'Log recoverable error: Hydration failed because the initial ' + - 'UI does not match what was rendered on the server.', - 'Log recoverable error: There was an error while hydrating. ' + - 'Because the error happened outside of a Suspense boundary, the ' + - 'entire root will switch to client rendering.', - ]); - }).toErrorDev( - [ - 'Warning: An error occurred during hydration. The server HTML was replaced with client content in
.', - 'Warning: Expected server HTML to contain a matching
in
.\n' + - ' in div (at **)\n' + - ' in App (at **)', - ], - {withoutStack: 1}, - ); - expect(getVisibleChildren(container)).toEqual(
client
); - } else { - const serverRenderedDiv = container.getElementsByTagName('div')[0]; - // The first paint uses the server snapshot - expect(Scheduler).toFlushUntilNextPaint(['server']); - expect(getVisibleChildren(container)).toEqual(
server
); - // Hydration succeeded - expect(ref.current).toEqual(serverRenderedDiv); - - // Asynchronously we detect that the store has changed on the client, - // and patch up the inconsistency - expect(Scheduler).toFlushUntilNextPaint(['client']); - expect(getVisibleChildren(container)).toEqual(
client
); - expect(ref.current).toEqual(serverRenderedDiv); - } + expect(() => { + // The first paint switches to client rendering due to mismatch + expect(Scheduler).toFlushUntilNextPaint([ + 'client', + 'Log recoverable error: Hydration failed because the initial ' + + 'UI does not match what was rendered on the server.', + 'Log recoverable error: There was an error while hydrating. ' + + 'Because the error happened outside of a Suspense boundary, the ' + + 'entire root will switch to client rendering.', + ]); + }).toErrorDev( + [ + 'Warning: An error occurred during hydration. The server HTML was replaced with client content in
.', + 'Warning: Expected server HTML to contain a matching
in
.\n' + + ' in div (at **)\n' + + ' in App (at **)', + ], + {withoutStack: 1}, + ); + expect(getVisibleChildren(container)).toEqual(
client
); }); // The selector implementation uses the lazy ref initialization pattern @@ -1932,43 +1917,27 @@ describe('ReactDOMFizzServer', () => { }, }); - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) { - // The first paint uses the client due to mismatch forcing client render - expect(() => { - // The first paint switches to client rendering due to mismatch - expect(Scheduler).toFlushUntilNextPaint([ - 'client', - 'Log recoverable error: Hydration failed because the initial ' + - 'UI does not match what was rendered on the server.', - 'Log recoverable error: There was an error while hydrating. ' + - 'Because the error happened outside of a Suspense boundary, the ' + - 'entire root will switch to client rendering.', - ]); - }).toErrorDev( - [ - 'Warning: An error occurred during hydration. The server HTML was replaced with client content', - 'Warning: Expected server HTML to contain a matching
in
.\n' + - ' in div (at **)\n' + - ' in App (at **)', - ], - {withoutStack: 1}, - ); - expect(getVisibleChildren(container)).toEqual(
client
); - } else { - const serverRenderedDiv = container.getElementsByTagName('div')[0]; - - // The first paint uses the server snapshot - expect(Scheduler).toFlushUntilNextPaint(['server']); - expect(getVisibleChildren(container)).toEqual(
server
); - // Hydration succeeded - expect(ref.current).toEqual(serverRenderedDiv); - - // Asynchronously we detect that the store has changed on the client, - // and patch up the inconsistency - expect(Scheduler).toFlushUntilNextPaint(['client']); - expect(getVisibleChildren(container)).toEqual(
client
); - expect(ref.current).toEqual(serverRenderedDiv); - } + // The first paint uses the client due to mismatch forcing client render + expect(() => { + // The first paint switches to client rendering due to mismatch + expect(Scheduler).toFlushUntilNextPaint([ + 'client', + 'Log recoverable error: Hydration failed because the initial ' + + 'UI does not match what was rendered on the server.', + 'Log recoverable error: There was an error while hydrating. ' + + 'Because the error happened outside of a Suspense boundary, the ' + + 'entire root will switch to client rendering.', + ]); + }).toErrorDev( + [ + 'Warning: An error occurred during hydration. The server HTML was replaced with client content', + 'Warning: Expected server HTML to contain a matching
in
.\n' + + ' in div (at **)\n' + + ' in App (at **)', + ], + {withoutStack: 1}, + ); + expect(getVisibleChildren(container)).toEqual(
client
); }); // @gate experimental diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js index 4f65ecf241c80..ac53da3127290 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js @@ -240,23 +240,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => { Scheduler.unstable_yieldValue(error.message); }, }); - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) { - expect(() => { - expect(Scheduler).toFlushAndYield([ - 'Hydration failed because the initial UI does not match what was rendered on the server.', - 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', - ]); - }).toErrorDev( - [ - 'Expected server HTML to contain a matching in ', - 'An error occurred during hydration. The server HTML was replaced with client content in
.', - ], - {withoutStack: 1}, - ); - } else { - // This used to not warn. - expect(Scheduler).toFlushAndYield([]); - } + expect(() => { + expect(Scheduler).toFlushAndYield([ + 'Hydration failed because the initial UI does not match what was rendered on the server.', + 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', + ]); + }).toErrorDev( + [ + 'Expected server HTML to contain a matching in ', + 'An error occurred during hydration. The server HTML was replaced with client content in
.', + ], + {withoutStack: 1}, + ); expect(getVisibleChildren(container)).toEqual(
@@ -329,23 +324,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => { Scheduler.unstable_yieldValue(error.message); }, }); - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) { - expect(() => { - expect(Scheduler).toFlushAndYield([ - 'Hydration failed because the initial UI does not match what was rendered on the server.', - 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', - ]); - }).toErrorDev( - [ - 'Did not expect server HTML to contain the text node "Server" in ', - 'An error occurred during hydration. The server HTML was replaced with client content in
.', - ], - {withoutStack: 1}, - ); - } else { - // This used to not warn. - expect(Scheduler).toFlushAndYield([]); - } + expect(() => { + expect(Scheduler).toFlushAndYield([ + 'Hydration failed because the initial UI does not match what was rendered on the server.', + 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', + ]); + }).toErrorDev( + [ + 'Did not expect server HTML to contain the text node "Server" in ', + 'An error occurred during hydration. The server HTML was replaced with client content in
.', + ], + {withoutStack: 1}, + ); expect(getVisibleChildren(container)).toEqual(
@@ -383,23 +373,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => { Scheduler.unstable_yieldValue(error.message); }, }); - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) { - expect(() => { - expect(Scheduler).toFlushAndYield([ - 'Hydration failed because the initial UI does not match what was rendered on the server.', - 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', - ]); - }).toErrorDev( - [ - 'Expected server HTML to contain a matching text node for "Client" in .', - 'An error occurred during hydration. The server HTML was replaced with client content in
.', - ], - {withoutStack: 1}, - ); - } else { - // This used to not warn. - expect(Scheduler).toFlushAndYield([]); - } + expect(() => { + expect(Scheduler).toFlushAndYield([ + 'Hydration failed because the initial UI does not match what was rendered on the server.', + 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', + ]); + }).toErrorDev( + [ + 'Expected server HTML to contain a matching text node for "Client" in .', + 'An error occurred during hydration. The server HTML was replaced with client content in
.', + ], + {withoutStack: 1}, + ); expect(getVisibleChildren(container)).toEqual(
@@ -440,23 +425,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => { Scheduler.unstable_yieldValue(error.message); }, }); - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) { - expect(() => { - expect(Scheduler).toFlushAndYield([ - 'Hydration failed because the initial UI does not match what was rendered on the server.', - 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', - ]); - }).toErrorDev( - [ - 'Did not expect server HTML to contain the text node "Server" in .', - 'An error occurred during hydration. The server HTML was replaced with client content in
.', - ], - {withoutStack: 1}, - ); - } else { - // This used to not warn. - expect(Scheduler).toFlushAndYield([]); - } + expect(() => { + expect(Scheduler).toFlushAndYield([ + 'Hydration failed because the initial UI does not match what was rendered on the server.', + 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', + ]); + }).toErrorDev( + [ + 'Did not expect server HTML to contain the text node "Server" in .', + 'An error occurred during hydration. The server HTML was replaced with client content in
.', + ], + {withoutStack: 1}, + ); expect(getVisibleChildren(container)).toEqual(
@@ -495,24 +475,19 @@ describe('ReactDOMFizzServerHydrationWarning', () => { Scheduler.unstable_yieldValue(error.message); }, }); - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) { - expect(() => { - expect(Scheduler).toFlushAndYield([ - 'Hydration failed because the initial UI does not match what was rendered on the server.', - 'Hydration failed because the initial UI does not match what was rendered on the server.', - 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', - ]); - }).toErrorDev( - [ - 'Expected server HTML to contain a matching text node for "Client" in .', - 'An error occurred during hydration. The server HTML was replaced with client content in
.', - ], - {withoutStack: 1}, - ); - } else { - // This used to not warn. - expect(Scheduler).toFlushAndYield([]); - } + expect(() => { + expect(Scheduler).toFlushAndYield([ + 'Hydration failed because the initial UI does not match what was rendered on the server.', + 'Hydration failed because the initial UI does not match what was rendered on the server.', + 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', + ]); + }).toErrorDev( + [ + 'Expected server HTML to contain a matching text node for "Client" in .', + 'An error occurred during hydration. The server HTML was replaced with client content in
.', + ], + {withoutStack: 1}, + ); expect(getVisibleChildren(container)).toEqual(
@@ -627,23 +602,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => { Scheduler.unstable_yieldValue(error.message); }, }); - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) { - expect(() => { - expect(Scheduler).toFlushAndYield([ - 'Hydration failed because the initial UI does not match what was rendered on the server.', - 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', - ]); - }).toErrorDev( - [ - 'Expected server HTML to contain a matching

in

.', - 'An error occurred during hydration. The server HTML was replaced with client content in
.', - ], - {withoutStack: 1}, - ); - } else { - // This used to not warn. - expect(Scheduler).toFlushAndYield([]); - } + expect(() => { + expect(Scheduler).toFlushAndYield([ + 'Hydration failed because the initial UI does not match what was rendered on the server.', + 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', + ]); + }).toErrorDev( + [ + 'Expected server HTML to contain a matching

in

.', + 'An error occurred during hydration. The server HTML was replaced with client content in
.', + ], + {withoutStack: 1}, + ); expect(getVisibleChildren(container)).toEqual(

Client and server

@@ -679,23 +649,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => { Scheduler.unstable_yieldValue(error.message); }, }); - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) { - expect(() => { - expect(Scheduler).toFlushAndYield([ - 'Hydration failed because the initial UI does not match what was rendered on the server.', - 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', - ]); - }).toErrorDev( - [ - 'Did not expect server HTML to contain a

in

.', - 'An error occurred during hydration. The server HTML was replaced with client content in
.', - ], - {withoutStack: 1}, - ); - } else { - // This used to not warn. - expect(Scheduler).toFlushAndYield([]); - } + expect(() => { + expect(Scheduler).toFlushAndYield([ + 'Hydration failed because the initial UI does not match what was rendered on the server.', + 'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.', + ]); + }).toErrorDev( + [ + 'Did not expect server HTML to contain a

in

.', + 'An error occurred during hydration. The server HTML was replaced with client content in
.', + ], + {withoutStack: 1}, + ); expect(getVisibleChildren(container)).toEqual(

Client and server

diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js index a6a1a99890388..9237493c6dcec 100644 --- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js @@ -83,7 +83,7 @@ describe('ReactDOMServerHydration', () => {
); } - if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) { + if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) { expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` Array [ "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\" @@ -262,10 +262,7 @@ describe('ReactDOMServerHydration', () => {
); } - if ( - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch) - ) { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` Array [ "Warning: Expected server HTML to contain a matching
in
. in main (at **) @@ -276,16 +273,6 @@ describe('ReactDOMServerHydration', () => { "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]", ] `); - } else { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ - "Warning: Expected server HTML to contain a matching
in
. - in main (at **) - in div (at **) - in Mismatch (at **)", - ] - `); - } }); // @gate __DEV__ @@ -299,10 +286,7 @@ describe('ReactDOMServerHydration', () => {
); } - if ( - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch) - ) { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` Array [ "Warning: Expected server HTML to contain a matching
in
. in header (at **) @@ -313,16 +297,6 @@ describe('ReactDOMServerHydration', () => { "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]", ] `); - } else { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ - "Warning: Expected server HTML to contain a matching
in
. - in header (at **) - in div (at **) - in Mismatch (at **)", - ] - `); - } }); // @gate __DEV__ @@ -336,10 +310,7 @@ describe('ReactDOMServerHydration', () => {
); } - if ( - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch) - ) { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` Array [ "Warning: Expected server HTML to contain a matching
in
. in main (at **) @@ -350,16 +321,6 @@ describe('ReactDOMServerHydration', () => { "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]", ] `); - } else { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` - Array [ - "Warning: Expected server HTML to contain a matching
in
. - in main (at **) - in div (at **) - in Mismatch (at **)", - ] - `); - } }); // @gate __DEV__ @@ -373,10 +334,7 @@ describe('ReactDOMServerHydration', () => {
); } - if ( - gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch) - ) { - expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` + expect(testMismatch(Mismatch)).toMatchInlineSnapshot(` Array [ "Warning: Expected server HTML to contain a matching