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

s/HTML/text for text hydration mismatches #32763

Merged
merged 2 commits into from
Mar 26, 2025

Conversation

rickhanlonii
Copy link
Member

No description provided.

@react-sizebot
Copy link

react-sizebot commented Mar 26, 2025

Comparing: f134b39...de5c5a3

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.js = 6.68 kB 6.68 kB = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js +0.06% 515.00 kB 515.28 kB +0.05% 91.74 kB 91.78 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 614.89 kB 614.49 kB +0.03% 108.78 kB 108.81 kB
facebook-www/ReactDOM-prod.classic.js +0.60% 646.61 kB 650.48 kB +0.48% 114.30 kB 114.84 kB
facebook-www/ReactDOM-prod.modern.js +0.61% 636.89 kB 640.76 kB +0.50% 112.71 kB 113.28 kB
facebook-react-native/react/cjs/React-prod.js +2.91% 19.17 kB 19.72 kB +2.99% 4.98 kB 5.13 kB
facebook-react-native/react/cjs/React-profiling.js +2.84% 19.60 kB 20.16 kB +2.90% 5.06 kB 5.21 kB
facebook-www/React-prod.modern.js +2.52% 20.51 kB 21.03 kB +2.38% 5.25 kB 5.38 kB
facebook-www/React-prod.classic.js +2.52% 20.51 kB 21.03 kB +2.38% 5.25 kB 5.38 kB
facebook-www/React-profiling.modern.js +2.46% 20.95 kB 21.46 kB +2.32% 5.34 kB 5.46 kB
facebook-www/React-profiling.classic.js +2.46% 20.95 kB 21.46 kB +2.32% 5.34 kB 5.46 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-react-native/react/cjs/React-prod.js +2.91% 19.17 kB 19.72 kB +2.99% 4.98 kB 5.13 kB
facebook-react-native/react/cjs/React-profiling.js +2.84% 19.60 kB 20.16 kB +2.90% 5.06 kB 5.21 kB
facebook-www/React-prod.modern.js +2.52% 20.51 kB 21.03 kB +2.38% 5.25 kB 5.38 kB
facebook-www/React-prod.classic.js +2.52% 20.51 kB 21.03 kB +2.38% 5.25 kB 5.38 kB
facebook-www/React-profiling.modern.js +2.46% 20.95 kB 21.46 kB +2.32% 5.34 kB 5.46 kB
facebook-www/React-profiling.classic.js +2.46% 20.95 kB 21.46 kB +2.32% 5.34 kB 5.46 kB
react-native/implementations/ReactFabric-dev.fb.js +1.80% 658.61 kB 670.47 kB +1.45% 107.59 kB 109.14 kB
react-native/implementations/ReactNativeRenderer-dev.fb.js +1.79% 663.55 kB 675.40 kB +1.47% 108.43 kB 110.03 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-dev.js +1.70% 588.51 kB 598.50 kB +1.41% 95.16 kB 96.50 kB
facebook-react-native/react/cjs/React-dev.js +1.37% 51.03 kB 51.73 kB +1.22% 11.35 kB 11.49 kB
facebook-www/React-dev.modern.js +1.36% 54.82 kB 55.56 kB +1.19% 11.97 kB 12.11 kB
facebook-www/React-dev.classic.js +1.36% 54.82 kB 55.56 kB +1.19% 11.97 kB 12.11 kB
react-native/implementations/ReactFabric-prod.fb.js +1.26% 375.58 kB 380.30 kB +1.23% 65.27 kB 66.07 kB
react-native/implementations/ReactNativeRenderer-prod.fb.js +1.25% 379.22 kB 383.94 kB +1.16% 65.95 kB 66.72 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-dev.js +1.23% 982.31 kB 994.39 kB +0.93% 165.37 kB 166.90 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-dev.js +1.21% 998.64 kB 1,010.72 kB +0.91% 168.19 kB 169.72 kB
facebook-www/ReactART-dev.modern.js +1.17% 689.55 kB 697.64 kB +0.62% 108.51 kB 109.18 kB
react-native/implementations/ReactFabric-profiling.fb.js +1.17% 401.08 kB 405.76 kB +1.15% 69.19 kB 69.98 kB
react-native/implementations/ReactNativeRenderer-profiling.fb.js +1.16% 404.71 kB 409.40 kB +1.11% 69.81 kB 70.58 kB
facebook-www/ReactART-dev.classic.js +1.16% 699.05 kB 707.13 kB +0.62% 110.33 kB 111.02 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-prod.js +1.14% 329.74 kB 333.51 kB +1.02% 57.63 kB 58.22 kB
oss-stable-semver/react/cjs/react.production.js +1.08% 16.89 kB 17.08 kB +1.62% 4.38 kB 4.46 kB
oss-stable/react/cjs/react.production.js +1.08% 16.92 kB 17.10 kB +1.61% 4.41 kB 4.48 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-profiling.js +1.07% 351.87 kB 355.64 kB +1.01% 60.81 kB 61.42 kB
facebook-www/ReactART-prod.modern.js +1.07% 369.20 kB 373.15 kB +0.92% 62.22 kB 62.79 kB
facebook-www/ReactReconciler-dev.modern.js +1.06% 797.30 kB 805.78 kB +0.53% 125.27 kB 125.93 kB
facebook-www/ReactReconciler-dev.classic.js +1.05% 806.51 kB 814.99 kB +0.53% 126.92 kB 127.59 kB
facebook-www/ReactART-prod.classic.js +1.04% 379.18 kB 383.13 kB +0.91% 63.84 kB 64.42 kB
oss-experimental/react/cjs/react.production.js +0.99% 18.36 kB 18.54 kB +1.37% 4.73 kB 4.80 kB
facebook-www/ReactReconciler-prod.modern.js +0.90% 482.77 kB 487.10 kB +0.86% 77.57 kB 78.23 kB
facebook-www/ReactReconciler-prod.classic.js +0.88% 493.08 kB 497.41 kB +0.81% 79.20 kB 79.85 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-prod.js +0.86% 538.68 kB 543.31 kB +0.80% 95.62 kB 96.39 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-prod.js +0.85% 544.18 kB 548.82 kB +0.79% 96.70 kB 97.47 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-profiling.js +0.82% 563.50 kB 568.10 kB +0.76% 99.30 kB 100.06 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-profiling.js +0.81% 569.44 kB 574.04 kB +0.75% 100.47 kB 101.22 kB
facebook-www/ReactDOM-dev.modern.js +0.72% 1,158.75 kB 1,167.08 kB +0.40% 192.97 kB 193.74 kB
facebook-www/ReactDOM-dev.classic.js +0.71% 1,167.90 kB 1,176.22 kB +0.39% 194.66 kB 195.43 kB
facebook-www/ReactDOMTesting-dev.modern.js +0.71% 1,175.29 kB 1,183.62 kB +0.39% 196.73 kB 197.50 kB
facebook-www/ReactDOMTesting-dev.classic.js +0.70% 1,184.43 kB 1,192.76 kB +0.38% 198.49 kB 199.25 kB
facebook-www/ReactDOM-prod.modern.js +0.61% 636.89 kB 640.76 kB +0.50% 112.71 kB 113.28 kB
facebook-www/ReactDOM-prod.classic.js +0.60% 646.61 kB 650.48 kB +0.48% 114.30 kB 114.84 kB
facebook-www/ReactDOMTesting-prod.modern.js +0.60% 651.29 kB 655.17 kB +0.49% 116.32 kB 116.88 kB
facebook-www/ReactDOM-profiling.modern.js +0.59% 701.23 kB 705.35 kB +0.52% 121.98 kB 122.62 kB
facebook-www/ReactDOMTesting-prod.classic.js +0.59% 661.01 kB 664.89 kB +0.47% 117.93 kB 118.48 kB
facebook-react-native/react/cjs/JSXRuntime-dev.js +0.59% 12.47 kB 12.54 kB +0.12% 3.35 kB 3.35 kB
facebook-www/ReactDOM-profiling.classic.js +0.58% 709.27 kB 713.39 kB +0.52% 123.32 kB 123.96 kB
facebook-www/JSXDEVRuntime-dev.classic.js +0.55% 13.37 kB 13.44 kB +0.22% 3.60 kB 3.61 kB
facebook-www/JSXDEVRuntime-dev.modern.js +0.55% 13.37 kB 13.44 kB +0.22% 3.60 kB 3.61 kB
facebook-react-native/react/cjs/JSXDEVRuntime-dev.js +0.51% 12.07 kB 12.13 kB +0.12% 3.33 kB 3.33 kB
oss-stable-semver/react/cjs/react.development.js +0.45% 44.83 kB 45.03 kB +0.54% 10.23 kB 10.28 kB
oss-stable/react/cjs/react.development.js +0.45% 44.85 kB 45.06 kB +0.55% 10.26 kB 10.31 kB
oss-experimental/react/cjs/react.development.js +0.43% 46.55 kB 46.75 kB +0.53% 10.62 kB 10.67 kB
react-native/shims/ReactNativeTypes.js +0.41% 7.24 kB 7.27 kB +0.20% 2.00 kB 2.00 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js = 1,120.42 kB 1,117.25 kB = 188.19 kB 187.64 kB
oss-experimental/react-dom/cjs/react-dom-profiling.development.js = 1,120.27 kB 1,117.10 kB = 187.38 kB 186.83 kB
oss-experimental/react-dom/cjs/react-dom-client.development.js = 1,103.88 kB 1,100.71 kB = 184.55 kB 184.00 kB
test_utils/ReactAllWarnings.js = 64.16 kB 63.93 kB = 16.12 kB 16.00 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js = 760.48 kB 757.54 kB = 119.89 kB 119.28 kB
oss-experimental/react-art/cjs/react-art.development.js = 635.30 kB 632.08 kB = 101.05 kB 100.44 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-persistent.development.js = 42.59 kB 42.28 kB = 7.71 kB 7.68 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-persistent.development.js = 42.58 kB 42.27 kB = 7.71 kB 7.67 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-persistent.development.js = 42.56 kB 42.25 kB = 7.68 kB 7.64 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer.development.js = 42.45 kB 42.14 kB = 7.69 kB 7.66 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer.development.js = 42.44 kB 42.13 kB = 7.69 kB 7.65 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer.development.js = 42.42 kB 42.11 kB = 7.66 kB 7.62 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-persistent.production.js = 38.28 kB 37.99 kB = 7.11 kB 7.07 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-persistent.production.js = 38.27 kB 37.99 kB = 7.10 kB 7.07 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-persistent.production.js = 38.25 kB 37.96 kB = 7.07 kB 7.04 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer.production.js = 38.15 kB 37.86 kB = 7.09 kB 7.06 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer.production.js = 38.15 kB 37.86 kB = 7.09 kB 7.05 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer.production.js = 38.12 kB 37.83 kB = 7.05 kB 7.02 kB

