Skip to content

Conversation

@sebmarkbage
Copy link
Collaborator

ViewTransition uses the useId algorithm to auto-assign names. This ensures that we could animate between SSR content and client content by ensuring that the names line up.

However, I missed that we need to bump the id (materialize it) when we do that. This is what function components do if they use one or more useId(). This caused duplicate names when two ViewTransitions were nested without any siblings since they would share name.

@sebmarkbage sebmarkbage requested a review from acdlite March 17, 2025 20:03
@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Mar 17, 2025
@react-sizebot
Copy link

Comparing: ca02c4b...56f2312

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 = 517.29 kB 516.17 kB = 92.26 kB 92.15 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 605.55 kB 604.54 kB = 107.43 kB 107.33 kB
facebook-www/ReactDOM-prod.classic.js = 651.92 kB 650.00 kB = 114.83 kB 114.58 kB
facebook-www/ReactDOM-prod.modern.js = 642.20 kB 640.32 kB = 113.24 kB 113.01 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-www/ReactDOMServerStreaming-dev.modern.js +1.02% 362.80 kB 366.49 kB +0.73% 65.41 kB 65.88 kB
facebook-www/ReactDOMServer-dev.modern.js +0.99% 371.10 kB 374.78 kB +0.73% 66.71 kB 67.20 kB
facebook-www/ReactReconciler-prod.modern.js = 491.55 kB 490.55 kB = 78.74 kB 78.61 kB
oss-stable/react-dom/cjs/react-dom-profiling.profiling.js = 547.70 kB 546.57 kB = 96.97 kB 96.85 kB
oss-stable-semver/react-dom/cjs/react-dom-profiling.profiling.js = 547.57 kB 546.45 kB = 96.94 kB 96.82 kB
oss-stable/react-reconciler/cjs/react-reconciler.development.js = 647.45 kB 646.11 kB = 103.28 kB 103.08 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.development.js = 647.43 kB 646.09 kB = 103.25 kB 103.05 kB
react-native/implementations/ReactNativeRenderer-dev.fb.js = 677.12 kB 675.72 kB = 110.19 kB 109.99 kB
facebook-www/ReactReconciler-prod.classic.js = 501.86 kB 500.82 kB = 80.35 kB 80.20 kB
react-native/implementations/ReactFabric-dev.fb.js = 672.35 kB 670.95 kB = 109.30 kB 109.14 kB
oss-experimental/react-art/cjs/react-art.development.js = 631.09 kB 629.75 kB = 100.08 kB 99.91 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-profiling.js = 576.10 kB 574.88 kB = 101.72 kB 101.57 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-profiling.js = 570.16 kB 568.94 kB = 100.57 kB 100.41 kB
react-native/implementations/ReactNativeRenderer-dev.js = 650.27 kB 648.88 kB = 106.07 kB 105.88 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 517.29 kB 516.17 kB = 92.26 kB 92.15 kB
oss-stable-semver/react-dom/cjs/react-dom-client.production.js = 517.17 kB 516.04 kB = 92.23 kB 92.12 kB
react-native/implementations/ReactFabric-dev.js = 641.90 kB 640.51 kB = 104.74 kB 104.54 kB
oss-stable/react/cjs/react.react-server.development.js = 28.93 kB 28.86 kB = 6.95 kB 6.94 kB
oss-stable-semver/react/cjs/react.react-server.development.js = 28.90 kB 28.84 kB = 6.92 kB 6.91 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-prod.js = 550.81 kB 549.58 kB = 97.90 kB 97.75 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-prod.js = 545.30 kB 544.08 kB = 96.83 kB 96.68 kB
facebook-www/ReactDOMTesting-dev.classic.js = 1,193.96 kB 1,191.25 kB = 199.20 kB 198.78 kB
facebook-www/ReactDOMTesting-dev.modern.js = 1,184.82 kB 1,182.11 kB = 197.41 kB 196.99 kB
oss-experimental/react-reconciler/cjs/react-reconciler.profiling.js = 512.38 kB 511.21 kB = 81.69 kB 81.54 kB
facebook-www/ReactDOM-dev.classic.js = 1,177.42 kB 1,174.72 kB = 195.35 kB 194.92 kB
facebook-www/ReactDOM-dev.modern.js = 1,168.28 kB 1,165.58 kB = 193.60 kB 193.19 kB
facebook-www/ReactTestRenderer-dev.classic.js = 577.17 kB 575.83 kB = 93.87 kB 93.72 kB
facebook-www/ReactTestRenderer-dev.modern.js = 577.17 kB 575.83 kB = 93.87 kB 93.72 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-dev.js = 600.23 kB 598.82 kB = 96.69 kB 96.51 kB
oss-stable/react-art/cjs/react-art.development.js = 560.25 kB 558.91 kB = 90.12 kB 89.96 kB
oss-stable-semver/react-art/cjs/react-art.development.js = 560.17 kB 558.83 kB = 90.10 kB 89.93 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.development.js = 559.29 kB 557.95 kB = 90.81 kB 90.65 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.development.js = 559.24 kB 557.90 kB = 90.80 kB 90.64 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.development.js = 559.21 kB 557.87 kB = 90.79 kB 90.62 kB
test_utils/ReactAllWarnings.js = 63.93 kB 63.77 kB = 16.00 kB 15.95 kB
oss-experimental/react-reconciler/cjs/react-reconciler.production.js = 459.38 kB 458.25 kB = 73.74 kB 73.63 kB
facebook-www/ReactDOM-profiling.classic.js = 714.85 kB 712.93 kB = 123.96 kB 123.71 kB
facebook-www/ReactDOM-profiling.modern.js = 706.81 kB 704.88 kB = 122.62 kB 122.38 kB
facebook-www/ReactART-prod.modern.js = 376.19 kB 375.15 kB = 63.21 kB 63.09 kB
facebook-www/ReactART-prod.classic.js = 386.18 kB 385.10 kB = 64.85 kB 64.70 kB
facebook-www/ReactDOMTesting-prod.modern.js = 656.60 kB 654.72 kB = 116.86 kB 116.63 kB
facebook-www/ReactDOMTesting-prod.classic.js = 666.32 kB 664.40 kB = 118.49 kB 118.25 kB
oss-stable/react-reconciler/cjs/react-reconciler.profiling.js = 419.25 kB 418.02 kB = 67.46 kB 67.29 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.profiling.js = 419.22 kB 418.00 kB = 67.43 kB 67.27 kB
facebook-www/ReactDOM-prod.modern.js = 642.20 kB 640.32 kB = 113.24 kB 113.01 kB
facebook-www/ReactDOM-prod.classic.js = 651.92 kB 650.00 kB = 114.83 kB 114.58 kB
react-native/implementations/ReactFabric-profiling.fb.js = 407.95 kB 406.73 kB = 70.28 kB 70.13 kB
react-native/implementations/ReactNativeRenderer-profiling.js = 392.93 kB 391.75 kB = 67.56 kB 67.41 kB
react-native/implementations/ReactNativeRenderer-profiling.fb.js = 411.46 kB 410.21 kB = 70.87 kB 70.72 kB
react-native/implementations/ReactFabric-profiling.js = 385.63 kB 384.44 kB = 66.36 kB 66.22 kB
oss-stable/react-reconciler/cjs/react-reconciler.production.js = 393.06 kB 391.83 kB = 63.79 kB 63.64 kB
oss-stable-semver/react-reconciler/cjs/react-reconciler.production.js = 393.04 kB 391.81 kB = 63.77 kB 63.62 kB
react-native/implementations/ReactNativeRenderer-prod.fb.js = 385.95 kB 384.73 kB = 67.03 kB 66.87 kB
react-native/implementations/ReactFabric-prod.fb.js = 382.44 kB 381.22 kB = 66.40 kB 66.25 kB
react-native/implementations/ReactNativeRenderer-prod.js = 367.58 kB 366.40 kB = 63.75 kB 63.62 kB
react-native/implementations/ReactFabric-prod.js = 360.39 kB 359.20 kB = 62.64 kB 62.51 kB
oss-experimental/react-art/cjs/react-art.production.js = 335.83 kB 334.70 kB = 56.75 kB 56.64 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-profiling.js = 357.70 kB 356.47 kB = 61.67 kB 61.52 kB
oss-experimental/react-test-renderer/cjs/react-test-renderer.production.js = 314.91 kB 313.79 kB = 55.21 kB 55.09 kB
oss-stable/react-test-renderer/cjs/react-test-renderer.production.js = 314.74 kB 313.61 kB = 55.18 kB 55.06 kB
oss-stable-semver/react-test-renderer/cjs/react-test-renderer.production.js = 314.66 kB 313.54 kB = 55.15 kB 55.04 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-prod.js = 335.52 kB 334.29 kB = 58.50 kB 58.34 kB
oss-stable/react-art/cjs/react-art.production.js = 302.62 kB 301.49 kB = 51.46 kB 51.34 kB
oss-stable-semver/react-art/cjs/react-art.production.js = 302.54 kB 301.42 kB = 51.43 kB 51.32 kB
facebook-www/JSXDEVRuntime-dev.classic.js = 12.77 kB 12.64 kB = 3.45 kB 3.42 kB
facebook-www/JSXDEVRuntime-dev.modern.js = 12.77 kB 12.64 kB = 3.45 kB 3.42 kB
oss-experimental/react/cjs/react-jsx-dev-runtime.react-server.development.js = 12.22 kB 12.09 kB = 3.33 kB 3.30 kB
oss-experimental/react/cjs/react-jsx-runtime.react-server.development.js = 12.21 kB 12.09 kB = 3.33 kB 3.30 kB
oss-stable-semver/react/cjs/react-jsx-dev-runtime.react-server.development.js = 12.07 kB 11.95 kB = 3.29 kB 3.26 kB
oss-stable/react/cjs/react-jsx-dev-runtime.react-server.development.js = 12.07 kB 11.95 kB = 3.29 kB 3.26 kB
oss-stable-semver/react/cjs/react-jsx-runtime.react-server.development.js = 12.07 kB 11.94 kB = 3.29 kB 3.25 kB
oss-stable/react/cjs/react-jsx-runtime.react-server.development.js = 12.07 kB 11.94 kB = 3.29 kB 3.25 kB
facebook-react-native/react/cjs/JSXRuntime-dev.js = 11.67 kB 11.54 kB = 3.20 kB 3.17 kB
oss-experimental/react/cjs/react-jsx-runtime.development.js = 11.59 kB 11.47 kB = 3.20 kB 3.17 kB
facebook-react-native/react/cjs/JSXDEVRuntime-dev.js = 11.47 kB 11.34 kB = 3.18 kB 3.15 kB
oss-stable-semver/react/cjs/react-jsx-runtime.development.js = 11.44 kB 11.32 kB = 3.16 kB 3.13 kB
oss-stable/react/cjs/react-jsx-runtime.development.js = 11.44 kB 11.32 kB = 3.16 kB 3.13 kB
oss-experimental/react/cjs/react-jsx-dev-runtime.development.js = 11.39 kB 11.27 kB = 3.18 kB 3.15 kB
oss-stable-semver/react/cjs/react-jsx-dev-runtime.development.js = 11.25 kB 11.12 kB = 3.14 kB 3.11 kB
oss-stable/react/cjs/react-jsx-dev-runtime.development.js = 11.25 kB 11.12 kB = 3.14 kB 3.11 kB

Generated by 🚫 dangerJS against 56f2312

@sebmarkbage sebmarkbage merged commit 9fde224 into facebook:main Mar 17, 2025
194 checks passed
github-actions bot pushed a commit that referenced this pull request Mar 17, 2025
…32651)

ViewTransition uses the  algorithm to auto-assign names. This
ensures that we could animate between SSR content and client content by
ensuring that the names line up.

However, I missed that we need to bump the id (materialize it) when we
do that. This is what function components do if they use one or more
. This caused duplicate names when two ViewTransitions were
nested without any siblings since they would share name.

DiffTrain build for [9fde224](9fde224)
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