React Compiler Integration With Astro (Vite)
Updated
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 stable (v1 was released on Oct 7, 2025). It is available as a babel plugin, so to install it, install the babel-plugin-react-compiler package:
npm install babel-plugin-react-compiler@latestFor 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@latest.
npm install react-compiler-runtime@latestIntegrating 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@latest 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: '19' // can be '17' | '18' | '19', default is 19
};
// https://astro.build/config
export default defineConfig({
// ...
integrations: [react({
babel: {
plugins: [
// make sure this is first in the plugins list
["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.
INFO
If you are using vite + react via the @vitejs/plugin-react package with no meta-framework, you can configure the compiler in a similar way in vite's config file.
// vite.config.{js,ts}
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
const compilerConfig = {
target: '19' // can be '17' | '18' | '19', default is 19
};
export default defineConfig({
plugins: [
react({
babel: {
plugins: ['babel-plugin-react-compiler', compilerConfig],
},
}),
],
});Linting with ESLint
eslint-plugin-react-hooks provides rules for identifying violations of the Rules of React.
When the ESLint rule reports an error, it means the compiler will skip optimizing that specific component or hook. - react.dev
Install the eslint plugin and configure it based on your eslint config as documented here in the react repository docs.
npm install -D eslint-plugin-react-hooks@latestPro 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>