You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/blog/2025/10/01/react-19-2.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -98,7 +98,7 @@ function ChatRoom({ roomId, theme }) {
98
98
99
99
Similar to DOM events, Effect Events always “see” the latest props and state.
100
100
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.
102
102
103
103
<Note>
104
104
@@ -289,7 +289,7 @@ This is because Node Streams are much faster than Web Streams in Node, and Web S
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.
293
293
294
294
To continue using the legacy config, you can change to `recommended-legacy`:
Copy file name to clipboardExpand all lines: src/content/blog/2025/10/08/react-compiler-1.md
+44-44Lines changed: 44 additions & 44 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
---
2
-
title: "React Compiler RC"
2
+
title: "React Compiler v1.0"
3
3
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.
6
6
7
7
---
8
8
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).
10
10
11
11
---
12
12
@@ -16,80 +16,72 @@ The React team is excited to share new updates:
16
16
17
17
</Intro>
18
18
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.
20
20
2. We're merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`.
21
21
3. We've added support for swc and are working with oxc to support Babel-free builds.
22
22
23
23
---
24
24
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.
26
26
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.
28
28
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*/}
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.
50
48
51
49
You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler).
52
50
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).
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).
58
53
59
54
## 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!
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.
93
85
94
86
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.
95
87
@@ -102,26 +94,34 @@ We recommend using Next.js [15.3.1](https://github.com/vercel/next.js/releases/t
102
94
103
95
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.
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*/}
107
98
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.
109
100
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>
111
106
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`.
113
108
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>
116
116
117
-
After a period of final feedback from the community on the RC, we plan on a Stable Release for the compiler.
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.
118
119
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.
123
123
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.
Copy file name to clipboardExpand all lines: src/content/learn/react-compiler/installation.md
+4-8Lines changed: 4 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,28 +18,24 @@ This guide will help you install and configure React Compiler in your React appl
18
18
19
19
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).
20
20
21
-
<Note>
22
-
React Compiler is currently in RC. Install it using the `@rc` tag to get the latest release candidate version.
@@ -173,7 +169,7 @@ React Compiler includes an ESLint rule that helps identify code that can't be op
173
169
Install the ESLint plugin:
174
170
175
171
<TerminalBlock>
176
-
npm install -D eslint-plugin-react-hooks@^6.1.1
172
+
npm install -D eslint-plugin-react-hooks@latest
177
173
</TerminalBlock>
178
174
179
175
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.
Copy file name to clipboardExpand all lines: src/content/learn/react-compiler/introduction.md
+1-5Lines changed: 1 addition & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,10 +16,6 @@ React Compiler is a new build-time tool that automatically optimizes your React
16
16
17
17
</YouWillLearn>
18
18
19
-
<Note>
20
-
React Compiler is currently in Release Candidate (RC). We now recommend everyone to try the compiler and provide feedback. The latest RC release can be found with the `@rc` tag.
21
-
</Note>
22
-
23
19
## What does React Compiler do? {/*what-does-react-compiler-do*/}
24
20
25
21
React Compiler automatically optimizes your React application at build time. React is often fast enough without optimization, but sometimes you need to manually memoize components and values to keep your app responsive. This manual memoization is tedious, easy to get wrong, and adds extra code to maintain. React Compiler does this optimization automatically for you, freeing you from this mental burden so you can focus on building features.
@@ -157,7 +153,7 @@ We encourage everyone to start using React Compiler. While the compiler is still
157
153
158
154
### Is it safe to use? {/*is-it-safe-to-use*/}
159
155
160
-
React Compiler is now in RC and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
156
+
React Compiler is now stable and has been tested extensively in production. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
161
157
162
158
## What build tools are supported? {/*what-build-tools-are-supported*/}
Copy file name to clipboardExpand all lines: src/content/reference/eslint-plugin-react-hooks/index.md
+1-6Lines changed: 1 addition & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,15 +19,10 @@ What this means for linting, is that you don’t need to fix all violations imme
19
19
20
20
## Recommended Rules {/*recommended*/}
21
21
22
-
These rules are included in the `recommended` preset `eslint-plugin-react-hooks`:
22
+
These rules are included in the `recommended` preset in `eslint-plugin-react-hooks`:
23
23
24
24
*[`exhaustive-deps`](/reference/eslint-plugin-react-hooks/lints/exhaustive-deps) - Validates that dependency arrays for React hooks contain all necessary dependencies
25
25
*[`rules-of-hooks`](/reference/eslint-plugin-react-hooks/lints/rules-of-hooks) - Validates that components and hooks follow the Rules of Hooks
26
-
27
-
## Additional Rules {/*additional-rules*/}
28
-
29
-
Starting in version 6.0, these rules are available to opt-in:
30
-
31
26
*[`component-hook-factories`](/reference/eslint-plugin-react-hooks/lints/component-hook-factories) - Validates higher order functions defining nested components or hooks
32
27
*[`config`](/reference/eslint-plugin-react-hooks/lints/config) - Validates the compiler configuration options
33
28
*[`error-boundaries`](/reference/eslint-plugin-react-hooks/lints/error-boundaries) - Validates usage of Error Boundaries instead of try/catch for child errors
Copy file name to clipboardExpand all lines: src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md
-6Lines changed: 0 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,12 +8,6 @@ Validates against higher order functions defining nested components or hooks. Co
8
8
9
9
</Intro>
10
10
11
-
<Note>
12
-
13
-
This rule is available in `eslint-plugin-react-hooks` v6.
14
-
15
-
</Note>
16
-
17
11
## Rule Details {/*rule-details*/}
18
12
19
13
Defining components or hooks inside other functions creates new instances on every call. React treats each as a completely different component, destroying and recreating the entire component tree, losing all state, and causing performance problems.
Copy file name to clipboardExpand all lines: src/content/reference/eslint-plugin-react-hooks/lints/config.md
-7Lines changed: 0 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,5 @@
1
1
---
2
2
title: config
3
-
version: rc
4
3
---
5
4
6
5
<Intro>
@@ -9,12 +8,6 @@ Validates the compiler [configuration options](/reference/react-compiler/configu
9
8
10
9
</Intro>
11
10
12
-
<Note>
13
-
14
-
This rule is available in `eslint-plugin-react-hooks` v6.
15
-
16
-
</Note>
17
-
18
11
## Rule Details {/*rule-details*/}
19
12
20
13
React Compiler accepts various [configuration options](/reference/react-compiler/configuration) to control its behavior. This rule validates that your configuration uses correct option names and value types, preventing silent failures from typos or incorrect settings.
0 commit comments