Add React Compiler #4161
Merged
Add React Compiler #4161
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
React Compiler uses a small cache function from React 19 at runtime. Until it's possible to use R19 on RN, this adds a userspace implementation to polyfill the cache function
@lingui recommends running their `macro` plugin [first in the pipeline](https://lingui.dev/ref/macro). Normally with the React Compiler, the compiler plugin should run first as we want to see the original code as it was written. However, this sometimes causes conflicts with other babel plugins. In this case, it looks like the @lingui/macro plugin does some very light transformation that the compiler can still understand and compile correctly, so let's run it first. Before this commit, the compiler would cause the @lingui/macro plugin to crash because it seems like it would strip off the `extra.raw` property off of StringLiterals which was being used [here](https://github.com/lingui/js-lingui/blob/1293412c5dcc565636403443788a5b5d4ca206c1/packages/macro/src/macroJsx.ts#L395). I need to figure out why the compiler is doing that but for now this works and should be a safe change unless there were specific reasons the macro plugin was placed 2nd to last.
|
I am curious if this work in production now, and how you upgraded the Babel plugin? I tried this, and my Expo app completely broke... |
|
yeah, i don't think we've had a single issue related to it |
|
@gaearon it might also be worth upgrading the compiler and letting us know if there are any issues! We've fixed a ton of bugs since then |
|
yeah! will need to try that. what's a good hash that has been baked for a bit? |
|
@gaearon https://www.npmjs.com/package/babel-plugin-react-compiler/v/0.0.0-experimental-8d2bec7-20240812 has been in use internally since 8/9 and we haven't seen any issues yet |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In my ReactConf talk I demo'd adding React Compiler to bluesky, so I wanted to add it for real!
Adding the compiler and eslint plugin was pretty straightforward. The only hiccup I ran into was an interesting interaction with @lingui/macro:
lingui recommends running their
macroplugin first in the pipeline. Normally with the React Compiler, the compiler plugin should run first as we want to see the original code as it was written. However, this sometimes causes conflicts with other babel plugins.In this case, it looks like the @lingui/macro plugin does some very light transformation that the compiler can still understand and compile correctly, so I made it run first.
Without letting @lingui/macro run first, the compiler would cause the @lingui/macro plugin to crash because it seems like it would strip off the
extra.rawproperty off of StringLiterals which was being used here. I need to figure out why the compiler is doing that, but for now this works and should be a safe change unless there were specific reasonsthe macro plugin was placed 2nd to last.