Jan 26, 2025

React Compiler Integration With Astro (Vite)

• 2 min read

React compiler was introduced to tackle massive re-rendering issues within a react application. What it does is that it looks at the code and figures out if a certain component or a value can be memoized or not to limit its re-rendering. Does that mean you should not use useCallback(), useMemo() or React.memo() from now? Not really.

You should do manual memoization wherever you are certain that you don't want to re-render a particular component or value until something changes. React compiler is more of a safeguard in case you forgot to memoize something which should be memoized.

Now that I gave a shallow explanation of what the react compiler is and what it does, let me tell you how to integrate it with an Astro project which uses React components.

React Compiler Deep Dive!

Installing React Compiler

React compiler is compatible with versions of React above 17 and is currently in beta. It is available as a babel plugin, so to install it, install the following two packages:

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

It's not necessary to install the eslint plugin. You can skip the installation of that package if needed. It is only important if you want to see if any React component breaks the rules of React inside your editor.

For folks who are not yet on React 19 and are using versions 17 or 18, you need to install one more package named react-compiler-runtime@beta.

npm install react-compiler-runtime@beta

Integrating with Astro

Once you install the compiler, go to the astro config file (usually astro.config.mjs) and add the babel plugin to the @astrojs/react package.

import react from '@astrojs/react';

// https://astro.build/config
export default defineConfig({
  // ...
  integrations: [react({
    babel: { 
      plugins: [
        ["babel-plugin-react-compiler"]
      ]
    }
  })],
});

For React 17+ users, after installing the react-compiler-runtime@beta package, you need to set a target key in the compiler config. Set it to the major version of React which you are using.

import react from '@astrojs/react';

const compilerConfig = { 
  target: '17' // can be '17' | '18' | '19'
};

// https://astro.build/config
export default defineConfig({
  // ...
  integrations: [react({
    babel: {
      plugins: [
        ["babel-plugin-react-compiler", compilerConfig] 
      ]
    }
  })],
});

That's it, react compiler is now integrated with Astro. You can follow a similar approach to integrate react compiler with any frameworks which use Vite. You just need to add the babel plugin to the react adapter/plugin you are using for Vite.

Pro Tip

Want to check the performance post integration? That can be done using a package named react-scan by Aiden Bai.

Add the script tag in your index layout file and it will be ready to use.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="description" content="myai" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script> 
        <title>{title}</title>
    </head>
    <body>
    </body>
</html>

React Compiler Integration With Astro (Vite)

Installing React Compiler

Integrating with Astro

Related posts ✍️