React Compiler Beta Release: Highlights and Updates

    Friday, October 25, 20248 min read180 views
    React Compiler Beta Release: Highlights and Updates

    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.

    What Does the Compiler Do?

    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.

    Primary Features

    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.

    How to Use the Beta Release?

    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.

    To install React Compiler Beta

    npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

    If you’re using Yarn

    yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

    Vite

    If 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],
              ],
            },
          }),
        ],
        // ...
      };
    });

    Next.js

    To use it, upgrade to Next.js 15, install the babel-plugin-react-compiler:

    npm install babel-plugin-react-compiler

    Then, add the experimental.reactCompiler option in next.config.js:

    import type { NextConfig } from 'next'
    const nextConfig: NextConfig = {
      experimental: {
        reactCompiler: true,
      },
    }
    export default nextConfig

    Optionally, 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 nextConfig

    Remix

    Install 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],
            ],
          },
        }),
      ],
    });
    

    Webpack

    A community Webpack loader is now available here.

    Expo

    Install babel-plugin-react-compiler in your project:

    npx expo install babel-plugin-react-compiler

    Toggle 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@beta

    Enabling Eslint Plugin Now

    1. 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-compiler
    1. Update 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',
      },
    };

    Metro (React Native)

    React Native uses Babel via Metro therefore it is the same way as we mentioned in the first part of this section.

    What's New in the React Compiler?

    The React compiler beta has several new features and improvements that aim to enhance the performance and development experience of React applications:

    1. Automatic memorization

    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.

    2. Improved performance

    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.

    3. Enhanced development experience

    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.

    4. Experimental features

    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.

    Using React Compiler in Libraries

    The React compiler can be used to compile libraries, but it requires a different approach than compiling applications.

    1. Independent Compilation

    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.

    2. Shipping Compiled Code

    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.

    3. Compatibility with Older React Versions

    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.

    Stable Version Expectation

    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.

    24

    Related articles

    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.