On 22nd October 2024, React published React Compiler Beta for early adopters and library maintainers to experiment with the React compiler and provide their genuine and early feedback. They are supporting the React compiler for applications React 17+ with the aid of an optional react-compiler-runtime package.
At React Conf 2024, the React compiler's experimental release was announced. The compiler's primary aim is to optimize React applications through automatic memoization. They are also opening a public membership of the React Compiler Working Group for the React team and community for the gradual adoption of this built-in tool.
From the first release, React has fixed multiple bugs along with some high-quality fixes all suggested by the React community. This resulted in a more resilient compiler to a wide spectrum of diversity of JavaScript patterns.
Let's see what the React compiler beta release is and how suitable it is for your React development project.
The React compiler automatically memoizes code to optimize application performance. It analyzes your code to identify parts that don't need to be recomputed if their inputs haven't changed. This reduces unnecessary updates and provides major performance improvements.
Automatic memoization: The compiler applies memoization techniques without requiring explicit use of useMemo, useCallback, or React.memo.
Rule-based optimization: It understands JavaScript and React's rules to determine which parts of your code can be memoized safely.
Selective optimization: If the React compiler determines potential issues, it can skip optimizing specific components or hooks to avoid breaking your React app.
No need for 100% optimization: Even if your code is well-memoized, the compiler can still provide benefits by identifying and optimizing critical areas.
Overall, the React compiler simplifies the process of performance optimization of your existing projects by automating memoization and ensuring correctness.
With the update on the React compiler in the React India 2024 conference, they have now announced a new Beta release of the React Compiler and ESLint plugin. These new betas are published to npm using the @beta tag.
npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@betayarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@betaIf you use Vite, you can add the plugin to vite-plugin-react:
// vite.config.js
const ReactCompilerConfig = { /* ... */ };
export default defineConfig(() => {
return {
plugins: [
react({
babel: {
plugins: [
["babel-plugin-react-compiler", ReactCompilerConfig],
],
},
}),
],
// ...
};
});To use it, upgrade to Next.js 15, install the babel-plugin-react-compiler:
npm install babel-plugin-react-compilerThen, add the experimental.reactCompiler option in next.config.js:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
reactCompiler: true,
},
}
export default nextConfigOptionally, you can configure the compiler to run in "opt-in" mode as follows:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
reactCompiler: {
compilationMode: 'annotation',
},
},
}
export default nextConfigInstall vite-plugin-babel, and add the compiler’s Babel plugin to it:
npm install vite-plugin-babel// vite.config.js
import babel from "vite-plugin-babel";
const ReactCompilerConfig = { /* ... */ };
export default defineConfig({
plugins: [
remix({ /* ... */}),
babel({
filter: /\.[jt]sx?$/,
babelConfig: {
presets: ["@babel/preset-typescript"], // if you use TypeScript
plugins: [
["babel-plugin-react-compiler", ReactCompilerConfig],
],
},
}),
],
});
A community Webpack loader is now available here.
Install babel-plugin-react-compiler in your project:
npx expo install babel-plugin-react-compilerToggle on the React Compiler experiment in your app config file:
{
"experiments": {
"reactCompiler": true
}
}Install the React compiler runtime module:
npx expo install react-compiler-runtime@betaEnabling Eslint Plugin Now
Run npx expo lint to ensure ESLint is set in your app, then install the ESLint plugin for React Compiler:
npx expo install eslint-plugin-react-compilerUpdate your ESLint configuration to include the plugin:
// https://docs.expo.dev/guides/using-eslint/
module.exports = {
extends: 'expo',
plugins: ['eslint-plugin-react-compiler'],
rules: {
'react-compiler/react-compiler': 'error',
},
};React Native uses Babel via Metro therefore it is the same way as we mentioned in the first part of this section.
The React compiler beta has several new features and improvements that aim to enhance the performance and development experience of React applications:
The compiler can now automatically memoize values or groups of values within your components and hooks, reducing the number of unnecessary re-renders. This is especially useful for components that are expensive to render.
The compiler has been optimized to provide better performance, especially for large applications. It can now analyze and optimize code more efficiently, leading to faster build times and improved runtime performance.
The compiler includes new features to improve the development experience, such as better error messages and warnings. It can also help you identify potential performance bottlenecks in your code.
The compiler includes some experimental features that are not yet fully supported but may be useful for advanced users. These features include support for new React APIs and experimental optimization techniques.
The React compiler can be used to compile libraries, but it requires a different approach than compiling applications.
Library maintainers should compile and test their libraries with the compiler separately from the application's build pipeline. This is because the compiler needs to run on the original source code before any code transformations to optimize applications.
After compilation, library authors should publish the compiled code to npm. This way, users of the library can benefit from the automatic memoization applied during compilation without needing to enable the compiler in their own applications.
If your library targets apps that are not yet on React 19, you should specify a minimum target and add the react-compiler-runtime package as a direct dependency. This package will ensure that the correct implementation of APIs is used based on the application's React version and will polyfill any missing APIs if necessary.
We can expect the stable release of the React compiler in the near future when apps and libraries substantially prove to work efficiently with the React compiler. React confirmed that after taking broad feedback from the React community, they plan to release a stable release allowing developers to use it in the React applications.
The release also includes the compiler’s ESLint plugin and they are planning to amalgamate the existing eslint-plugin-react-hooks plugin with the compiler’s ESLint plugin, so only when needed one plugin can do the work of two and reduce performance issues.
This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.
