Skip to content

[Fiber] Explain hydration errors better #33683

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.

Sign up for GitHub

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

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[Fiber] Explain hydration errors better #33683

wants to merge 2 commits into from
+150 −55

Conversation

eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Jul 2, 2025 •
edited
Loading 

-messes with the HTML structure
+changes the HTML structure

[...]

The following differences were found (+ marks client content, - marks server content):

[...diff goes here...]

@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Jul 2, 2025
@react-sizebot
Copy link

react-sizebot commented Jul 2, 2025 •
edited
Loading

Comparing: ef8b6fa...bfa57af

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.02% 530.50 kB 530.58 kB +0.02% 93.66 kB 93.67 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 = 655.04 kB 651.67 kB = 115.35 kB 114.78 kB
facebook-www/ReactDOM-prod.classic.js = 675.12 kB 674.82 kB = 118.77 kB 118.78 kB
facebook-www/ReactDOM-prod.modern.js = 665.54 kB 665.31 kB +0.06% 117.13 kB 117.20 kB
facebook-www/React-prod.modern.js +3.45% 20.04 kB 20.73 kB +2.64% 5.18 kB 5.32 kB
facebook-www/React-prod.classic.js +3.45% 20.04 kB 20.73 kB +2.64% 5.18 kB 5.32 kB
facebook-www/React-profiling.modern.js +3.38% 20.47 kB 21.16 kB +2.60% 5.26 kB 5.40 kB
facebook-www/React-profiling.classic.js +3.38% 20.47 kB 21.16 kB +2.60% 5.26 kB 5.40 kB
facebook-www/React-dev.modern.js +3.17% 52.44 kB 54.10 kB +3.02% 11.71 kB 12.06 kB
facebook-www/React-dev.classic.js +3.17% 52.44 kB 54.10 kB +3.02% 11.71 kB 12.06 kB
facebook-www/JSXDEVRuntime-dev.classic.js +3.02% 12.51 kB 12.89 kB +2.39% 3.43 kB 3.52 kB
facebook-www/JSXDEVRuntime-dev.modern.js +3.02% 12.51 kB 12.89 kB +2.39% 3.43 kB 3.52 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js = 184.24 kB 180.37 kB = 41.08 kB 40.18 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js = 162.39 kB 157.81 kB = 28.94 kB 27.90 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js = 161.06 kB 156.48 kB = 28.70 kB 27.65 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js = 158.71 kB 154.13 kB = 28.46 kB 27.40 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js = 157.71 kB 153.13 kB = 28.39 kB 27.31 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js = 157.62 kB 153.04 kB = 28.35 kB 27.28 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js = 155.78 kB 151.20 kB = 27.92 kB 26.91 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js = 154.53 kB 149.94 kB = 27.84 kB 26.81 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js = 153.24 kB 148.65 kB = 27.49 kB 26.47 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js = 151.99 kB 147.41 kB = 27.33 kB 26.29 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js = 151.44 kB 146.85 kB = 27.18 kB 26.14 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js = 150.36 kB 145.77 kB = 26.78 kB 25.77 kB
oss-experimental/react-client/cjs/react-client-flight.development.js = 150.32 kB 145.73 kB = 26.43 kB 25.44 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js = 149.25 kB 144.67 kB = 26.80 kB 25.76 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-www/React-prod.modern.js +3.45% 20.04 kB 20.73 kB +2.64% 5.18 kB 5.32 kB
facebook-www/React-prod.classic.js +3.45% 20.04 kB 20.73 kB +2.64% 5.18 kB 5.32 kB
facebook-www/React-profiling.modern.js +3.38% 20.47 kB 21.16 kB +2.60% 5.26 kB 5.40 kB
facebook-www/React-profiling.classic.js +3.38% 20.47 kB 21.16 kB +2.60% 5.26 kB 5.40 kB
facebook-www/React-dev.modern.js +3.17% 52.44 kB 54.10 kB +3.02% 11.71 kB 12.06 kB
facebook-www/React-dev.classic.js +3.17% 52.44 kB 54.10 kB +3.02% 11.71 kB 12.06 kB
facebook-www/JSXDEVRuntime-dev.classic.js +3.02% 12.51 kB 12.89 kB +2.39% 3.43 kB 3.52 kB
facebook-www/JSXDEVRuntime-dev.modern.js +3.02% 12.51 kB 12.89 kB +2.39% 3.43 kB 3.52 kB
test_utils/ReactAllWarnings.js +0.69% 66.57 kB 67.03 kB +0.68% 16.72 kB 16.83 kB
facebook-www/ReactART-prod.modern.js +0.62% 374.17 kB 376.50 kB +0.64% 62.72 kB 63.12 kB
facebook-www/ReactART-prod.classic.js +0.59% 384.01 kB 386.28 kB +0.65% 64.33 kB 64.75 kB
facebook-www/ReactReconciler-prod.modern.js +0.49% 496.76 kB 499.20 kB +0.49% 79.31 kB 79.70 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js +0.47% 404.52 kB 406.42 kB +0.47% 72.55 kB 72.90 kB
facebook-www/ReactReconciler-prod.classic.js +0.47% 506.92 kB 509.30 kB +0.49% 80.84 kB 81.24 kB
facebook-www/ReactDOMServer-dev.modern.js +0.47% 406.33 kB 408.23 kB +0.48% 73.07 kB 73.42 kB
facebook-www/ReactDOMServer-dev.classic.js +0.46% 409.77 kB 411.67 kB +0.44% 73.67 kB 73.99 kB
facebook-www/ReactDOMServer-prod.modern.js +0.39% 251.25 kB 252.23 kB +0.46% 44.99 kB 45.20 kB
facebook-www/ReactDOMServer-prod.classic.js +0.39% 253.61 kB 254.59 kB +0.44% 45.34 kB 45.54 kB
facebook-www/ReactDOMServerStreaming-prod.modern.js +0.38% 260.33 kB 261.31 kB +0.42% 47.66 kB 47.86 kB
facebook-www/ReactDOMTesting-dev.modern.js = 1,245.46 kB 1,242.16 kB = 207.06 kB 206.25 kB
facebook-www/ReactDOMTesting-dev.classic.js = 1,254.63 kB 1,251.30 kB = 208.75 kB 207.96 kB
facebook-www/ReactDOM-dev.modern.js = 1,228.93 kB 1,225.62 kB = 203.37 kB 202.55 kB
facebook-www/ReactDOM-dev.classic.js = 1,238.10 kB 1,234.76 kB = 205.09 kB 204.31 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 206.00 kB 205.02 kB = 37.59 kB 37.28 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js = 205.94 kB 204.96 kB = 37.58 kB 37.27 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 204.79 kB 203.81 kB = 37.29 kB 36.99 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js = 198.02 kB 197.04 kB = 36.19 kB 35.87 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.production.js = 669.45 kB 666.08 kB = 118.93 kB 118.36 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js = 192.05 kB 191.07 kB = 35.53 kB 35.22 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 655.04 kB 651.67 kB = 115.35 kB 114.78 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 181.59 kB 180.64 kB = 33.34 kB 33.05 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-dev.js = 1,125.08 kB 1,119.18 kB = 186.72 kB 185.47 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js = 181.05 kB 180.10 kB = 33.20 kB 32.92 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 185.24 kB 184.26 kB = 33.75 kB 33.46 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js = 185.17 kB 184.19 kB = 33.74 kB 33.45 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 184.24 kB 183.26 kB = 33.38 kB 33.05 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js = 184.24 kB 183.26 kB = 33.38 kB 33.05 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js = 184.19 kB 183.21 kB = 33.37 kB 33.04 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.node.development.js = 184.19 kB 183.21 kB = 33.37 kB 33.04 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-dev.js = 1,108.81 kB 1,102.91 kB = 183.92 kB 182.68 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 183.04 kB 182.06 kB = 33.09 kB 32.75 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js = 183.04 kB 182.06 kB = 33.09 kB 32.75 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js = 173.28 kB 172.33 kB = 31.88 kB 31.60 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 173.23 kB 172.28 kB = 31.79 kB 31.50 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 173.23 kB 172.28 kB = 31.79 kB 31.50 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js = 172.69 kB 171.74 kB = 31.67 kB 31.38 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.development.js = 172.69 kB 171.74 kB = 31.67 kB 31.38 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js = 177.36 kB 176.38 kB = 32.42 kB 32.10 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 176.52 kB 175.54 kB = 32.24 kB 31.93 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 176.52 kB 175.54 kB = 32.24 kB 31.93 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js = 176.45 kB 175.47 kB = 32.23 kB 31.92 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.edge.development.js = 176.45 kB 175.47 kB = 32.23 kB 31.92 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js = 176.27 kB 175.29 kB = 32.06 kB 31.73 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js = 176.27 kB 175.29 kB = 32.06 kB 31.73 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js = 170.30 kB 169.32 kB = 31.37 kB 31.04 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-server.node.development.js = 170.30 kB 169.32 kB = 31.37 kB 31.04 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js = 164.91 kB 163.96 kB = 30.34 kB 30.04 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js = 164.91 kB 163.96 kB = 30.34 kB 30.04 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js = 168.64 kB 167.66 kB = 30.89 kB 30.59 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js = 168.64 kB 167.66 kB = 30.89 kB 30.59 kB
oss-experimental/react-dom/cjs/react-dom-profiling.profiling.js = 718.61 kB 714.37 kB = 124.74 kB 123.95 kB
oss-experimental/react-server/cjs/react-server-flight.development.js = 132.75 kB 131.96 kB = 24.20 kB 24.00 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js = 124.40 kB 123.61 kB = 22.62 kB 22.44 kB
oss-stable/react-server/cjs/react-server-flight.development.js = 124.40 kB 123.61 kB = 22.62 kB 22.44 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js = 818.33 kB 812.23 kB = 128.08 kB 126.77 kB
oss-experimental/react-dom/cjs/react-dom-unstable_testing.development.js = 1,209.97 kB 1,200.17 kB = 202.88 kB 200.97 kB
oss-experimental/react-dom/cjs/react-dom-profiling.development.js = 1,209.81 kB 1,200.01 kB = 202.03 kB 200.13 kB
oss-experimental/react-dom/cjs/react-dom-client.development.js = 1,193.42 kB 1,183.62 kB = 199.23 kB 197.27 kB
react-native/implementations/ReactNativeRenderer-dev.fb.js = 750.05 kB 743.76 kB = 119.39 kB 118.11 kB
react-native/implementations/ReactFabric-dev.fb.js = 738.86 kB 732.58 kB = 117.78 kB 116.49 kB
oss-experimental/react-markup/cjs/react-markup.react-server.development.js = 636.93 kB 631.49 kB = 112.71 kB 111.41 kB
oss-experimental/react-art/cjs/react-art.development.js = 690.68 kB 684.39 kB = 109.36 kB 108.03 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js = 184.24 kB 180.37 kB = 41.08 kB 40.18 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js = 162.39 kB 157.81 kB = 28.94 kB 27.90 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js = 161.06 kB 156.48 kB = 28.70 kB 27.65 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js = 158.71 kB 154.13 kB = 28.46 kB 27.40 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js = 157.71 kB 153.13 kB = 28.39 kB 27.31 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js = 157.62 kB 153.04 kB = 28.35 kB 27.28 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js = 155.78 kB 151.20 kB = 27.92 kB 26.91 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js = 154.53 kB 149.94 kB = 27.84 kB 26.81 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js = 153.24 kB 148.65 kB = 27.49 kB 26.47 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js = 151.99 kB 147.41 kB = 27.33 kB 26.29 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js = 151.44 kB 146.85 kB = 27.18 kB 26.14 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js = 150.36 kB 145.77 kB = 26.78 kB 25.77 kB
oss-experimental/react-client/cjs/react-client-flight.development.js = 150.32 kB 145.73 kB = 26.43 kB 25.44 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js = 149.25 kB 144.67 kB = 26.80 kB 25.76 kB

