diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md
index 6cce34c6b6b..0ae0df17eaf 100644
--- a/src/content/learn/react-compiler/installation.md
+++ b/src/content/learn/react-compiler/installation.md
@@ -64,9 +64,32 @@ module.exports = {
### Vite {/*vite*/}
-If you use Vite, you can add the plugin to vite-plugin-react:
+If you use Vite with version 6.0.0 or later of `@vitejs/plugin-react`, you can use the `reactCompilerPreset`:
-```js {3,9}
+
+npm install -D @rolldown/plugin-babel
+
+
+```js {3-4,9-11}
+// vite.config.js
+import { defineConfig } from 'vite';
+import react, { reactCompilerPreset } from '@vitejs/plugin-react';
+import babel from '@rolldown/plugin-babel';
+
+export default defineConfig({
+ plugins: [
+ react(),
+ babel({
+ presets: [reactCompilerPreset()]
+ }),
+ ],
+});
+```
+
+
+In `@vitejs/plugin-react@6.0.0`, the inline Babel option was removed. If you're using an older version, you can use:
+
+```js
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
@@ -81,26 +104,21 @@ export default defineConfig({
],
});
```
+
-Alternatively, if you prefer a separate Babel plugin for Vite:
-
-
-npm install -D vite-plugin-babel
-
+Alternatively, you can use the Babel plugin directly with `@rolldown/plugin-babel`:
-```js {2,11}
+```js {3,9}
// vite.config.js
-import babel from 'vite-plugin-babel';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
+import babel from '@rolldown/plugin-babel';
export default defineConfig({
plugins: [
react(),
babel({
- babelConfig: {
- plugins: ['babel-plugin-react-compiler'],
- },
+ plugins: ['babel-plugin-react-compiler'],
}),
],
});
diff --git a/src/content/reference/react/useOptimistic.md b/src/content/reference/react/useOptimistic.md
index 702f9936ce9..5944f387828 100644
--- a/src/content/reference/react/useOptimistic.md
+++ b/src/content/reference/react/useOptimistic.md
@@ -83,7 +83,7 @@ function handleClick() {
#### How optimistic state works {/*how-optimistic-state-works*/}
-`useOptimistic` lets you show a temporary value while a Action is in progress:
+`useOptimistic` lets you show a temporary value while an Action is in progress:
```js
const [value, setValue] = useState('a');