React Compiler Setup [Experimental]

Experimental Features
1

React has announced its, currently experimental, React Compiler.

Try it out
You can now try this out in your redwood project by running:

yarn rw exp setup-react-compiler

After this you should be able to continue as you would normally using dev or build & serve. If you inspect your pages with the react dev tools you should hopefully see where the compiler has performed auto memoisation.

This command will install both the eslint and babel plugin packages. It will also enable a flag in your toml file:

[experimental.reactCompiler]
  enabled = true
  lintOnly = false

If you set enabled = false then this will disable the compiler integration. If you have lintOnly = true then this will disable the compiler integration but keep the associated linting rules active.

Prerequisites
This setup command is currently available in canary versions of redwood but will be released in our next stable release which is forthcoming.

Your project itself must:

  1. Be using Vite.
  2. Be using at least version 19 of React (currently in beta).
    • You will have this version if you have enabled the streaming-ssr or RSC experimental features.

Note
This is an experimental feature from React and will not always work perfectly. You can tell us here but also please keep in mind that you might want to inform the React team as they will appreciate all feedback on their new product.

1 Like
4

Mostly works for my initial test (on a pretty basic app).

couple of caveats:

  1. i added dependencies to my package.json as suggest by react team
    ā€œ@types/reactā€: ā€œnpm:types-react@betaā€,
    ā€œ@types/react-domā€: ā€œnpm:types-react-dom@betaā€,

  2. As can be expected included packages might not work.
    in my case ā€˜react-to-printā€™ does not work (it does work in react 18.2.0

1 Like
5

It would be nice to be able to use the eslint-plugin-react-compiler part of this without everything else (for e.g. the update to 19) to start preparing for this change as early as possible.

1 Like
6

True, thereā€™s no reason we canā€™t conditionally enable the linting and disable the actual compiler. Iā€™ll try to get to implementing that small change over the weekend.

1 Like
7

I just merged the change for supporting lint only. Iā€™ve updated the main description here too.

1 Like
8

Thank you, seems to work as advertised.

1 Like