Generated by 🚫 dangerJS against bfa57af

@kushxg kushxg mentioned this pull request Jul 2, 2025
Open
@eps1lon eps1lon marked this pull request as ready for review July 2, 2025 09:22
DhruvTheDev1
DhruvTheDev1 reviewed Jul 2, 2025
View reviewed changes
Copy link
Contributor

@DhruvTheDev1 DhruvTheDev1 left a comment •
edited
Loading

Choose a reason for hiding this comment

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

The PR changes "messes with" to "changes" to make the wording sound more formal.

To be honest I do think "messes with" conveys a clearer sense of disruption/unexpected modification, which could be useful in this case as it better matches the context of something going wrong in the HTML before the React loaded.

On the other hand, "changes" sounds more neutral and formal but makes it lose that sense of urgency or the idea that something is potentially broken and out of place. It definitely sounds more neutral but it doesn't seem to have the same impact in helping a developer understand the potential issue.

Just a suggestion - In my opinion, "messes with" is better fitting for this issue as it makes it clearer for developers.

@eps1lon eps1lon force-pushed the sebbie/hydrationerrorcopy branch from 5db1cb1 to bfa57af Compare July 3, 2025 06:41
@eps1lon eps1lon changed the title [Fiber] Less coloquial copy for hydration errors [Fiber] Explain hydration errors better Jul 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@DhruvTheDev1 DhruvTheDev1 DhruvTheDev1 left review comments

@rickhanlonii rickhanlonii Awaiting requested review from rickhanlonii

@sebmarkbage sebmarkbage Awaiting requested review from sebmarkbage

Assignees
No one assigned
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@eps1lon @react-sizebot @DhruvTheDev1 @facebook-github-bot @vercel-release-bot