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

Rename the react.element symbol to react.transitional.element #28813

Merged
merged 2 commits into from
Apr 22, 2024

Conversation

sebmarkbage
Copy link
Collaborator

We have changed the shape (and the runtime) of React Elements. To help avoid precompiled or inlined JSX having subtle breakages or deopting hidden classes, I renamed the symbol so that we can early error if private implementation details are used or mismatching versions are used.

Why "transitional"? Well, because this is not the last time we'll change the shape. This is just a stepping stone to removing the ref field on the elements in the next version so we'll likely have to do it again.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Apr 10, 2024
@react-sizebot
Copy link

react-sizebot commented Apr 10, 2024

Comparing: bf426f9...0688f2d

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 +0.03% 497.54 kB 497.71 kB +0.04% 88.93 kB 88.97 kB
oss-experimental/react-dom/cjs/react-dom.production.js +0.03% 502.86 kB 503.03 kB +0.04% 89.84 kB 89.87 kB
facebook-www/ReactDOM-prod.classic.js +0.02% 591.00 kB 591.14 kB +0.02% 103.95 kB 103.96 kB
facebook-www/ReactDOM-prod.modern.js +0.02% 566.82 kB 566.95 kB +0.02% 100.15 kB 100.17 kB
oss-experimental/react-is/cjs/react-is.development.js = 6.64 kB 6.46 kB = 1.87 kB 1.77 kB
oss-stable-semver/react-is/cjs/react-is.development.js = 6.64 kB 6.46 kB = 1.87 kB 1.77 kB
oss-stable/react-is/cjs/react-is.development.js = 6.64 kB 6.46 kB = 1.87 kB 1.77 kB
oss-experimental/jest-react/cjs/jest-react.development.js = 4.36 kB 4.18 kB = 1.57 kB 1.47 kB
oss-stable-semver/jest-react/cjs/jest-react.development.js = 4.36 kB 4.18 kB = 1.57 kB 1.47 kB
oss-stable/jest-react/cjs/jest-react.development.js = 4.36 kB 4.18 kB = 1.57 kB 1.47 kB
test_utils/ReactAllWarnings.js Deleted 64.44 kB 0.00 kB Deleted 16.10 kB 0.00 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/cjs/react-jsx-runtime.profiling.js +1.33% 0.98 kB 0.99 kB +1.60% 0.50 kB 0.51 kB
oss-stable-semver/react/cjs/react-jsx-runtime.profiling.js +1.33% 0.98 kB 0.99 kB +1.60% 0.50 kB 0.51 kB
oss-stable/react/cjs/react-jsx-runtime.profiling.js +1.33% 0.98 kB 0.99 kB +1.60% 0.50 kB 0.51 kB
oss-experimental/react/cjs/react-jsx-runtime.production.js +1.33% 0.98 kB 0.99 kB +1.80% 0.50 kB 0.51 kB
oss-stable-semver/react/cjs/react-jsx-runtime.production.js +1.33% 0.98 kB 0.99 kB +1.80% 0.50 kB 0.51 kB
oss-stable/react/cjs/react-jsx-runtime.production.js +1.33% 0.98 kB 0.99 kB +1.80% 0.50 kB 0.51 kB
oss-experimental/react/cjs/react-jsx-runtime.react-server.production.js +1.00% 1.30 kB 1.31 kB +1.04% 0.67 kB 0.68 kB
oss-stable-semver/react/cjs/react-jsx-runtime.react-server.production.js +1.00% 1.30 kB 1.31 kB +1.04% 0.67 kB 0.68 kB
oss-stable/react/cjs/react-jsx-runtime.react-server.production.js +1.00% 1.30 kB 1.31 kB +1.04% 0.67 kB 0.68 kB
facebook-react-native/react-is/cjs/ReactIs-dev.js +0.66% 7.15 kB 7.19 kB +0.05% 1.96 kB 1.96 kB
facebook-www/ReactIs-dev.modern.js +0.65% 7.28 kB 7.33 kB = 1.90 kB 1.89 kB
facebook-www/ReactIs-dev.classic.js +0.65% 7.28 kB 7.33 kB = 1.90 kB 1.90 kB
facebook-www/ReactIs-prod.classic.js +0.49% 5.75 kB 5.78 kB +0.52% 1.34 kB 1.35 kB
facebook-www/ReactIs-prod.modern.js +0.49% 5.75 kB 5.78 kB +0.52% 1.34 kB 1.35 kB
facebook-react-native/react/cjs/JSXRuntime-prod.js +0.42% 2.85 kB 2.86 kB +0.91% 1.22 kB 1.23 kB
facebook-react-native/react/cjs/JSXRuntime-profiling.js +0.42% 2.85 kB 2.86 kB +0.91% 1.22 kB 1.23 kB
oss-experimental/jest-react/cjs/jest-react.production.js +0.41% 3.20 kB 3.21 kB +0.52% 1.16 kB 1.17 kB
oss-stable-semver/jest-react/cjs/jest-react.production.js +0.41% 3.20 kB 3.21 kB +0.52% 1.16 kB 1.17 kB
oss-stable/jest-react/cjs/jest-react.production.js +0.41% 3.20 kB 3.21 kB +0.52% 1.16 kB 1.17 kB
facebook-www/ReactFreshRuntime-dev.classic.js +0.33% 20.36 kB 20.43 kB +0.57% 5.93 kB 5.96 kB
facebook-www/ReactFreshRuntime-dev.modern.js +0.33% 20.36 kB 20.43 kB +0.57% 5.93 kB 5.96 kB
oss-experimental/react-is/cjs/react-is.production.js +0.29% 4.44 kB 4.46 kB +0.75% 1.07 kB 1.08 kB
oss-stable-semver/react-is/cjs/react-is.production.js +0.29% 4.44 kB 4.46 kB +0.75% 1.07 kB 1.08 kB
oss-stable/react-is/cjs/react-is.production.js +0.29% 4.44 kB 4.46 kB +0.75% 1.07 kB 1.08 kB
oss-experimental/react/cjs/react.react-server.development.js = 79.75 kB 79.59 kB = 22.61 kB 22.53 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js = 85.50 kB 85.32 kB = 19.46 kB 19.38 kB
oss-stable-semver/react-server/cjs/react-server-flight.development.js = 85.15 kB 84.97 kB = 19.79 kB 19.71 kB
oss-stable/react-server/cjs/react-server-flight.development.js = 85.15 kB 84.97 kB = 19.79 kB 19.71 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js = 84.99 kB 84.81 kB = 19.29 kB 19.20 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js = 81.74 kB 81.56 kB = 18.31 kB 18.23 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js = 81.50 kB 81.32 kB = 18.25 kB 18.16 kB
oss-experimental/react-client/cjs/react-client-flight.development.js = 81.49 kB 81.32 kB = 18.53 kB 18.45 kB
oss-stable/react/cjs/react.react-server.development.js = 74.20 kB 74.03 kB = 21.03 kB 20.95 kB
oss-stable-semver/react/cjs/react.react-server.development.js = 74.17 kB 74.01 kB = 21.00 kB 20.92 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js = 75.28 kB 75.11 kB = 18.25 kB 18.17 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js = 75.28 kB 75.11 kB = 18.25 kB 18.17 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js = 75.26 kB 75.08 kB = 18.21 kB 18.13 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js = 75.26 kB 75.08 kB = 18.21 kB 18.13 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js = 74.21 kB 74.04 kB = 18.04 kB 17.96 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js = 74.21 kB 74.04 kB = 18.04 kB 17.96 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js = 74.19 kB 74.01 kB = 18.00 kB 17.92 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js = 74.19 kB 74.01 kB = 18.00 kB 17.92 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js = 72.79 kB 72.61 kB = 17.66 kB 17.58 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js = 72.79 kB 72.61 kB = 17.66 kB 17.58 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js = 72.75 kB 72.58 kB = 17.64 kB 17.55 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js = 72.75 kB 72.58 kB = 17.64 kB 17.55 kB
facebook-react-native/react-is/cjs/ReactIs-prod.js = 5.19 kB 5.18 kB = 1.25 kB 1.25 kB
facebook-react-native/react-is/cjs/ReactIs-profiling.js = 5.19 kB 5.18 kB = 1.25 kB 1.25 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js = 70.97 kB 70.79 kB = 17.06 kB 16.98 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js = 70.97 kB 70.79 kB = 17.06 kB 16.98 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js = 67.05 kB 66.87 kB = 16.17 kB 16.09 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js = 67.05 kB 66.87 kB = 16.17 kB 16.09 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js = 66.54 kB 66.36 kB = 16.00 kB 15.92 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js = 66.54 kB 66.36 kB = 16.00 kB 15.92 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js = 64.68 kB 64.50 kB = 14.04 kB 13.97 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js = 63.29 kB 63.11 kB = 15.04 kB 14.95 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js = 63.29 kB 63.11 kB = 15.04 kB 14.95 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js = 63.05 kB 62.87 kB = 14.97 kB 14.89 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js = 63.05 kB 62.87 kB = 14.97 kB 14.89 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js = 63.04 kB 62.87 kB = 15.26 kB 15.18 kB
oss-stable/react-client/cjs/react-client-flight.development.js = 63.04 kB 62.87 kB = 15.26 kB 15.18 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js = 46.65 kB 46.48 kB = 10.88 kB 10.80 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js = 46.65 kB 46.48 kB = 10.88 kB 10.80 kB
oss-experimental/react/cjs/react-jsx-runtime.react-server.development.js = 43.10 kB 42.94 kB = 13.03 kB 12.94 kB
oss-stable-semver/react/cjs/react-jsx-runtime.react-server.development.js = 43.10 kB 42.94 kB = 13.03 kB 12.94 kB
oss-stable/react/cjs/react-jsx-runtime.react-server.development.js = 43.10 kB 42.94 kB = 13.03 kB 12.94 kB
oss-experimental/react/cjs/react-jsx-runtime.development.js = 42.68 kB 42.51 kB = 12.91 kB 12.82 kB
oss-stable-semver/react/cjs/react-jsx-runtime.development.js = 42.68 kB 42.51 kB = 12.91 kB 12.82 kB
oss-stable/react/cjs/react-jsx-runtime.development.js = 42.68 kB 42.51 kB = 12.91 kB 12.82 kB
oss-experimental/react/cjs/react-jsx-dev-runtime.development.js = 41.45 kB 41.28 kB = 12.56 kB 12.47 kB
oss-stable-semver/react/cjs/react-jsx-dev-runtime.development.js = 41.45 kB 41.28 kB = 12.56 kB 12.47 kB
oss-stable/react/cjs/react-jsx-dev-runtime.development.js = 41.45 kB 41.28 kB = 12.56 kB 12.47 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-persistent.development.js = 42.84 kB 42.66 kB = 9.80 kB 9.71 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-persistent.development.js = 42.84 kB 42.66 kB = 9.80 kB 9.71 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-persistent.development.js = 42.84 kB 42.66 kB = 9.80 kB 9.71 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer.development.js = 42.71 kB 42.53 kB = 9.78 kB 9.69 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer.development.js = 42.71 kB 42.53 kB = 9.78 kB 9.69 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer.development.js = 42.71 kB 42.53 kB = 9.78 kB 9.69 kB
oss-experimental/react-is/cjs/react-is.development.js = 6.64 kB 6.46 kB = 1.87 kB 1.77 kB
oss-stable-semver/react-is/cjs/react-is.development.js = 6.64 kB 6.46 kB = 1.87 kB 1.77 kB
oss-stable/react-is/cjs/react-is.development.js = 6.64 kB 6.46 kB = 1.87 kB 1.77 kB
oss-experimental/jest-react/cjs/jest-react.development.js = 4.36 kB 4.18 kB = 1.57 kB 1.47 kB
oss-stable-semver/jest-react/cjs/jest-react.development.js = 4.36 kB 4.18 kB = 1.57 kB 1.47 kB
oss-stable/jest-react/cjs/jest-react.development.js = 4.36 kB 4.18 kB = 1.57 kB 1.47 kB
test_utils/ReactAllWarnings.js Deleted 64.44 kB 0.00 kB Deleted 16.10 kB 0.00 kB

