diff --git a/src/content/docs/en/guides/integrations-guide/react.mdx b/src/content/docs/en/guides/integrations-guide/react.mdx index 5109ab8fe6f98..815a3a2c9387f 100644 --- a/src/content/docs/en/guides/integrations-guide/react.mdx +++ b/src/content/docs/en/guides/integrations-guide/react.mdx @@ -13,6 +13,10 @@ import Since from '~/components/Since.astro'; This **[Astro integration][astro-integration]** enables rendering and client-side hydration for your [React](https://react.dev/) components. +:::tip[Upgrading to v7.0.0?] +`@astrojs/react` v7.0.0 removes the `babel` integration option. See [Upgrading the React integration to v7.0.0](#upgrading-the-react-integration-to-v700) for migration instructions. +::: + ## Installation Astro includes an `astro add` command to automate the setup of official integrations. If you prefer, you can [install integrations manually](#manual-install) instead. @@ -223,6 +227,93 @@ export default defineConfig({ }); ``` +### React Compiler + +

+ +**Type:** `boolean | object`
+**Default:** `false`
+ +

+ +By default, `@astrojs/react` uses [Oxc](https://oxc.rs/) to compile your JSX and enable Fast Refresh. It doesn't memoize your components or hooks. + +Set `compiler: true` to automatically memoize client components and hooks with the [experimental Oxc React Compiler](https://oxc.rs/docs/guide/usage/transformer/react-compiler). This can reduce unnecessary re-renders without writing `useMemo()`, `useCallback()`, or `React.memo()` yourself. + +The compiler requires the installation of [`oxc-transform-react`](https://www.npmjs.com/package/oxc-transform-react): + + + + ```sh + npm install -D oxc-transform-react + ``` + + + ```sh + pnpm add -D oxc-transform-react + ``` + + + ```sh + yarn add -D oxc-transform-react + ``` + + + +The compiler targets your installed React version. React 17 and 18 don't ship the compiler runtime helpers. If your project uses one of these versions, also install [`react-compiler-runtime`](https://www.npmjs.com/package/react-compiler-runtime): + + + + ```sh + npm install react-compiler-runtime + ``` + + + ```sh + pnpm add react-compiler-runtime + ``` + + + ```sh + yarn add react-compiler-runtime + ``` + + + +Then, enable the compiler in your React integration: + +```js title="astro.config.mjs" ins={6} +import { defineConfig } from 'astro/config'; +import react from '@astrojs/react'; + +export default defineConfig({ + integrations: [ + react({ compiler: true }), + ], +}); +``` + +You can also pass an object for finer control over the compiler configuration. + +The following example configures `compilationMode` to compile only components and hooks marked with a `"use memo"` directive: + +```js title="astro.config.mjs" {7-9} +import { defineConfig } from 'astro/config'; +import react from '@astrojs/react'; + +export default defineConfig({ + integrations: [ + react({ + compiler: { + compilationMode: 'annotation', + }, + }), + ], +}); +``` + +The compiler applies wherever the integration's [`include` and `exclude` options](#combining-multiple-jsx-frameworks) apply. It skips server rendering, dependencies, and `.astro` files. + ### Children parsing Children passed into a React component from an Astro component are parsed as plain strings, not React nodes. @@ -280,6 +371,66 @@ export default defineConfig({ }); ``` +## Upgrading the React integration to v7.0.0 + +`@astrojs/react` v7.0.0 replaces Babel with [Oxc](https://oxc.rs/) to compile JSX and enable Fast Refresh, and upgrades to `@vitejs/plugin-react` v6. + +### Removed: `babel` option + +Configure custom Babel transforms with [`@rolldown/plugin-babel`](https://github.com/rolldown/plugins/tree/main/packages/babel) in [`vite.plugins`](/en/reference/configuration-reference/#vite) instead of the removed `babel` option. + +Install `@rolldown/plugin-babel` and `@babel/core`: + + + + ```sh + npm install -D @rolldown/plugin-babel @babel/core + ``` + + + ```sh + pnpm add -D @rolldown/plugin-babel @babel/core + ``` + + + ```sh + yarn add -D @rolldown/plugin-babel @babel/core + ``` + + + +Then, move your Babel plugins and presets to a `babel()` plugin under `vite.plugins`. + +The following example moves `babel-plugin-styled-components` out of the removed `babel` option: + +```js title="astro.config.mjs" del={7-11} ins={2,12,14-20} +import react from '@astrojs/react'; +import babel from '@rolldown/plugin-babel'; +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + integrations: [ + react({ + babel: { + plugins: ['babel-plugin-styled-components'], + }, + }), + react(), + ], + vite: { + plugins: [ + babel({ + plugins: ['babel-plugin-styled-components'], + }), + ], + }, +}); +``` + +For conditional transforms previously configured with a `babel` callback, see the [`overrides` and preset hooks of `@rolldown/plugin-babel`](https://github.com/rolldown/plugins/tree/main/packages/babel#options). + +You can combine `babel()` with [`compiler: true`](#react-compiler). If your Babel configuration includes `babel-plugin-react-compiler`, remove it first. This avoids applying React Compiler transformations twice to the same components. + [astro-integration]: /en/guides/integrations/ [astro-ui-frameworks]: /en/guides/framework-components/#using-framework-components