Skip to content
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

Fix suppressHydrationWarning not working in production #24271

Merged
merged 1 commit into from
Apr 4, 2022

Conversation

gaearon
Copy link
Collaborator

@gaearon gaearon commented Apr 4, 2022

Fixes #24270.

We intended suppressHydrationWarning to be checked in production as an escape hatch in 18 and prevent mismatch errors. However, the logic mistakingly only read it in development mode. I've added regression tests for the lines I've changed.

I've noticed we don't patch up dangerouslySetInnerHTML like we do text content. (Although we do ignore its mismatch in production.) I left that as is, but added a test verifying the current behavior.

@@ -875,7 +874,6 @@ export function diffHydratedProperties(
let extraAttributeNames: Set<string>;

if (__DEV__) {
suppressHydrationWarning = rawProps[SUPPRESS_HYDRATION_WARNING] === true;
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved inline since we don't want to hit the property checks for every props object.

@@ -1028,7 +1026,7 @@ export function diffHydratedProperties(
isCustomComponentTag && enableCustomElementPropertySupport
? null
: getPropertyInfo(propKey);
if (suppressHydrationWarning) {
if (rawProps[SUPPRESS_HYDRATION_WARNING] === true) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This runs repeatedly but this part is DEV-only.

@@ -132,10 +132,7 @@ type SelectionInformation = {|
selectionRange: mixed,
|};

let SUPPRESS_HYDRATION_WARNING;
if (__DEV__) {
SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added a regression test for this one as well.

@gaearon gaearon requested review from acdlite and sebmarkbage April 4, 2022 02:08
@sizebot
Copy link

sizebot commented Apr 4, 2022

Comparing: c89a15c...98de7f6

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 +0.06% 131.30 kB 131.39 kB +0.04% 41.97 kB 41.99 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.06% 136.36 kB 136.44 kB +0.03% 43.42 kB 43.43 kB
facebook-www/ReactDOM-prod.classic.js +0.04% 432.75 kB 432.94 kB +0.02% 79.58 kB 79.59 kB
facebook-www/ReactDOM-prod.modern.js +0.05% 417.75 kB 417.94 kB +0.02% 77.21 kB 77.23 kB
facebook-www/ReactDOMForked-prod.classic.js +0.04% 432.75 kB 432.94 kB +0.02% 79.58 kB 79.60 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 98de7f6

@gaearon gaearon force-pushed the fix-text-mismatch branch from 1786a32 to 98de7f6 Compare April 4, 2022 02:09
Copy link
Collaborator

@acdlite acdlite left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me though I'm not super familiar with this code path so not sure if there are other implications

@gaearon gaearon merged commit fc47cb1 into facebook:main Apr 4, 2022
zhengjitf pushed a commit to zhengjitf/react that referenced this pull request Apr 15, 2022
This was referenced Nov 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: suppressHydrationWarning is not taken into account in production builds in React 18
5 participants