The React Compiler, is a build-time tool designed to automatically optimize React applications by handling memoization and reducing unnecessary re-renders. This compiler, formerly known as React Forget, was first introduced at React Conf in 2021.
What Does It Do Exactly?
The primary function of the React Compiler is to automate the memoization process in React applications. Memoization is an optimization technique where the results of expensive function calls are cached so that subsequent calls with the same arguments can return the cached result, improving performance. React offers hooks like useMemo, useCallback, and higher-order components like React.memo to manually handle memoization. However, these manual methods can be error-prone and challenging to maintain. Especially if you want to prevent unnecessary rerenders of child components. The React Compiler addresses this by automatically analyzing the code and applying memoization where necessary, ensuring that components re-render only when their inputs change.
How to use it today?
To integrate the React Compiler into your project, follow these steps:
Check Compatibility: Before installation, it’s advisable to assess your codebase’s compatibility with the React Compiler. Run the following command:
npx react-compiler-healthcheck@latest
or, if you are using yarn:
yarn dlx react-compiler-healthcheck@latest
This script evaluates how many components in your project can be optimized by the compiler and checks for any incompatible libraries.
Output looks like this:
Successfully compiled 46 out of 52 components.
StrictMode usage found.
Found no usage of incompatible libraries.
Install the Compiler and ESLint Plugin: If your project is compatible, proceed to install the React Compiler and its accompanying ESLint plugin:
npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
or, if you are using yarn:
yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta
The ESLint plugin provides real-time feedback in your code editor, highlighting areas where the compiler’s optimizations apply.
It mainly checks if your code violates the rules of React.
Next step, if you are using Vite, update the configuration of the React plugin:
const ReactCompilerConfig = {
/* In my case, I left this empty */
};
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
babel: {
plugins: [[“babel-plugin-react-compiler”, ReactCompilerConfig]]
}
}),
// …
],
});
How to test if it works?
If you are using the React developer tools plugin for your browser, and you inspect your component tree, you will see that most of the components now have a [ Memo ✨ ] mark.
Without the React Compiler:
| With the React Compiler:
|
Benefits
I was hoping that the React compiler would make my application faster. Not that it was slow, but extended use (as a mobile PWA game) was quite taxing on the battery.
After enabling the React compiler, I measured the render time in the profiler, and the render time was halved! Even though the compiler is still in beta, the benefits are really noticeable.
Render time without React Compiler:
Render time with React Compiler:
Same amount of actions took 3.6ms of rendertime, while it was 7.3ms without the compiler
And the nice thing is that all these memoizations are not part of the codebase, keeping the code readable and focussed on features. All these wrappings of memoization made the bundler a bit bigger, (about 20k) but that was a really small price to pay for the performance gains.
I think the compiler is a great success and I am really curious what further optimizations will be added in the compiler. The beta so far has been great!