Generated by 🚫 dangerJS against de5c5a3

Copy link
Collaborator

@sebmarkbage sebmarkbage left a comment

Choose a reason for hiding this comment

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

You'll also need to update flow and probably the error code's message.

cc @eps1lon If we have any hard coded string matchers.

@@ -403,7 +403,7 @@
"415": "Error parsing the data. It's probably an error code or network corruption.",
"416": "This environment don't support binary chunks.",
"417": "React currently only supports piping to one writable stream.",
"418": "Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n\n- A server/client branch `if (typeof window !== 'undefined')`.\n- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n- Date formatting in a user's locale which doesn't match the server.\n- External changing data without sending a snapshot of it along with the HTML.\n- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n\nhttps://react.dev/link/hydration-mismatch%s",
"418": "Hydration failed because the server rendered %s didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:\n\n- A server/client branch `if (typeof window !== 'undefined')`.\n- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n- Date formatting in a user's locale which doesn't match the server.\n- External changing data without sending a snapshot of it along with the HTML.\n- Invalid HTML tag nesting.\n\nIt can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n\nhttps://react.dev/link/hydration-mismatch%s",
Copy link
Collaborator

Choose a reason for hiding this comment

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

I think we need to generate a new ID instead. Old versions of React will link to this ID but will not provide the correct placeholder.

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.

5 participants