Generated by 🚫 dangerJS against 0688f2d

export const ELEMENT_SYMBOL_STRING = 'Symbol(react.element)';
export const ELEMENT_SYMBOL_STRING = 'Symbol(react.transitional.element)';
export const LEGACY_ELEMENT_NUMBER = 0xeac7;
export const LEGACY_ELEMENT_SYMBOL_STRING = 'Symbol(react.element)';
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

From what I can tell, these are not used anyway but if we did, we'd check for both.

@kassens
Copy link
Member

kassens commented Apr 10, 2024

I noticed babel has a reference to this
https://github.com/babel/babel/blob/08b0472069cd207f043dd40a4d157addfdd36011/packages/babel-helpers/src/helpers/jsx.js#L11

There are also a couple of internal references at Meta that would need to be checked before merging this.

@sebmarkbage
Copy link
Collaborator Author

I mean those are either broken or causing the page to deopt so you probably want to change them ASAP.

@sebmarkbage
Copy link
Collaborator Author

It seems like Babel uses an inline helper for the @babel/plugin-transform-react-inline-elements only which is not really supported. So hopefully the error message I've included gives a hint.

@sebmarkbage
Copy link
Collaborator Author

In addition to changing the format, we plan on JSX in RSC to have side-effects so the inlining strategy won't work in RSC regardless. So just upgrading an inlining plugin to use the new format might not be a good idea.

