Don't mute hydration errors forcing client render #24276

gaearon · 2022-04-05T00:15:50Z

tldr: suppressHydrationWarning shouldn't mute warnings that force a client render.

Before 18 + createRoot, all hydration mismatches except prop mismatches were patched up. Prop mismatches were warned about but not patched up. And suppressHydrationWarning on the parent was a universal way to suppress messages — about all kinds of mismatches.

In 18 + createRoot, mismatches always revert to a clean render up to the closest <Suspense> above except for one case. The exception is suppressHydrationWarning: it enables patching for text mismatches.

However, this means that you can't debug other kinds of mismatches inside suppressHydrationWarning. Insertions and deletions now revert to client render but we still mute the warning because in 17 it was harmless to mute. We've introduced limited production behavior for the prop, but we haven't adjusted the warning messages themselves to show for the case where mismatches are not patched up.

This fixes the issue.

gaearon · 2022-04-05T00:16:44Z

packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js

@@ -248,9 +248,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
        ]);
      }).toErrorDev(
        [
+          'Expected server HTML to contain a matching <span> in <span>',


These were being covered up, making mismatches with prod behavior hard to debug and fix.

sizebot · 2022-04-05T00:19:46Z

Comparing: 5f7f528...380dc5b

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	131.39 kB	131.40 kB	=	41.99 kB	41.98 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	136.44 kB	136.45 kB	=	43.43 kB	43.43 kB
facebook-www/ReactDOM-prod.classic.js	+0.03%	432.94 kB	433.07 kB	+0.01%	79.59 kB	79.60 kB
facebook-www/ReactDOM-prod.modern.js	+0.03%	417.94 kB	418.07 kB	+0.01%	77.23 kB	77.24 kB
facebook-www/ReactDOMForked-prod.classic.js	+0.03%	432.94 kB	433.07 kB	+0.01%	79.60 kB	79.61 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 380dc5b

sebmarkbage · 2022-04-05T00:28:29Z

packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js

@@ -248,9 +248,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
        ]);
      }).toErrorDev(
        [
+          'Expected server HTML to contain a matching <span> in <span>',
          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',


You still have these though. Isn't it better to have the context here for the ones we check in prod anyway? Is it worth having both? Is it confusing that there are two with subtly different timing?

Maybe it would make more sense to have the DEV only error if it was part of a larger diff across multiple mismatches which also included attributes.

In other words, should we just move the insert/deletion error messages to the onRecoverableError? Perhaps batching them up if there are multiple. Oops, now you just got nerd sniped into making a larger diff view.

I have another PR in the works for the diff. It's not coalesced though.

But in either case I think we should fix up the inconsistency first. I.e. your concerns don't seem related to this PR per se, it just aligns the behavior for suppressHydration ones with the rest.

packages/react-reconciler/src/ReactFiberHydrationContext.old.js

packages/react-dom/src/client/ReactDOMHostConfig.js

Summary: This sync includes the following changes: - **[e8f4a6653](facebook/react@e8f4a6653 )**: Fix import in example //<dan>// - **[bb49abea2](facebook/react@bb49abea2 )**: Update some READMEs ([#24290](facebook/react#24290)) //<dan>// - **[4bc465a16](facebook/react@4bc465a16 )**: Rename Controls to PipeableStream ([#24286](facebook/react#24286)) //<Sebastian Markbåge>// - **[ece5295e5](facebook/react@ece5295e5 )**: Remove unnecessary flag check ([#24284](facebook/react#24284)) //<zhoulixiang>// - **[9ededef94](facebook/react@9ededef94 )**: Don't mute hydration errors forcing client render ([#24276](facebook/react#24276)) //<dan>// - **[985272e26](facebook/react@985272e26 )**: Fix name mismatch in react-reconciler custom build. ([#24272](facebook/react#24272)) //<Hikari Hayashi>// - **[b8cfda15e](facebook/react@b8cfda15e )**: changed Transitions type to Array<Transition> ([#24249](facebook/react#24249)) //<Luna Ruan>// - **[c89a15c71](facebook/react@c89a15c71 )**: [ReactDebugTools] wrap uncaught error from rendering user's component ([#24216](facebook/react#24216)) //<Mengdi "Monday" Chen>// - **[ebd7ff65b](facebook/react@ebd7ff65b )**: Don't recreate the same fallback on the client if hydrating suspends ([#24236](facebook/react#24236)) //<dan>// - **[aa05e7315](facebook/react@aa05e7315 )**: Add 4.4.0 release to eslint rules CHANGELOG ([#24234](facebook/react#24234)) //<Brian Vaughn>// - **[7e3121e1c](facebook/react@7e3121e1c )**: Remove unstable_createMutableSource from experimental build ([#24209](facebook/react#24209)) //<Sebastian Silbermann>// - **[0415b18a1](facebook/react@0415b18a1 )**: [ReactDebugTools] add custom error type for future new hooks ([#24168](facebook/react#24168)) //<Mengdi "Monday" Chen>// Changelog: [General][Changed] - React Native sync for revisions 34aa5cf...e8f4a66 jest_e2e[run_all_tests] Reviewed By: kacieb Differential Revision: D35581059 fbshipit-source-id: ee031dfc49b1ef663b601f33f3f3f6c5a804971e

* Don't mute hydration errors forcing client render * Nits

Summary: This sync includes the following changes: - **[e8f4a6653](facebook/react@e8f4a6653 )**: Fix import in example //<dan>// - **[bb49abea2](facebook/react@bb49abea2 )**: Update some READMEs ([facebook#24290](facebook/react#24290)) //<dan>// - **[4bc465a16](facebook/react@4bc465a16 )**: Rename Controls to PipeableStream ([facebook#24286](facebook/react#24286)) //<Sebastian Markbåge>// - **[ece5295e5](facebook/react@ece5295e5 )**: Remove unnecessary flag check ([facebook#24284](facebook/react#24284)) //<zhoulixiang>// - **[9ededef94](facebook/react@9ededef94 )**: Don't mute hydration errors forcing client render ([facebook#24276](facebook/react#24276)) //<dan>// - **[985272e26](facebook/react@985272e26 )**: Fix name mismatch in react-reconciler custom build. ([facebook#24272](facebook/react#24272)) //<Hikari Hayashi>// - **[b8cfda15e](facebook/react@b8cfda15e )**: changed Transitions type to Array<Transition> ([facebook#24249](facebook/react#24249)) //<Luna Ruan>// - **[c89a15c71](facebook/react@c89a15c71 )**: [ReactDebugTools] wrap uncaught error from rendering user's component ([facebook#24216](facebook/react#24216)) //<Mengdi "Monday" Chen>// - **[ebd7ff65b](facebook/react@ebd7ff65b )**: Don't recreate the same fallback on the client if hydrating suspends ([facebook#24236](facebook/react#24236)) //<dan>// - **[aa05e7315](facebook/react@aa05e7315 )**: Add 4.4.0 release to eslint rules CHANGELOG ([facebook#24234](facebook/react#24234)) //<Brian Vaughn>// - **[7e3121e1c](facebook/react@7e3121e1c )**: Remove unstable_createMutableSource from experimental build ([facebook#24209](facebook/react#24209)) //<Sebastian Silbermann>// - **[0415b18a1](facebook/react@0415b18a1 )**: [ReactDebugTools] add custom error type for future new hooks ([facebook#24168](facebook/react#24168)) //<Mengdi "Monday" Chen>// Changelog: [General][Changed] - React Native sync for revisions 34aa5cf...e8f4a66 jest_e2e[run_all_tests] Reviewed By: kacieb Differential Revision: D35581059 fbshipit-source-id: ee031dfc49b1ef663b601f33f3f3f6c5a804971e

## Overview Branched off #28130 ## Why In #24276 we changed the new root behavior to error when a client-render is forced for certain cases, so these now expect a mismatch even though they're using `suppressHydrationWarning`.

Don't mute hydration errors forcing client render

ca0cdce

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Apr 5, 2022

gaearon requested review from acdlite and sebmarkbage April 5, 2022 00:16

gaearon commented Apr 5, 2022

View reviewed changes

sebmarkbage reviewed Apr 5, 2022

View reviewed changes

packages/react-reconciler/src/ReactFiberHydrationContext.old.js Outdated Show resolved Hide resolved

sebmarkbage reviewed Apr 5, 2022

View reviewed changes

packages/react-dom/src/client/ReactDOMHostConfig.js Outdated Show resolved Hide resolved

sebmarkbage approved these changes Apr 5, 2022

View reviewed changes

Nits

380dc5b

gaearon merged commit 9ededef into facebook:main Apr 5, 2022

rickhanlonii pushed a commit that referenced this pull request Apr 13, 2022

Don't mute hydration errors forcing client render (#24276)

65808b8

* Don't mute hydration errors forcing client render * Nits

rickhanlonii pushed a commit that referenced this pull request Apr 14, 2022

Don't mute hydration errors forcing client render (#24276)

d404d96

* Don't mute hydration errors forcing client render * Nits

zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022

Don't mute hydration errors forcing client render (facebook#24276)

82d077a

* Don't mute hydration errors forcing client render * Nits

cssecautomation mentioned this pull request Mar 3, 2023

[Snyk] Upgrade: react, react-dom OutSystems/ReactView#126

Open

cssecautomation mentioned this pull request Mar 11, 2023

[Snyk] Upgrade: react, react-dom OutSystems/ReactView#136

Open

rickhanlonii mentioned this pull request Jan 28, 2024

Add ReactDOMClient to ServerIntegrationReconnecting #28136

Merged

This was referenced Nov 2, 2024

[Snyk] Upgrade react from 17.0.2 to 18.3.1 jakejack13/JayJay-Star#9

Merged

[Snyk] Upgrade react-dom from 17.0.2 to 18.3.1 jakejack13/JayJay-Star#10

Closed

This was referenced Nov 4, 2024

[Snyk] Upgrade react-dom from 18.0.0 to 18.3.1 Exkaleburx/bitcore#1127

Open

[Snyk] Upgrade react from 18.1.0 to 18.3.1 Exkaleburx/bitcore#1128

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Don't mute hydration errors forcing client render #24276

Don't mute hydration errors forcing client render #24276

gaearon commented Apr 5, 2022 •

edited

Loading

gaearon Apr 5, 2022

sizebot commented Apr 5, 2022 •

edited

Loading

sebmarkbage Apr 5, 2022 •

edited

Loading

sebmarkbage Apr 5, 2022 •

edited

Loading

gaearon Apr 5, 2022

gaearon Apr 5, 2022

Don't mute hydration errors forcing client render #24276

Don't mute hydration errors forcing client render #24276

Conversation

gaearon commented Apr 5, 2022 • edited Loading

gaearon Apr 5, 2022

Choose a reason for hiding this comment

sizebot commented Apr 5, 2022 • edited Loading

Critical size changes

Significant size changes

sebmarkbage Apr 5, 2022 • edited Loading

Choose a reason for hiding this comment

sebmarkbage Apr 5, 2022 • edited Loading

Choose a reason for hiding this comment

gaearon Apr 5, 2022

Choose a reason for hiding this comment

gaearon Apr 5, 2022

Choose a reason for hiding this comment

gaearon commented Apr 5, 2022 •

edited

Loading

sizebot commented Apr 5, 2022 •

edited

Loading

sebmarkbage Apr 5, 2022 •

edited

Loading

sebmarkbage Apr 5, 2022 •

edited

Loading