React Compiler Experimental Release Strategy

[poteto]

Goals of the React Compiler Experimental Release

Milestone 1: React Compiler works well on modern React apps

The first primary milestone for this experimental release is to collect high quality feedback about correctness, performance, and developer experience from the community about React Compiler on React apps.

• Correctness – does the compiler correctly compile the application and preserve its original behavior? Is the compiled app free of unexpected infinite loops and/or over-firing of useEffects?
• Performance – does the compiler raise the performance floor for all kinds of React apps – from completely static to completely dynamic? How does the increase in bundle size trade off against better rendering performance?
• Developer Experience – does the compiler help you write better React? Are the lints/error messages understandable? Is it easy to debug when something goes wrong? Does it allow you to remove manual useMemos and useCallbacks? Does React become simpler to use and understand with the compiler enabled?

Milestone 2: React Compiler works well on modern React libraries

The next milestone will be to collect feedback from library authors about how to ensure that libraries are compatible with the compiler, and documenting patterns for libraries to follow to ensure their users can use the library without breaking React's rules. We'll share more details as we approach this milestone.

Milestone 3: React Compiler stable release

Based on the feedback collected during the first 2 milestones, we will then figure out a roadmap to get the compiler to a stable release that can be recommended for use in production by all React users.

---

🟢 The rest of this post will talk about Milestone 1.

Non-goals

Since our primary goal is to collect feedback to get to a stable release, we are not making broad adoption of the compiler a goal yet. This means we are okay with not everyone trying out the compiler. In particular, this means we'll prioritize getting the compiler working with the latest version of React, which is 19. You can still try to use the compiler on older versions, but this is not recommended.

Focus on React apps first, libraries later

As some brief background, React Compiler optimizes your application automatically by bounding cascading renders. That is, it automatically memoizes components and hooks to reduce the cost of re-rendering a whole subtree when only a small part of it has changed.

Concretely, this means that it is not necessary for the compiler to compile everything in order for you to see performance benefits. It's more important to memoize parent components that have large subtrees, because doing so can prevent that whole subtree from being re-rendered unnecessarily.

For this reason, we are focusing the first experimental release on React apps and not libraries. Our current thinking there is that library authors will need to separately compile their libraries with React Compiler and test that it still works before publishing the compiled version to package registries.

For the compiler to work effectively (and for React apps to function without bugs!), the compiler must assume that code follows the Rules of React. While in many cases the compiler can statically detect violations and bail out safely, due to the flexible and dynamic nature of JavaScript it's not possible to comprehensively detect all violations.

We've found that libraries tend to be the biggest source of Rules of React violations, so it will take the combined efforts of the open source community and the React team to bring as many libraries as possible forward. We're looking forward to partnering with library authors on Milestone 2 once we've made more progress on collecting feedback on the first experimental release!

Recommended approach

Try out the compiler incrementally

Although we have rolled out the compiler to several high-traffic sites at Meta, it is still experimental and we recommend caution when adopting it. Based on our experience rolling out the compiler at Meta, we recommend the following approach:

• Enable the compiler on portions of your site at a time. Use the sources option to specify either a list of prefixes that should be compiled, or provide a function ((fileName: string) => boolean) which returns true if the given path should be compiled. By default, the compiler will attempt to compile components and hooks in all files excluding node_modules. We recommend starting with a small set of files and expanding over time (after repeating the full set of steps for each wave of files).
• Test the compiled version of the site locally.
• If at all possible, use an A/B test if you test in production. That is, ship the compiled version of the code to only a small subset of users to minimize the impact if there problems.
• File a GitHub issue or create a discussion topic here (with repros if possible) for any issues you encounter.

[poteto]

Update: https://react.dev/blog/2024/10/21/react-compiler-beta-release#roadmap-to-stable