@sebmarkbage sebmarkbage force-pushed the renameelement branch 2 times, most recently from ef8ab3a to a0cebcf Compare April 21, 2024 17:09
@sebmarkbage sebmarkbage merged commit 3b551c8 into facebook:main Apr 22, 2024
38 checks passed
@sebmarkbage
Copy link
Collaborator Author

Flagged for FB for now.

github-actions bot pushed a commit that referenced this pull request Apr 22, 2024
We have changed the shape (and the runtime) of React Elements. To help
avoid precompiled or inlined JSX having subtle breakages or deopting
hidden classes, I renamed the symbol so that we can early error if
private implementation details are used or mismatching versions are
used.

Why "transitional"? Well, because this is not the last time we'll change
the shape. This is just a stepping stone to removing the `ref` field on
the elements in the next version so we'll likely have to do it again.

DiffTrain build for commit 3b551c8.
github-actions bot pushed a commit that referenced this pull request Apr 22, 2024
We have changed the shape (and the runtime) of React Elements. To help
avoid precompiled or inlined JSX having subtle breakages or deopting
hidden classes, I renamed the symbol so that we can early error if
private implementation details are used or mismatching versions are
used.

Why "transitional"? Well, because this is not the last time we'll change
the shape. This is just a stepping stone to removing the `ref` field on
the elements in the next version so we'll likely have to do it again.

