Skip to content

Commit fa1c31a

Browse files
committed
React Compiler v1
Updates our blog posts and docs for React Compiler 1.0
1 parent ef80db8 commit fa1c31a

29 files changed

+89
-201
lines changed

src/content/blog/2024/10/21/react-compiler-beta-release.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes).
1212

1313
<Note>
1414

15-
### React Compiler is now in RC! {/*react-compiler-is-now-in-rc*/}
15+
### React Compiler is now stable! {/*react-compiler-is-now-in-rc*/}
1616

17-
Please see the [RC blog post](/blog/2025/04/21/react-compiler-rc) for details.
17+
Please see the [stable release blog post](/blog/2025/10/08/react-compiler-1) for details.
1818

1919
</Note>
2020

src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14310,7 +14310,7 @@ Our hope is that automatically inserting dependencies is not only easier to writ
1431014310
1431114311
## Compiler IDE Extension {/*compiler-ide-extension*/}
1431214312
14313-
Earlier this week [we shared](/blog/2025/04/21/react-compiler-rc) the React Compiler release candidate, and we're working towards shipping the first SemVer stable version of the compiler in the coming months.
14313+
Later in 2025 [we shared](/blog/2025/10/08/react-compiler-1) the first stable release of React Compiler, and we're continuing to invest in shipping more improvements.
1431414314
1431514315
We've also begun exploring ways to use the React Compiler to provide information that can improve understanding and debugging your code. One idea we've started exploring is a new experimental LSP-based React IDE extension powered by React Compiler, similar to the extension used in [Lauren Tan's React Conf talk](https://conf2024.react.dev/talks/5).
1431614316

src/content/blog/2025/10/01/react-19-2.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ function ChatRoom({ roomId, theme }) {
9898
9999
Similar to DOM events, Effect Events always “see” the latest props and state.
100100
101-
**Effect Events should _not_ be declared in the dependency array**. You'll need to upgrade to `eslint-plugin-react-hooks@6.1.1` so that the linter doesn't try to insert them as dependencies. Note that Effect Events can only be declared in the same component or Hook as "their" Effect. These restrictions are verified by the linter.
101+
**Effect Events should _not_ be declared in the dependency array**. You'll need to upgrade to `eslint-plugin-react-hooks@latest` so that the linter doesn't try to insert them as dependencies. Note that Effect Events can only be declared in the same component or Hook as "their" Effect. These restrictions are verified by the linter.
102102
103103
<Note>
104104
@@ -289,7 +289,7 @@ This is because Node Streams are much faster than Web Streams in Node, and Web S
289289
290290
### `eslint-plugin-react-hooks` v6 {/*eslint-plugin-react-hooks*/}
291291
292-
We also published `eslint-plugin-react-hooks@6.1.1` with flat config by default in the `recommended` preset, and opt-in for new React Compiler powered rules.
292+
We also published `eslint-plugin-react-hooks@latest` with flat config by default in the `recommended` preset, and opt-in for new React Compiler powered rules.
293293
294294
To continue using the legacy config, you can change to `recommended-legacy`:
295295
@@ -298,7 +298,7 @@ To continue using the legacy config, you can change to `recommended-legacy`:
298298
+ extends: ['plugin:react-hooks/recommended-legacy']
299299
```
300300
301-
For a full list of compiler enabled rules, [check out the linter docs](/reference/eslint-plugin-react-hooks#additional-rules).
301+
For a full list of compiler enabled rules, [check out the linter docs](/reference/eslint-plugin-react-hooks#recommended).
302302
303303
Check out the `eslint-plugin-react-hooks` [changelog for a full list of changes](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md#610).
304304

src/content/blog/2025/04/21/react-compiler-rc.md renamed to src/content/blog/2025/10/08/react-compiler-1.md

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
2-
title: "React Compiler RC"
2+
title: "React Compiler v1.0"
33
author: Lauren Tan and Mofei Zhang
4-
date: 2025/04/21
5-
description: We are releasing the compiler's first Release Candidate (RC) today.
4+
date: 2025/10/08
5+
description: We are releasing the compiler's first stable release today.
66

77
---
88

9-
April 21, 2025 by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https://x.com/zmofei).
9+
Oct 8, 2025 by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https://x.com/zmofei).
1010

1111
---
1212

@@ -16,80 +16,72 @@ The React team is excited to share new updates:
1616

1717
</Intro>
1818

19-
1. We're publishing React Compiler RC today, in preparation of the compiler's stable release.
19+
1. We're publishing React Compiler 1.0 today.
2020
2. We're merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`.
2121
3. We've added support for swc and are working with oxc to support Babel-free builds.
2222

2323
---
2424

25-
[React Compiler](https://react.dev/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler’s [first beta](https://react.dev/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We’re excited about the wins we’ve seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are working towards a stable release.
25+
[React Compiler](https://react.dev/learn/react-compiler) is a build-time tool that optimizes your React app through automatic memoization. Last year, we published React Compiler’s [first beta](https://react.dev/blog/2024/10/21/react-compiler-beta-release) and received lots of great feedback and contributions. We’re excited about the wins we’ve seen from folks adopting the compiler (see case studies from [Sanity Studio](https://github.com/reactwg/react-compiler/discussions/33) and [Wakelet](https://github.com/reactwg/react-compiler/discussions/52)) and are excited to bring the compiler to more users in the React community.
2626

27-
We are releasing the compiler's first Release Candidate (RC) today. The RC is intended to be a stable and near-final version of the compiler, and safe to try out in production.
27+
We are releasing the compiler's first stable release today. The compiler has been battle tested on major apps at Meta and is fully production-ready.
2828

29-
## Use React Compiler RC today {/*use-react-compiler-rc-today*/}
30-
To install the RC:
29+
## Use React Compiler today {/*use-react-compiler-today*/}
30+
To install the compiler:
3131

3232
npm
3333
<TerminalBlock>
34-
{`npm install --save-dev --save-exact babel-plugin-react-compiler@rc`}
34+
{`npm install --save-dev --save-exact babel-plugin-react-compiler@latest`}
3535
</TerminalBlock>
3636

3737
pnpm
3838
<TerminalBlock>
39-
{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@rc`}
39+
{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest`}
4040
</TerminalBlock>
4141

4242
yarn
4343
<TerminalBlock>
44-
{`yarn add --dev --exact babel-plugin-react-compiler@rc`}
44+
{`yarn add --dev --exact babel-plugin-react-compiler@latest`}
4545
</TerminalBlock>
4646

47-
As part of the RC, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Complier now supports optional chains and array indices as dependencies. We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs.
48-
49-
We have also heard from the community that the ref-in-render validation sometimes has false positives. Since as a general philosophy we want you to be able to fully trust in the compiler's error messages and hints, we are turning it off by default for now. We will keep working to improve this validation, and we will re-enable it in a follow up release.
47+
As part of the stable release, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Complier now supports optional chains and array indices as dependencies. We're exploring how to infer even more dependencies like equality checks and string interpolation. These improvements ultimately result in fewer re-renders and more responsive UIs.
5048

5149
You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler).
5250

53-
## Feedback {/*feedback*/}
54-
During the RC period, we encourage all React users to try the compiler and provide feedback in the React repo. Please [open an issue](https://github.com/facebook/react/issues) if you encounter any bugs or unexpected behavior. If you have a general question or suggestion, please post them in the [React Compiler Working Group](https://github.com/reactwg/react-compiler/discussions).
55-
5651
## Backwards Compatibility {/*backwards-compatibility*/}
5752
As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18).
5853

5954
## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
60-
If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@^6.1.1`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!
55+
If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@latest`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement!
6156

6257
To install:
6358

6459
npm
6560
<TerminalBlock>
66-
{`npm install --save-dev eslint-plugin-react-hooks@^6.1.1`}
61+
{`npm install --save-dev eslint-plugin-react-hooks@latest`}
6762
</TerminalBlock>
6863

6964
pnpm
7065
<TerminalBlock>
71-
{`pnpm add --save-dev eslint-plugin-react-hooks@^6.1.1`}
66+
{`pnpm add --save-dev eslint-plugin-react-hooks@latest`}
7267
</TerminalBlock>
7368

7469
yarn
7570
<TerminalBlock>
76-
{`yarn add --dev eslint-plugin-react-hooks@^6.1.1`}
71+
{`yarn add --dev eslint-plugin-react-hooks@latest`}
7772
</TerminalBlock>
7873

7974
```js
8075
// eslint.config.js
81-
import * as reactHooks from 'eslint-plugin-react-hooks';
82-
83-
export default [
84-
// Flat Config (eslint 9+)
85-
reactHooks.configs.recommended,
76+
import reactHooks from 'eslint-plugin-react-hooks';
77+
import { defineConfig } from 'eslint/config';
8678

87-
// Legacy Config
88-
reactHooks.configs['recommended-latest']
89-
];
79+
export default defineConfig([
80+
reactHooks.configs.flat.recommended,
81+
]);
9082
```
9183

92-
To enable the React Compiler rule, add `'react-hooks/react-compiler': 'error'` to your ESLint configuration.
84+
To enable React Compiler rules, we recommend using the `recommended` preset. You can also check out the [README](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md) for more instructions.
9385

9486
The linter does not require the compiler to be installed, so there's no risk in upgrading eslint-plugin-react-hooks. We recommend everyone upgrade today.
9587

@@ -102,26 +94,34 @@ We recommend using Next.js [15.3.1](https://github.com/vercel/next.js/releases/t
10294

10395
Vite users can continue to use [vite-plugin-react](https://github.com/vitejs/vite-plugin-react) to enable the compiler, by adding it as a [Babel plugin](https://react.dev/learn/react-compiler#usage-with-vite). We are also working with the [oxc](https://oxc.rs/) team to [add support for the compiler](https://github.com/oxc-project/oxc/issues/10048). Once [rolldown](https://github.com/rolldown/rolldown) is officially released and supported in Vite and oxc support is added for React Compiler, we'll update the docs with information on how to migrate.
10496

105-
## Upgrading React Compiler {/*upgrading-react-compiler*/}
106-
React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise.
97+
## New apps should use React Compiler {/*new-apps-should-use-react-compiler*/}
10798

108-
However, because product code may sometimes break the [rules of React](https://react.dev/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a useEffect somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that useEffect. While we encourage [useEffect only for synchronization](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects that cover other use-cases such as effects that needs to only run in response to specific values changing.
99+
We have partnered with the Expo, Vite, and Next.js teams to add the compiler to the new app experience.
109100

110-
In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues.
101+
[Expo SDK 54](https://docs.expo.dev/guides/react-compiler/) and up has the compiler enabled by default, so new apps will automatically be able to take advantage of the compiler from the start.
102+
103+
<TerminalBlock>
104+
{`npx create-expo-app@latest`}
105+
</TerminalBlock>
111106

112-
If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `19.1.0`) rather than a SemVer range (eg `^19.1.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected.
107+
[Vite](https://vite.dev/guide/) and [Next.js](https://nextjs.org/docs/app/api-reference/cli/create-next-app) users can choose the compiler enabled templates in `create-vite` and `create-next-app`.
113108

114-
## Roadmap to Stable {/*roadmap-to-stable*/}
115-
*This is not a final roadmap, and is subject to change.*
109+
<TerminalBlock>
110+
{`npm create vite@latest`}
111+
</TerminalBlock>
112+
113+
<TerminalBlock>
114+
{`npx create-next-app@latest`}
115+
</TerminalBlock>
116116

117-
After a period of final feedback from the community on the RC, we plan on a Stable Release for the compiler.
117+
## Upgrading React Compiler {/*upgrading-react-compiler*/}
118+
React Compiler works best when the auto-memoization applied is strictly for performance. Future versions of the compiler may change how memoization is applied, for example it could become more granular and precise.
118119

119-
* ✅ Experimental: Released at React Conf 2024, primarily for feedback from application developers.
120-
* ✅ Public Beta: Available today, for feedback from library authors.
121-
* ✅ Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue.
122-
* General Availability: After final feedback period from the community.
120+
However, because product code may sometimes break the [rules of React](https://react.dev/reference/rules) in ways that aren't always statically detectable in JavaScript, changing memoization can occasionally have unexpected results. For example, a previously memoized value might be used as a dependency for a useEffect somewhere in the component tree. Changing how or whether this value is memoized can cause over or under-firing of that useEffect. While we encourage [useEffect only for synchronization](https://react.dev/learn/synchronizing-with-effects), your codebase may have useEffects that cover other use-cases such as effects that needs to only run in response to specific values changing.
121+
122+
In other words, changing memoization may under rare circumstances cause unexpected behavior. For this reason, we recommend following the Rules of React and employing continuous end-to-end testing of your app so you can upgrade the compiler with confidence and identify any rules of React violations that might cause issues.
123123

124-
Post-Stable, we plan to add more compiler optimizations and improvements. This includes both continual improvements to automatic memoization, and new optimizations altogether, with minimal to no change of product code. Each upgrade will continue to improve performance and add better handling of diverse JavaScript and React patterns.
124+
If you don't have good test coverage, we recommend pinning the compiler to an exact version (eg `1.0.0`) rather than a SemVer range (eg `^1.0.0`). You can do this by passing the `--save-exact` (npm/pnpm) or `--exact` flags (yarn) when upgrading the compiler. You should then do any upgrades of the compiler manually, taking care to check that your app still works as expected.
125125

126126
---
127127

src/content/blog/index.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account
1212

1313
<div className="sm:-mx-5 flex flex-col gap-5 mt-12">
1414

15+
<BlogCard title="React Compiler v1.0" date="October 8, 2025" url="/blog/2025/10/08/react-compiler-1">
16+
17+
We're releasing the compiler's first stable release today, plus linting and tooling improvements to make adoption easier.
18+
19+
</BlogCard>
20+
1521
<BlogCard title="Introducing the React Foundation" date="October 7, 2025" url="/blog/2025/10/07/introducing-the-react-foundation">
1622

1723
Today, we're announcing our plans to create the React Foundation and a new technical governance structure ...
@@ -30,12 +36,6 @@ In React Labs posts, we write about projects in active research and development.
3036

3137
</BlogCard>
3238

33-
<BlogCard title="React Compiler RC" date="April 21, 2025" url="/blog/2025/04/21/react-compiler-rc">
34-
35-
We are releasing the compiler's first Release Candidate (RC) today.
36-
37-
</BlogCard>
38-
3939
<BlogCard title="Sunsetting Create React App" date="February 14, 2025" url="/blog/2025/02/14/sunsetting-create-react-app">
4040

4141
Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch ...

src/content/learn/react-compiler/installation.md

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,24 @@ This guide will help you install and configure React Compiler in your React appl
1818

1919
React Compiler is designed to work best with React 19, but it also supports React 17 and 18. Learn more about [React version compatibility](/reference/react-compiler/target).
2020

21-
<Note>
22-
React Compiler is currently in RC. Install it using the `@rc` tag to get the latest release candidate version.
23-
</Note>
24-
2521
## Installation {/*installation*/}
2622

2723
Install React Compiler as a `devDependency`:
2824

2925
<TerminalBlock>
30-
npm install -D babel-plugin-react-compiler@rc
26+
npm install -D babel-plugin-react-compiler@latest
3127
</TerminalBlock>
3228

3329
Or with Yarn:
3430

3531
<TerminalBlock>
36-
yarn add -D babel-plugin-react-compiler@rc
32+
yarn add -D babel-plugin-react-compiler@latest
3733
</TerminalBlock>
3834

3935
Or with pnpm:
4036

4137
<TerminalBlock>
42-
pnpm install -D babel-plugin-react-compiler@rc
38+
pnpm install -D babel-plugin-react-compiler@latest
4339
</TerminalBlock>
4440

4541
## Basic Setup {/*basic-setup*/}
@@ -173,7 +169,7 @@ React Compiler includes an ESLint rule that helps identify code that can't be op
173169
Install the ESLint plugin:
174170

175171
<TerminalBlock>
176-
npm install -D eslint-plugin-react-hooks@^6.1.1
172+
npm install -D eslint-plugin-react-hooks@latest
177173
</TerminalBlock>
178174

179175
If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rules are available in the `recommended-latest` preset.

0 commit comments

Comments
 (0)