KEMBAR78
s/HTML/text for text hydration mismatches by rickhanlonii · Pull Request #32763 · facebook/react · GitHub
Skip to content

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.

@rickhanlonii rickhanlonii merged commit 3e88e97 into facebook:main Mar 26, 2025
241 checks passed
@rickhanlonii rickhanlonii deleted the rh/text-mismatch-error branch March 26, 2025 21:40
github-actions bot pushed a commit that referenced this pull request Mar 26, 2025
github-actions bot pushed a commit that referenced this pull request Mar 26, 2025
"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