DiffTrain build for [3b551c8](3b551c8)
@@ -166,6 +167,16 @@ function coerceRef(
}

function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
if (newChild.$$typeof === REACT_LEGACY_ELEMENT_TYPE) {
Copy link
Member

Choose a reason for hiding this comment

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

I think this might be missing the flag check (haven't run the code internally yet). Not sure why tests wouldn't fail.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

We only get to this error handling path when there's no match, but with the flag off there would be a match.

This is just detecting which error message to provide if there's an error.

@Tobbe
Copy link

Tobbe commented Apr 25, 2024

I'm not sure, and I don't understand exactly why, but I think this commit might have broken our snapshot tests

image

Is it really because of this commit?
Is this expected?
Should I try to update the test to now expect this output?

@unstubbable
Copy link
Contributor

@Tobbe I assume this is from https://github.com/redwoodjs/redwood, right? You need to make sure that you install the canary version of react-is (e.g. via yarn's resolutions), because Jest's snapshot pretty formatting is using that to determine whether an object is a react element. See https://github.com/jestjs/jest/blob/b019f507fb7e4246ecb6c668fe56bfa8685e6c4a/packages/pretty-format/src/plugins/ReactElement.ts#L116

@Tobbe
Copy link

Tobbe commented Apr 25, 2024

@unstubbable Amazing! Thank you 🙏
Already have a few resolutions to support React19, so this will just be yet another one in the list 😅

bigfootjon pushed a commit that referenced this pull request Apr 25, 2024
We have changed the shape (and the runtime) of React Elements. To help
avoid precompiled or inlined JSX having subtle breakages or deopting
hidden classes, I renamed the symbol so that we can early error if
private implementation details are used or mismatching versions are
used.

Why "transitional"? Well, because this is not the last time we'll change
the shape. This is just a stepping stone to removing the `ref` field on
the elements in the next version so we'll likely have to do it again.

DiffTrain build for commit 3b551c8.
@eps1lon eps1lon mentioned this pull request May 2, 2024
1 task
hoxyq added a commit that referenced this pull request May 7, 2024
…mbol (#28982)

Follow-up to #28813.

RDT is using `typeOf` from `react-is` to determine the element display
name, I've forked an implementation of this method, but will be using
legacy element symbol.
hoxyq added a commit that referenced this pull request May 8, 2024
Full list of changes (not a public changelog):
* fix[react-devtools/ci]: fix configurations for e2e testing
([hoxyq](https://github.com/hoxyq) in
[#29016](#29016))
* feat[react-devtools]: display forget badge for components in profiling
session ([hoxyq](https://github.com/hoxyq) in
[#29014](#29014))
* fix[react-devtools]: add backwards compat with legacy element type
symbol ([hoxyq](https://github.com/hoxyq) in
[#28982](#28982))
* Expose "view source" options to Fusebox integration
([motiz88](https://github.com/motiz88) in
[#28973](#28973))
* Enable inspected element context menu in Fusebox
([motiz88](https://github.com/motiz88) in
[#28972](#28972))
* Check in `frontend.d.ts` for react-devtools-fusebox, include in build
output ([motiz88](https://github.com/motiz88) in
[#28970](#28970))
* Devtools: Fix build-for-devtools
([eps1lon](https://github.com/eps1lon) in
[#28976](#28976))
* Move useMemoCache hook to react/compiler-runtime
([kassens](https://github.com/kassens) in
[#28954](#28954))
* warn -> error for Test Renderer deprecation
([acdlite](https://github.com/acdlite) in
[#28904](#28904))
* [react-dom] move all client code to `react-dom/client`
([gnoff](https://github.com/gnoff) in
[#28271](#28271))
* Rename the react.element symbol to react.transitional.element
([sebmarkbage](https://github.com/sebmarkbage) in
[#28813](#28813))
* Rename Forget badge ([jbonta](https://github.com/jbonta) in
[#28858](#28858))
* Devtools: Add support for useFormStatus
([eps1lon](https://github.com/eps1lon) in
[#28413](#28413))
FMota0 added a commit to plasmicapp/react-ssr-prepass that referenced this pull request Nov 26, 2024
Make prepass backwards compatible with react v19, it was necessary to handle with the following changes in React:
- facebook/react#28789
- facebook/react#28813
- facebook/react#28226
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.

7 participants