...
What is React Compiler?
From React Compiler - React (What does the compiler do?) :
In order to optimize applications, React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as
useMemo,useCallback, andReact.memo. With these APIs you can tell React that certain parts of your application don’t need to recompute if their inputs haven’t changed, reducing work on updates. While powerful, it’s easy to forget to apply memoization or apply them incorrectly. This can lead to inefficient updates as React has to check parts of your UI that don’t have any meaningful changes.If your codebase is already very well-memoized, you might not expect to see major performance improvements with the compiler. However, in practice memoizing the correct dependencies that cause performance issues is tricky to get right by hand.
Why is React Compiler something we want to use?
The main benefits I see from React Compiler regard maintainability. Memoization can be tricky to get right, and being able to rely on the compiler for that aspect of performance will allow us to have all the performance benefits without needing to maintain handwritten memoization code.
Things I’ve Learned
React Compiler is currently in Beta (as of writing 2025/01/30)
React Compiler can be used with React 17, 18, or 19 React Compiler - React (Using React Compiler with React 17 or 18)
There is a community Webpack loader for React Compiler
React Compiler is fairly strict about projects following the Rules of React
There is a React Compiler eslint plugin that can be used even if React Compiler itself isn’t being used
...