-
Notifications
You must be signed in to change notification settings - Fork 46.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Don't mute hydration errors forcing client render #24276
Conversation
@@ -248,9 +248,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => { | |||
]); | |||
}).toErrorDev( | |||
[ | |||
'Expected server HTML to contain a matching <span> in <span>', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These were being covered up, making mismatches with prod behavior hard to debug and fix.
Comparing: 5f7f528...380dc5b Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: (No significant changes) |
@@ -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>.', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have another PR in the works for the diff. It's not coalesced though.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
Outdated
Show resolved
Hide resolved
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
* Don't mute hydration errors forcing client render * Nits
* 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
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. AndsuppressHydrationWarning
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 issuppressHydrationWarning
: 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.