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

Add Owner Stack to attribute hydration mismatches #32538

Conversation

eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Mar 6, 2025

Based on #32537

Summary

Adds an Owner Stack to attribute hydration mismatches e.g. <div className={isClient ? 'client' : 'server'} />. We choose a Fiber depth-first as the Owner. I personally prefer something as close as possible to the origin and then work my way upwards if the fault is somewhere earlier. But we could also use a different heuristic based on the specific error.

How did you test this change?

  • updated tests
  • added more involved test case showing that we use DFS to pick the Owner of this error.

@eps1lon eps1lon changed the title test: Include Owner Stacks in ReactDOMHydrationDiff Add Owner Stack to attribute hydration mismatches Mar 6, 2025
@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Mar 6, 2025
@eps1lon eps1lon requested a review from sebmarkbage March 6, 2025 09:34
@eps1lon eps1lon force-pushed the sebbie/03-06-add_owner_stack_to_attribute_mismatches_during_hydration branch from 39d59ff to d19b1e9 Compare March 6, 2025 09:36
@react-sizebot
Copy link

react-sizebot commented Mar 6, 2025

Comparing: e81fcfe...82d5f73

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 +0.16% 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 518.54 kB 518.54 kB = 92.45 kB 92.45 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.16% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 589.31 kB 589.31 kB = 104.91 kB 104.91 kB
facebook-www/ReactDOM-prod.classic.js = 642.76 kB 642.76 kB = 113.01 kB 113.01 kB
facebook-www/ReactDOM-prod.modern.js = 633.08 kB 633.08 kB = 111.44 kB 111.44 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js = 145.52 kB 145.15 kB = 34.11 kB 34.06 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js = 133.96 kB 133.60 kB = 31.22 kB 31.18 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js = 133.94 kB 133.57 kB = 31.20 kB 31.15 kB
oss-experimental/react-client/cjs/react-client-flight.development.js = 107.05 kB 106.63 kB = 19.91 kB 19.84 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js = 108.48 kB 108.05 kB = 20.71 kB 20.64 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js = 107.93 kB 107.49 kB = 20.57 kB 20.51 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js = 106.10 kB 105.66 kB = 20.13 kB 20.06 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js = 105.74 kB 105.31 kB = 20.18 kB 20.12 kB
oss-stable/react-client/cjs/react-client-flight.development.js = 97.23 kB 96.81 kB = 17.86 kB 17.82 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js = 97.20 kB 96.78 kB = 17.83 kB 17.79 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js = 98.66 kB 98.22 kB = 18.70 kB 18.64 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js = 98.61 kB 98.17 kB = 18.67 kB 18.61 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js = 98.10 kB 97.66 kB = 18.56 kB 18.50 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js = 98.05 kB 97.61 kB = 18.54 kB 18.48 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js = 83.13 kB 82.76 kB = 17.38 kB 17.34 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js = 82.40 kB 82.03 kB = 17.26 kB 17.22 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js = 82.40 kB 82.03 kB = 17.26 kB 17.22 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js = 96.27 kB 95.84 kB = 18.14 kB 18.07 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js = 96.22 kB 95.79 kB = 18.12 kB 18.04 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js = 95.91 kB 95.48 kB = 18.17 kB 18.12 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js = 95.86 kB 95.43 kB = 18.15 kB 18.09 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js = 116.71 kB 116.12 kB = 21.92 kB 21.83 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js = 115.38 kB 114.79 kB = 21.66 kB 21.57 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js = 114.47 kB 113.88 kB = 21.79 kB 21.70 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js = 114.38 kB 113.79 kB = 21.75 kB 21.66 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js = 112.64 kB 112.04 kB = 21.39 kB 21.31 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js = 111.29 kB 110.69 kB = 21.26 kB 21.19 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js = 110.00 kB 109.41 kB = 20.92 kB 20.83 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js = 109.48 kB 108.89 kB = 20.90 kB 20.82 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js = 106.89 kB 106.30 kB = 19.91 kB 19.82 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js = 106.89 kB 106.30 kB = 19.91 kB 19.82 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js = 105.56 kB 104.97 kB = 19.65 kB 19.57 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js = 105.56 kB 104.97 kB = 19.65 kB 19.57 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js = 104.66 kB 104.06 kB = 19.74 kB 19.65 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js = 104.66 kB 104.06 kB = 19.74 kB 19.65 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js = 104.57 kB 103.97 kB = 19.70 kB 19.62 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js = 104.57 kB 103.97 kB = 19.70 kB 19.62 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js = 102.82 kB 102.23 kB = 19.39 kB 19.30 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js = 102.82 kB 102.23 kB = 19.39 kB 19.30 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js = 101.47 kB 100.88 kB = 19.23 kB 19.15 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js = 101.47 kB 100.88 kB = 19.23 kB 19.15 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js = 100.18 kB 99.59 kB = 18.92 kB 18.83 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js = 100.18 kB 99.59 kB = 18.92 kB 18.83 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js = 99.67 kB 99.08 kB = 18.90 kB 18.82 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js = 99.67 kB 99.08 kB = 18.90 kB 18.82 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js = 53.67 kB 53.32 kB = 10.93 kB 10.88 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js = 53.23 kB 52.89 kB = 10.83 kB 10.78 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js = 53.12 kB 52.77 kB = 10.84 kB 10.79 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js = 53.12 kB 52.77 kB = 10.84 kB 10.79 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js = 52.69 kB 52.34 kB = 10.74 kB 10.68 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js = 52.69 kB 52.34 kB = 10.74 kB 10.68 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js = 51.32 kB 50.98 kB = 10.43 kB 10.39 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js = 51.11 kB 50.76 kB = 10.32 kB 10.26 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js = 50.78 kB 50.43 kB = 10.34 kB 10.29 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js = 50.78 kB 50.43 kB = 10.34 kB 10.29 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js = 50.56 kB 50.22 kB = 10.23 kB 10.17 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js = 50.56 kB 50.22 kB = 10.23 kB 10.17 kB
oss-experimental/react-client/cjs/react-client-flight.production.js = 58.08 kB 57.66 kB = 10.81 kB 10.75 kB
oss-stable/react-client/cjs/react-client-flight.production.js = 57.62 kB 57.20 kB = 10.73 kB 10.68 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.js = 57.59 kB 57.18 kB = 10.71 kB 10.65 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js = 61.44 kB 60.89 kB = 12.32 kB 12.23 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js = 60.92 kB 60.37 kB = 12.23 kB 12.14 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js = 60.92 kB 60.37 kB = 12.23 kB 12.14 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js = 60.27 kB 59.72 kB = 12.09 kB 12.00 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js = 59.74 kB 59.19 kB = 11.99 kB 11.90 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js = 59.74 kB 59.19 kB = 11.99 kB 11.90 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js = 59.35 kB 58.80 kB = 12.12 kB 12.03 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js = 59.27 kB 58.72 kB = 12.10 kB 12.01 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js = 58.81 kB 58.26 kB = 12.04 kB 11.95 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js = 58.81 kB 58.26 kB = 12.04 kB 11.95 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js = 58.72 kB 58.17 kB = 12.01 kB 11.92 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js = 58.72 kB 58.17 kB = 12.01 kB 11.92 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js = 57.77 kB 57.22 kB = 11.79 kB 11.70 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js = 57.23 kB 56.68 kB = 11.70 kB 11.61 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js = 57.23 kB 56.68 kB = 11.70 kB 11.61 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js = 56.24 kB 55.69 kB = 11.52 kB 11.43 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js = 55.69 kB 55.14 kB = 11.43 kB 11.34 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js = 55.69 kB 55.14 kB = 11.43 kB 11.34 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js = 55.44 kB 54.89 kB = 11.33 kB 11.24 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js = 54.90 kB 54.35 kB = 11.24 kB 11.15 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js = 54.90 kB 54.35 kB = 11.24 kB 11.15 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js = 54.71 kB 54.15 kB = 11.21 kB 11.12 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js = 54.16 kB 53.61 kB = 11.12 kB 11.03 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js = 54.16 kB 53.61 kB = 11.12 kB 11.03 kB

Generated by 🚫 dangerJS against 907484a

@eps1lon eps1lon force-pushed the sebbie/03-06-add_owner_stack_to_attribute_mismatches_during_hydration branch from d19b1e9 to bb3c241 Compare March 6, 2025 09:42
@eps1lon eps1lon force-pushed the sebbie/03-06-add_owner_stack_to_attribute_mismatches_during_hydration branch from bb3c241 to 907484a Compare March 6, 2025 09:50
@eps1lon eps1lon merged commit 029e8bd into facebook:main Mar 6, 2025
194 checks passed
github-actions bot pushed a commit that referenced this pull request Mar 6, 2025
github-actions bot pushed a commit that referenced this pull request Mar 6, 2025
@eps1lon eps1lon deleted the sebbie/03-06-add_owner_stack_to_attribute_mismatches_during_hydration branch March 6, 2025 16:25
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.

4 participants