diff --git a/package.json b/package.json
index 0efe373e..c2a84b1e 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
"asyncro": "^3.0.0",
"autoprefixer": "^10.4.2",
"babel-eslint": "10.x",
- "babel-plugin-react-compiler": "^19.1.0-rc.3",
+ "babel-plugin-react-compiler": "^1.0.0",
"chalk": "4.1.2",
"eslint": "7.x",
"eslint-config-next": "12.0.3",
diff --git a/public/images/blog/react-foundation/react_foundation_logo.png b/public/images/blog/react-foundation/react_foundation_logo.png
new file mode 100644
index 00000000..51c19598
Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_logo.png differ
diff --git a/public/images/blog/react-foundation/react_foundation_logo.webp b/public/images/blog/react-foundation/react_foundation_logo.webp
new file mode 100644
index 00000000..89efa602
Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_logo.webp differ
diff --git a/public/images/blog/react-foundation/react_foundation_logo_dark.png b/public/images/blog/react-foundation/react_foundation_logo_dark.png
new file mode 100644
index 00000000..4aedaf46
Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_logo_dark.png differ
diff --git a/public/images/blog/react-foundation/react_foundation_logo_dark.webp b/public/images/blog/react-foundation/react_foundation_logo_dark.webp
new file mode 100644
index 00000000..09b48b70
Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_logo_dark.webp differ
diff --git a/public/images/blog/react-foundation/react_foundation_member_logos.png b/public/images/blog/react-foundation/react_foundation_member_logos.png
new file mode 100644
index 00000000..e8365969
Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos.png differ
diff --git a/public/images/blog/react-foundation/react_foundation_member_logos.webp b/public/images/blog/react-foundation/react_foundation_member_logos.webp
new file mode 100644
index 00000000..babb3d57
Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos.webp differ
diff --git a/public/images/blog/react-foundation/react_foundation_member_logos_dark.png b/public/images/blog/react-foundation/react_foundation_member_logos_dark.png
new file mode 100644
index 00000000..116e4033
Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos_dark.png differ
diff --git a/public/images/blog/react-foundation/react_foundation_member_logos_dark.webp b/public/images/blog/react-foundation/react_foundation_member_logos_dark.webp
new file mode 100644
index 00000000..5fcf38ca
Binary files /dev/null and b/public/images/blog/react-foundation/react_foundation_member_logos_dark.webp differ
diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md
index cd49b6eb..750c0f3b 100644
--- a/src/content/blog/2024/10/21/react-compiler-beta-release.md
+++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md
@@ -12,9 +12,9 @@ October 21, 2024 by [Lauren Tan](https://twitter.com/potetotes).
-### React Compiler is now in RC! {/*react-compiler-is-now-in-rc*/}
+### React Compiler is now stable! {/*react-compiler-is-now-in-rc*/}
-Please see the [RC blog post](/blog/2025/04/21/react-compiler-rc) for details.
+Please see the [stable release blog post](/blog/2025/10/07/react-compiler-1) for details.
diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md
deleted file mode 100644
index ce30a886..00000000
--- a/src/content/blog/2025/04/21/react-compiler-rc.md
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: "React Compiler RC"
-author: Lauren Tan and Mofei Zhang
-date: 2025/04/21
-description: We are releasing the compiler's first Release Candidate (RC) today.
-
----
-
-April 21, 2025 by [Lauren Tan](https://x.com/potetotes) and [Mofei Zhang](https://x.com/zmofei).
-
----
-
-
-
-The React team is excited to share new updates:
-
-
-
-1. We're publishing React Compiler RC today, in preparation of the compiler's stable release.
-2. We're merging `eslint-plugin-react-compiler` into `eslint-plugin-react-hooks`.
-3. We've added support for swc and are working with oxc to support Babel-free builds.
-
----
-
-[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.
-
-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.
-
-## Use React Compiler RC today {/*use-react-compiler-rc-today*/}
-To install the RC:
-
-npm
-
-{`npm install --save-dev --save-exact babel-plugin-react-compiler@rc`}
-
-
-pnpm
-
-{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@rc`}
-
-
-yarn
-
-{`yarn add --dev --exact babel-plugin-react-compiler@rc`}
-
-
-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.
-
-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.
-
-You can find more details on using the Compiler in [our docs](https://react.dev/learn/react-compiler).
-
-## Feedback {/*feedback*/}
-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).
-
-## Backwards Compatibility {/*backwards-compatibility*/}
-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).
-
-## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
-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!
-
-To install:
-
-npm
-
-{`npm install --save-dev eslint-plugin-react-hooks@^6.1.1`}
-
-
-pnpm
-
-{`pnpm add --save-dev eslint-plugin-react-hooks@^6.1.1`}
-
-
-yarn
-
-{`yarn add --dev eslint-plugin-react-hooks@^6.1.1`}
-
-
-```js
-// eslint.config.js
-import * as reactHooks from 'eslint-plugin-react-hooks';
-
-export default [
- // Flat Config (eslint 9+)
- reactHooks.configs.recommended,
-
- // Legacy Config
- reactHooks.configs['recommended-latest']
-];
-```
-
-To enable the React Compiler rule, add `'react-hooks/react-compiler': 'error'` to your ESLint configuration.
-
-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.
-
-## swc support (experimental) {/*swc-support-experimental*/}
-React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild.
-
-In addition to those tools, we have been collaborating with Kang Dongyoon ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding additional support for React Compiler as an swc plugin. While this work isn't done, Next.js build performance should now be considerably faster when the [React Compiler is enabled in your Next.js app](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler).
-
-We recommend using Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to get the best build performance.
-
-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.
-
-## Upgrading React Compiler {/*upgrading-react-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.
-
-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.
-
-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.
-
-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.
-
-## Roadmap to Stable {/*roadmap-to-stable*/}
-*This is not a final roadmap, and is subject to change.*
-
-After a period of final feedback from the community on the RC, we plan on a Stable Release for the compiler.
-
-* ✅ Experimental: Released at React Conf 2024, primarily for feedback from application developers.
-* ✅ Public Beta: Available today, for feedback from library authors.
-* ✅ Release Candidate (RC): React Compiler works for the majority of rule-following apps and libraries without issue.
-* General Availability: After final feedback period from the community.
-
-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.
-
----
-
-Thanks to [Joe Savona](https://x.com/en_JS), [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), and [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev) for reviewing and editing this post.
diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
index 41c35980..cdc8f353 100644
--- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -66,7 +66,7 @@ To opt-in to animating an element, wrap it in the new `` compone
```
-This new component lets you declaratively define "what" to animate when an animation is activated.
+This new component lets you declaratively define "what" to animate when an animation is activated.
You can define "when" to animate by using one of these three triggers for a View Transition:
@@ -99,9 +99,9 @@ By default, these animations use the [default CSS animations for View Transition
When the DOM updates due to an animation trigger—like `startTransition`, `useDeferredValue`, or a `Suspense` fallback switching to content—React will use [declarative heuristics](/reference/react/ViewTransition#viewtransition) to automatically determine which `` components to activate for the animation. The browser will then run the animation that's defined in CSS.
-If you're familiar with the browser's View Transition API and want to know how React supports it, check out [How does `` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
+If you're familiar with the browser's View Transition API and want to know how React supports it, check out [How does `` Work](/reference/react/ViewTransition#how-does-viewtransition-work) in the docs.
-In this post, let's take a look at a few examples of how to use View Transitions.
+In this post, let's take a look at a few examples of how to use View Transitions.
We'll start with this app, which doesn't animate any of the following interactions:
- Click a video to view the details.
@@ -1245,8 +1245,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "experimental",
- "react-dom": "experimental",
+ "react": "canary",
+ "react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
@@ -1294,16 +1294,17 @@ function navigate(url) {
When the `url` changes, the `` and new route are rendered. Since the `` was updated inside of `startTransition`, the `` is activated for an animation.
-By default, View Transitions include the browser default cross-fade animation. Adding this to our example, we now have a cross-fade whenever we navigate between pages:
+By default, View Transitions include the browser default cross-fade animation. Adding this to our example, we now have a cross-fade whenever we navigate between pages:
```js src/App.js active
-import {unstable_ViewTransition as ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router';
+import {ViewTransition} from 'react'; import Details from './Details';
+import Home from './Home'; import {useRouter} from './router';
export default function App() {
const {url} = useRouter();
-
+
// Use ViewTransition to animate between pages.
// No additional CSS needed by default.
return (
@@ -1562,11 +1563,11 @@ export function IconSearch(props) {
```
```js src/Layout.js
-import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+import {ViewTransition} from 'react'; import { useIsNavPending } from "./router";
export default function Page({ heading, children }) {
const isPending = useIsNavPending();
-
+
return (
@@ -1770,22 +1771,22 @@ import {useState, createContext,use,useTransition,useLayoutEffect,useEffect} fro
export function Router({ children }) {
const [isPending, startTransition] = useTransition();
-
+
function navigate(url) {
// Update router state in transition.
startTransition(() => {
go(url);
});
}
-
-
-
-
+
+
+
+
const [routerState, setRouterState] = useState({
pendingNav: () => {},
url: document.location.pathname,
});
-
+
function go(url) {
setRouterState({
@@ -1795,7 +1796,7 @@ export function Router({ children }) {
},
});
}
-
+
function navigateBack(url) {
startTransition(() => {
@@ -2441,8 +2442,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "experimental",
- "react-dom": "experimental",
+ "react": "canary",
+ "react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
@@ -2456,7 +2457,7 @@ root.render(
-Since our router already updates the route using `startTransition`, this one line change to add `` activates with the default cross-fade animation.
+Since our router already updates the route using `startTransition`, this one line change to add `` activates with the default cross-fade animation.
If you're curious how this works, see the docs for [How does `` work?](/reference/react/ViewTransition#how-does-viewtransition-work)
@@ -2464,7 +2465,7 @@ If you're curious how this works, see the docs for [How does ``
#### Opting out of `` animations {/*opting-out-of-viewtransition-animations*/}
-In this example, we're wrapping the root of the app in `` for simplicity, but this means that all transitions in the app will be animated, which can lead to unexpected animations.
+In this example, we're wrapping the root of the app in `` for simplicity, but this means that all transitions in the app will be animated, which can lead to unexpected animations.
To fix, we're wrapping route children with `"none"` so each page can control its own animation:
@@ -2475,7 +2476,7 @@ To fix, we're wrapping route children with `"none"` so each page can control its
```
-In practice, navigations should be done via "enter" and "exit" props, or by using Transition Types.
+In practice, navigations should be done via "enter" and "exit" props, or by using Transition Types.
@@ -2510,7 +2511,7 @@ Now, the cross fade is slower:
```js src/App.js active
-import { unstable_ViewTransition as ViewTransition } from "react";
+import { ViewTransition } from "react";
import Details from "./Details";
import Home from "./Home";
import { useRouter } from "./router";
@@ -2776,7 +2777,7 @@ export function IconSearch(props) {
```
```js src/Layout.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+import {ViewTransition} from 'react'; import { useIsNavPending } from "./router";
export default function Page({ heading, children }) {
const isPending = useIsNavPending();
@@ -3669,8 +3670,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "experimental",
- "react-dom": "experimental",
+ "react": "canary",
+ "react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
@@ -3703,7 +3704,7 @@ Now the video thumbnail animates between the two pages:
```js src/App.js
-import { unstable_ViewTransition as ViewTransition } from "react";
+import { ViewTransition } from "react";
import Details from "./Details";
import Home from "./Home";
import { useRouter } from "./router";
@@ -3970,7 +3971,7 @@ export function IconSearch(props) {
```
```js src/Layout.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+import {ViewTransition} from 'react'; import { useIsNavPending } from "./router";
export default function Page({ heading, children }) {
const isPending = useIsNavPending();
@@ -4027,7 +4028,7 @@ export default function LikeButton({video}) {
```
```js src/Videos.js active
-import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
+import { useState, ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
export function Thumbnail({ video, children }) {
// Add a name to animate with a shared element transition.
@@ -4878,8 +4879,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "experimental",
- "react-dom": "experimental",
+ "react": "canary",
+ "react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
@@ -4960,7 +4961,7 @@ Now we can animate the header along with thumbnail based on navigation type:
```js src/App.js hidden
-import { unstable_ViewTransition as ViewTransition } from "react";
+import { ViewTransition } from "react";
import Details from "./Details";
import Home from "./Home";
import { useRouter } from "./router";
@@ -5225,7 +5226,7 @@ export function IconSearch(props) {
```
```js src/Layout.js active
-import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+import {ViewTransition} from 'react'; import { useIsNavPending } from "./router";
export default function Page({ heading, children }) {
const isPending = useIsNavPending();
@@ -5289,7 +5290,7 @@ export default function LikeButton({video}) {
```
```js src/Videos.js hidden
-import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import { useState, ViewTransition } from "react";
import LikeButton from "./LikeButton";
import { useRouter } from "./router";
import { PauseIcon, PlayIcon } from "./Icons";
@@ -5440,11 +5441,11 @@ export function fetchVideoDetails(id) {
```
```js src/router.js
-import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react";
export function Router({ children }) {
const [isPending, startTransition] = useTransition();
-
+
function navigate(url) {
startTransition(() => {
// Transition type for the cause "nav forward"
@@ -5471,7 +5472,7 @@ export function Router({ children }) {
},
});
}
-
+
useEffect(() => {
function handlePopState() {
// This should not animate because restoration has to be synchronous.
@@ -6194,8 +6195,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "experimental",
- "react-dom": "experimental",
+ "react": "canary",
+ "react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
@@ -6211,7 +6212,7 @@ root.render(
### Animating Suspense Boundaries {/*animating-suspense-boundaries*/}
-Suspense will also activate View Transitions.
+Suspense will also activate View Transitions.
To animate the fallback to content, we can wrap `Suspense` with ``:
@@ -6228,7 +6229,7 @@ By adding this, the fallback will cross-fade into the content. Click a video and
```js src/App.js hidden
-import { unstable_ViewTransition as ViewTransition } from "react";
+import { ViewTransition } from "react";
import Details from "./Details";
import Home from "./Home";
import { useRouter } from "./router";
@@ -6246,7 +6247,7 @@ export default function App() {
```
```js src/Details.js active
-import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
function VideoDetails({ id }) {
// Cross-fade the fallback to content.
@@ -6496,7 +6497,7 @@ export function IconSearch(props) {
```
```js src/Layout.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+import {ViewTransition} from 'react';
import { useIsNavPending } from "./router";
export default function Page({ heading, children }) {
@@ -6561,7 +6562,7 @@ export default function LikeButton({video}) {
```
```js src/Videos.js hidden
-import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import { useState, ViewTransition } from "react";
import LikeButton from "./LikeButton";
import { useRouter } from "./router";
import { PauseIcon, PlayIcon } from "./Icons";
@@ -6712,7 +6713,7 @@ export function fetchVideoDetails(id) {
```
```js src/router.js hidden
-import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react";
export function Router({ children }) {
const [isPending, startTransition] = useTransition();
@@ -6740,7 +6741,7 @@ export function Router({ children }) {
},
});
}
-
+
useEffect(() => {
function handlePopState() {
// This should not animate because restoration has to be synchronous.
@@ -7492,8 +7493,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "experimental",
- "react-dom": "experimental",
+ "react": "canary",
+ "react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
@@ -7526,7 +7527,7 @@ We can also provide custom animations using an `exit` on the fallback, and `ente
Here's how we'll define `slide-down` and `slide-up` with CSS:
```css {1, 6}
-::view-transition-old(.slide-down) {
+::view-transition-old(.slide-down) {
/* Slide the fallback down */
animation: ...;
}
@@ -7542,7 +7543,7 @@ Now, the Suspense content replaces the fallback with a sliding animation:
```js src/App.js hidden
-import { unstable_ViewTransition as ViewTransition } from "react";
+import { ViewTransition } from "react";
import Details from "./Details";
import Home from "./Home";
import { useRouter } from "./router";
@@ -7560,7 +7561,7 @@ export default function App() {
```
```js src/Details.js active
-import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
function VideoDetails({ id }) {
return (
@@ -7817,7 +7818,7 @@ export function IconSearch(props) {
```
```js src/Layout.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+import {ViewTransition} from 'react';
import { useIsNavPending } from "./router";
export default function Page({ heading, children }) {
@@ -7882,7 +7883,7 @@ export default function LikeButton({video}) {
```
```js src/Videos.js hidden
-import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import { useState, ViewTransition } from "react";
import LikeButton from "./LikeButton";
import { useRouter } from "./router";
import { PauseIcon, PlayIcon } from "./Icons";
@@ -8033,7 +8034,7 @@ export function fetchVideoDetails(id) {
```
```js src/router.js hidden
-import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react";
export function Router({ children }) {
const [isPending, startTransition] = useTransition();
@@ -8061,7 +8062,7 @@ export function Router({ children }) {
},
});
}
-
+
useEffect(() => {
function handlePopState() {
// This should not animate because restoration has to be synchronous.
@@ -8813,8 +8814,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "experimental",
- "react-dom": "experimental",
+ "react": "canary",
+ "react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
@@ -8856,7 +8857,7 @@ Now the items animate as you type in the search bar:
```js src/App.js hidden
-import { unstable_ViewTransition as ViewTransition } from "react";
+import { ViewTransition } from "react";
import Details from "./Details";
import Home from "./Home";
import { useRouter } from "./router";
@@ -8874,7 +8875,7 @@ export default function App() {
```
```js src/Details.js hidden
-import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react";
+import { use, Suspense, ViewTransition } from "react";
import { fetchVideo, fetchVideoDetails } from "./data";
import { Thumbnail, VideoControls } from "./Videos";
import { useRouter } from "./router";
@@ -8949,17 +8950,17 @@ function VideoInfo({ id }) {
```
```js src/Home.js
-import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+import { useId, useState, use, useDeferredValue, ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
function SearchList({searchText, videos}) {
- // Activate with useDeferredValue ("when")
+ // Activate with useDeferredValue ("when")
const deferredSearchText = useDeferredValue(searchText);
const filteredVideos = filterVideos(videos, deferredSearchText);
return (
{filteredVideos.map((video) => (
- // Animate each item in list ("what")
+ // Animate each item in list ("what")
@@ -8976,7 +8977,7 @@ export default function Home() {
const videos = use(fetchVideos());
const count = videos.length;
const [searchText, setSearchText] = useState('');
-
+
return (
{count} Videos
}>
@@ -9144,7 +9145,7 @@ export function IconSearch(props) {
```
```js src/Layout.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react';
+import {ViewTransition} from 'react';
import { useIsNavPending } from "./router";
export default function Page({ heading, children }) {
@@ -9209,7 +9210,7 @@ export default function LikeButton({video}) {
```
```js src/Videos.js hidden
-import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import { useState, ViewTransition } from "react";
import LikeButton from "./LikeButton";
import { useRouter } from "./router";
import { PauseIcon, PlayIcon } from "./Icons";
@@ -9360,7 +9361,7 @@ export function fetchVideoDetails(id) {
```
```js src/router.js hidden
-import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react";
export function Router({ children }) {
const [isPending, startTransition] = useTransition();
@@ -9388,7 +9389,7 @@ export function Router({ children }) {
},
});
}
-
+
useEffect(() => {
function handlePopState() {
// This should not animate because restoration has to be synchronous.
@@ -10154,8 +10155,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "experimental",
- "react-dom": "experimental",
+ "react": "canary",
+ "react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
@@ -10180,7 +10181,7 @@ Let's remove the slow fade, and take a look at the final result:
```js src/App.js
-import {unstable_ViewTransition as ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router';
+import {ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router';
export default function App() {
const {url} = useRouter();
@@ -10195,7 +10196,7 @@ export default function App() {
```
```js src/Details.js
-import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
function VideoDetails({id}) {
// Animate from Suspense fallback to content
@@ -10265,17 +10266,17 @@ function VideoInfo({ id }) {
```
```js src/Home.js
-import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+import { useId, useState, use, useDeferredValue, ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
function SearchList({searchText, videos}) {
- // Activate with useDeferredValue ("when")
+ // Activate with useDeferredValue ("when")
const deferredSearchText = useDeferredValue(searchText);
const filteredVideos = filterVideos(videos, deferredSearchText);
return (
{filteredVideos.map((video) => (
- // Animate each item in list ("what")
+ // Animate each item in list ("what")
@@ -10292,7 +10293,7 @@ export default function Home() {
const videos = use(fetchVideos());
const count = videos.length;
const [searchText, setSearchText] = useState('');
-
+
return (
{count} Videos
}>
@@ -10460,7 +10461,7 @@ export function IconSearch(props) {
```
```js src/Layout.js
-import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+import {ViewTransition} from 'react'; import { useIsNavPending } from "./router";
export default function Page({ heading, children }) {
const isPending = useIsNavPending();
@@ -10524,7 +10525,7 @@ export default function LikeButton({video}) {
```
```js src/Videos.js
-import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
+import { useState, ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
export function Thumbnail({ video, children }) {
// Add a name to animate with a shared element transition.
@@ -10672,7 +10673,7 @@ export function fetchVideoDetails(id) {
```
```js src/router.js
-import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react";
export function Router({ children }) {
const [isPending, startTransition] = useTransition();
@@ -10692,7 +10693,7 @@ export function Router({ children }) {
}
const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
-
+
function go(url) {
setRouterState({
url,
@@ -10701,7 +10702,7 @@ export function Router({ children }) {
},
});
}
-
+
useEffect(() => {
function handlePopState() {
// This should not animate because restoration has to be synchronous.
@@ -11440,8 +11441,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "experimental",
- "react-dom": "experimental",
+ "react": "canary",
+ "react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
@@ -11506,7 +11507,7 @@ When a user navigates away from a page, it's common to stop rendering the old pa
```js {6,7}
function App() {
const { url } = useRouter();
-
+
return (
<>
{url === '/' && }
@@ -11523,7 +11524,7 @@ Activity allows you to keep the state around as the user changes pages, so when
```js {6-8}
function App() {
const { url } = useRouter();
-
+
return (
<>
@@ -11542,11 +11543,11 @@ Try searching for a video, selecting it, and clicking "back":
```js src/App.js
-import { unstable_ViewTransition as ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
+import { ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
export default function App() {
const { url } = useRouter();
-
+
return (
// View Transitions know about Activity
@@ -11561,7 +11562,7 @@ export default function App() {
```
```js src/Details.js hidden
-import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react";
+import { use, Suspense, ViewTransition } from "react";
import { fetchVideo, fetchVideoDetails } from "./data";
import { Thumbnail, VideoControls } from "./Videos";
import { useRouter } from "./router";
@@ -11636,10 +11637,10 @@ function VideoInfo({ id }) {
```
```js src/Home.js hidden
-import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+import { useId, useState, use, useDeferredValue, ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
function SearchList({searchText, videos}) {
- // Activate with useDeferredValue ("when")
+ // Activate with useDeferredValue ("when")
const deferredSearchText = useDeferredValue(searchText);
const filteredVideos = filterVideos(videos, deferredSearchText);
return (
@@ -11649,7 +11650,7 @@ function SearchList({searchText, videos}) {
)}
{filteredVideos.map((video) => (
- // Animate each item in list ("what")
+ // Animate each item in list ("what")
@@ -11663,7 +11664,7 @@ export default function Home() {
const videos = use(fetchVideos());
const count = videos.length;
const [searchText, setSearchText] = useState('');
-
+
return (
{count} Videos
}>
@@ -11831,7 +11832,7 @@ export function IconSearch(props) {
```
```js src/Layout.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+import {ViewTransition} from 'react'; import { useIsNavPending } from "./router";
export default function Page({ heading, children }) {
const isPending = useIsNavPending();
@@ -11895,7 +11896,7 @@ export default function LikeButton({video}) {
```
```js src/Videos.js hidden
-import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import { useState, ViewTransition } from "react";
import LikeButton from "./LikeButton";
import { useRouter } from "./router";
import { PauseIcon, PlayIcon } from "./Icons";
@@ -12046,7 +12047,7 @@ export function fetchVideoDetails(id) {
```
```js src/router.js hidden
-import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react";
export function Router({ children }) {
const [isPending, startTransition] = useTransition();
@@ -12074,7 +12075,7 @@ export function Router({ children }) {
},
});
}
-
+
useEffect(() => {
function handlePopState() {
// This should not animate because restoration has to be synchronous.
@@ -12839,8 +12840,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "experimental",
- "react-dom": "experimental",
+ "react": "canary",
+ "react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
@@ -12879,13 +12880,13 @@ With this update, if the content on the next page has time to pre-render, it wil
```js src/App.js
-import { unstable_ViewTransition as ViewTransition, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
+import { ViewTransition, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data'; import { unstable_Activity, Activity as ActivityStable} from 'react'; let Activity = ActivityStable ?? unstable_Activity;
export default function App() {
const { url } = useRouter();
const videoId = url.split("/").pop();
const videos = use(fetchVideos());
-
+
return (
{/* Render videos in Activity to pre-render them */}
@@ -12903,7 +12904,7 @@ export default function App() {
```
```js src/Details.js
-import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
+import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";
function VideoDetails({id}) {
// Animate from Suspense fallback to content.
@@ -12974,10 +12975,10 @@ function VideoInfo({ id }) {
```
```js src/Home.js hidden
-import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
+import { useId, useState, use, useDeferredValue, ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";
function SearchList({searchText, videos}) {
- // Activate with useDeferredValue ("when")
+ // Activate with useDeferredValue ("when")
const deferredSearchText = useDeferredValue(searchText);
const filteredVideos = filterVideos(videos, deferredSearchText);
return (
@@ -12987,7 +12988,7 @@ function SearchList({searchText, videos}) {
)}
{filteredVideos.map((video) => (
- // Animate each item in list ("what")
+ // Animate each item in list ("what")
@@ -13001,7 +13002,7 @@ export default function Home() {
const videos = use(fetchVideos());
const count = videos.length;
const [searchText, setSearchText] = useState('');
-
+
return (
{count} Videos
}>
@@ -13169,7 +13170,7 @@ export function IconSearch(props) {
```
```js src/Layout.js hidden
-import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+import {ViewTransition} from 'react'; import { useIsNavPending } from "./router";
export default function Page({ heading, children }) {
const isPending = useIsNavPending();
@@ -13233,7 +13234,7 @@ export default function LikeButton({video}) {
```
```js src/Videos.js hidden
-import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import { useState, ViewTransition } from "react";
import LikeButton from "./LikeButton";
import { useRouter } from "./router";
import { PauseIcon, PlayIcon } from "./Icons";
@@ -13384,7 +13385,7 @@ export function fetchVideoDetails(id) {
```
```js src/router.js hidden
-import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, addTransitionType} from "react";
export function Router({ children }) {
const [isPending, startTransition] = useTransition();
@@ -13412,7 +13413,7 @@ export function Router({ children }) {
},
});
}
-
+
useEffect(() => {
function handlePopState() {
// This should not animate because restoration has to be synchronous.
@@ -14177,8 +14178,8 @@ root.render(
```json package.json hidden
{
"dependencies": {
- "react": "experimental",
- "react-dom": "experimental",
+ "react": "canary",
+ "react-dom": "canary",
"react-scripts": "latest"
},
"scripts": {
@@ -14218,13 +14219,13 @@ These are areas we're still exploring, and we'll share more as we make progress.
# Features in development {/*features-in-development*/}
-We're also developing features to help solve the common problems below.
+We're also developing features to help solve the common problems below.
-As we iterate on possible solutions, you may see some potential APIs we're testing being shared based on the PRs we are landing. Please keep in mind that as we try different ideas, we often change or remove different solutions after trying them out.
+As we iterate on possible solutions, you may see some potential APIs we're testing being shared based on the PRs we are landing. Please keep in mind that as we try different ideas, we often change or remove different solutions after trying them out.
-When the solutions we're working on are shared too early, it can create churn and confusion in the community. To balance being transparent and limiting confusion, we're sharing the problems we're currently developing solutions for, without sharing a particular solution we have in mind.
+When the solutions we're working on are shared too early, it can create churn and confusion in the community. To balance being transparent and limiting confusion, we're sharing the problems we're currently developing solutions for, without sharing a particular solution we have in mind.
-As these features progress, we'll announce them on the blog with docs included so you can try them out.
+As these features progress, we'll announce them on the blog with docs included so you can try them out.
## React Performance Tracks {/*react-performance-tracks*/}
@@ -14257,7 +14258,7 @@ When we released hooks, we had three motivations:
- **Think in terms of function, not lifecycles**: hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.
- **Support ahead-of-time compilation**: hooks were designed to support ahead-of-time compilation with less pitfalls causing unintentional de-optimizations caused by lifecycle methods, and limitations of classes.
-Since their release, hooks have been successful at *sharing code between components*. Hooks are now the favored way to share logic between components, and there are less use cases for render props and higher order components. Hooks have also been successful at supporting features like Fast Refresh that were not possible with class components.
+Since their release, hooks have been successful at *sharing code between components*. Hooks are now the favored way to share logic between components, and there are less use cases for render props and higher order components. Hooks have also been successful at supporting features like Fast Refresh that were not possible with class components.
### Effects can be hard {/*effects-can-be-hard*/}
@@ -14298,18 +14299,18 @@ useEffect(() => {
return () => {
connection.disconnect();
};
-}); // compiler inserted dependencies.
+}); // compiler inserted dependencies.
```
With this code, the React Compiler can infer the dependencies for you and insert them automatically so you don't need to see or write them. With features like [the IDE extension](#compiler-ide-extension) and [`useEffectEvent`](/reference/react/useEffectEvent), we can provide a CodeLens to show you what the Compiler inserted for times you need to debug, or to optimize by removing a dependency. This helps reinforce the correct mental model for writing Effects, which can run at any time to synchronize your component or hook's state with something else.
-Our hope is that automatically inserting dependencies is not only easier to write, but that it also makes them easier to understand by forcing you to think in terms of what the Effect does, and not in component lifecycles.
+Our hope is that automatically inserting dependencies is not only easier to write, but that it also makes them easier to understand by forcing you to think in terms of what the Effect does, and not in component lifecycles.
---
## Compiler IDE Extension {/*compiler-ide-extension*/}
-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.
+Later in 2025 [we shared](/blog/2025/10/07/react-compiler-1) the first stable release of React Compiler, and we're continuing to invest in shipping more improvements.
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).
@@ -14331,7 +14332,7 @@ Fragment refs are still being researched. We'll share more when we're closer to
## Gesture Animations {/*gesture-animations*/}
-We're also researching ways to enhance View Transitions to support gesture animations such as swiping to open a menu, or scroll through a photo carousel.
+We're also researching ways to enhance View Transitions to support gesture animations such as swiping to open a menu, or scroll through a photo carousel.
Gestures present new challenges for a few reasons:
@@ -14355,9 +14356,9 @@ Now that React 19 has shipped, we're revisiting this problem space to create a p
const value = use(store);
```
-Our goal is to allow external state to be read during render without tearing, and to work seamlessly with all of the concurrent features React offers.
+Our goal is to allow external state to be read during render without tearing, and to work seamlessly with all of the concurrent features React offers.
-This research is still early. We'll share more, and what the new APIs will look like, when we're further along.
+This research is still early. We'll share more, and what the new APIs will look like, when we're further along.
---
diff --git a/src/content/blog/2025/10/01/react-19-2.md b/src/content/blog/2025/10/01/react-19-2.md
index eae9c8fa..51c30f70 100644
--- a/src/content/blog/2025/10/01/react-19-2.md
+++ b/src/content/blog/2025/10/01/react-19-2.md
@@ -98,7 +98,7 @@ function ChatRoom({ roomId, theme }) {
Similar to DOM events, Effect Events always “see” the latest props and state.
-**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.
+**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.
@@ -170,9 +170,9 @@ See the [Scheduler track](/reference/dev-tools/react-performance-tracks#schedule
The Components track shows the tree of components that React is working on either to render or run effects. Inside you'll see labels such as "Mount" for when children mount or effects are mounted, or "Blocked" for when rendering is blocked due to yielding to work outside React.
-The Component track helps you understand when components are rendered or run effects, and the time it takes to complete that work to help identify performance problems.
+The Components track helps you understand when components are rendered or run effects, and the time it takes to complete that work to help identify performance problems.
-See the [Component track docs](/reference/dev-tools/react-performance-tracks#components) for see everything included.
+See the [Components track docs](/reference/dev-tools/react-performance-tracks#components) for see everything included.
---
@@ -289,7 +289,7 @@ This is because Node Streams are much faster than Web Streams in Node, and Web S
### `eslint-plugin-react-hooks` v6 {/*eslint-plugin-react-hooks*/}
-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.
+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.
To continue using the legacy config, you can change to `recommended-legacy`:
@@ -298,7 +298,7 @@ To continue using the legacy config, you can change to `recommended-legacy`:
+ extends: ['plugin:react-hooks/recommended-legacy']
```
-For a full list of compiler enabled rules, [check out the linter docs](/reference/eslint-plugin-react-hooks#additional-rules).
+For a full list of compiler enabled rules, [check out the linter docs](/reference/eslint-plugin-react-hooks#recommended).
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).
diff --git a/src/content/blog/2025/10/07/introducing-the-react-foundation.md b/src/content/blog/2025/10/07/introducing-the-react-foundation.md
new file mode 100644
index 00000000..a9b922db
--- /dev/null
+++ b/src/content/blog/2025/10/07/introducing-the-react-foundation.md
@@ -0,0 +1,67 @@
+---
+title: "Introducing the React Foundation"
+author: Seth Webster, Matt Carroll, Joe Savona
+date: 2025/10/07
+description: Today, we're announcing our plans to create the React Foundation a new technical governance structure
+---
+
+October 7, 2025 by [Seth Webster](https://x.com/sethwebster), [Matt Carroll](https://x.com/mattcarrollcode), [Joe Savona](https://x.com/en_JS), [Sophie Alpert](https://x.com/sophiebits)
+
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Today, we're announcing our plans to create the React Foundation and a new technical governance structure.
+
+
+
+---
+
+We open sourced React over a decade ago to help developers build great user experiences. From its earliest days, React has received substantial contributions from contributors outside of Meta. Over time, the number of contributors and the scope of their contributions has grown significantly. What started out as a tool developed for Meta has expanded into a project that spans multiple companies with regular contributions from across the ecosystem. React has outgrown the confines of any one company.
+
+To better serve the React community, we are announcing our plans to move React and React Native from Meta to a new React Foundation. As a part of this change, we will also be implementing a new independent technical governance structure. We believe these changes will enable us to give React ecosystem projects more resources.
+
+## The React Foundation {/*the-react-foundation*/}
+
+We will make the React Foundation the new home for React, React Native, and some supporting projects like JSX. The React Foundation’s mission will be to support the React community and ecosystem. Once implemented, the React Foundation will
+
+* Maintain React’s infrastructure like GitHub, CI, and trademarks
+* Organize React Conf
+* Create initiatives to support the React ecosystem like financial support of ecosystem projects, issuing grants, and creating programs
+
+The React Foundation will be governed by a board of directors, with Seth Webster serving as the executive director. This board will direct funds and resources to support React’s development, community, and ecosystem. We believe that this is the best structure to ensure that the React Foundation is vendor-neutral and reflects the best interests of the community.
+
+The founding corporate members of the React Foundation will be Amazon, Callstack, Expo, Meta, Microsoft, Software Mansion, and Vercel. These companies have had a major impact on the React and React Native ecosystems and we are grateful for their support. We are excited to welcome even more members in the future.
+
+
+
+
+
+
+
+
+
+
+
+
+## React’s technical governance {/*reacts-technical-governance*/}
+
+We believe that React's technical direction should be set by the people who contribute to and maintain React. As React moves to a foundation, it is important that no single company or organization is overrepresented. To achieve this, we plan to define a new technical governance structure for React that is independent from the React Foundation.
+
+As a part of creating React’s new technical governance structure we will reach out to the community for feedback. Once finalized, we will share details in a future post.
+
+## Thank you {/*thank-you*/}
+
+React's incredible growth is thanks to the thousands of people, companies, and projects that have shaped React. The creation of the React Foundation is a testament to the strength and vibrancy of the React community. Together, the React Foundation and React’s new technical governance will ensure that React’s future is secure for years to come.
diff --git a/src/content/blog/2025/10/07/react-compiler-1.md b/src/content/blog/2025/10/07/react-compiler-1.md
new file mode 100644
index 00000000..5474c50d
--- /dev/null
+++ b/src/content/blog/2025/10/07/react-compiler-1.md
@@ -0,0 +1,194 @@
+---
+title: "React Compiler v1.0"
+author: Lauren Tan, Joe Savona, and Mofei Zhang
+date: 2025/10/07
+description: We are releasing the compiler's first stable release today.
+
+---
+
+Oct 7, 2025 by [Lauren Tan](https://x.com/potetotes), [Joe Savona](https://x.com/en_JS), and [Mofei Zhang](https://x.com/zmofei).
+
+---
+
+
+
+The React team is excited to share new updates:
+
+
+
+1. React Compiler 1.0 is available today.
+2. Compiler-powered lint rules ship in `eslint-plugin-react-hooks`'s `recommended` and `recommended-latest` preset.
+3. We've published an incremental adoption guide, and partnered with Expo, Vite, and Next.js so new apps can start with the compiler enabled.
+
+---
+
+We are releasing the compiler's first stable release today. React Compiler works on both React and React Native, and automatically optimizes components and hooks without requiring rewrites. The compiler has been battle tested on major apps at Meta and is fully production-ready.
+
+[React Compiler](/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](/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.
+
+This release is the culmination of a huge and complex engineering effort spanning almost a decade. The React team's first exploration into compilers started with [Prepack](https://github.com/facebookarchive/prepack) in 2017. While this project was eventually shut down, there were many learnings that informed the team on the design of Hooks, which were designed with a future compiler in mind. In 2021, [Xuan Huang](https://x.com/Huxpro) demoed the [first iteration](https://www.youtube.com/watch?v=lGEMwh32soc) of a new take on React Compiler.
+
+Although this first version of the new React Compiler was eventually rewritten, the first prototype gave us increased confidence that this was a tractable problem, and the learnings that an alternative compiler architecture could precisely give us the memoization characteristics we wanted. [Joe Savona](https://x.com/en_JS), [Sathya Gunasekaran](https://x.com/_gsathya), [Mofei Zhang](https://x.com/zmofei), and [Lauren Tan](https://x.com/potetotes) worked through our first rewrite, moving the compiler's architecture into a Control Flow Graph (CFG) based High-Level Intermediate Representation (HIR). This paved the way for much more precise analysis and even type inference within React Compiler. Since then, many significant portions of the compiler have been rewritten, with each rewrite informed by our learnings from the previous attempt. And we have received significant help and contributions from many members of the [React team](/community/team) along the way.
+
+This stable release is our first of many. The compiler will continue to evolve and improve, and we expect to see it become a new foundation and era for the next decade and more of React.
+
+You can jump straight to the [quickstart](/learn/react-compiler), or read on for the highlights from React Conf 2025.
+
+
+
+#### How does React Compiler work? {/*how-does-react-compiler-work*/}
+
+React Compiler is an optimizing compiler that optimizes components and hooks through automatic memoization. While it is implemented as a Babel plugin currently, the compiler is largely decoupled from Babel and lowers the Abstract Syntax Tree (AST) provided by Babel into its own novel HIR, and through multiple compiler passes, carefully understands data-flow and mutability of your React code. This allows the compiler to granularly memoize values used in rendering, including the ability to memoize conditionally, which is not possible through manual memoization.
+
+```js {8}
+import { use } from 'react';
+
+export default function ThemeProvider(props) {
+ if (!props.children) {
+ return null;
+ }
+ // The compiler can still memoize code after a conditional return
+ const theme = mergeTheme(props.theme, use(ThemeContext));
+ return (
+
+ {props.children}
+
+ );
+}
+```
+_See this example in the [React Compiler Playground](https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCBAvgQGYwQYEDkMCAhnHowNwA6AdvwQAPHPgIATBNVZQANoWpQ+HNBD4EAKgAsEGBAAU6ANzSSYACix0sYAJRF+BAmmoFzAQisQbAOjha0WXEWPntgRycCFjxYdT45WV51Sgi4NTBCPB09AgBeAj0YAHMEbV0ES2swHyzygBoSMnMyvQBhNTxhPFtbJKdo2LcIpwAeFoR2vk6hQiNWWSgEXOBavQoAPmHI4C9ff0DghD4KLZGAenHJ6bxN5N7+ChA6kDS+ajQilHRsXEyATyw5GI+gWRTQfAA8lg8Ko+GBKDQ6AxGAAjVgohCyAC0WFB4KxLHYeCxaWwgQQMDO4jQGW4-H45nCyTOZ1JWECrBhagAshBJMgCDwQPNZEKHgQwJyae8EPCQVAwZDobC7FwnuAtBAAO4ASSmFL48zAKGksjIFCAA)_
+
+In addition to automatic memoization, React Compiler also has validation passes that run on your React code. These passes encode the [Rules of React](/reference/rules), and uses the compiler's understanding of data-flow and mutability to provide diagnostics where the Rules of React are broken. These diagnostics often expose latent bugs hiding in React code, and are primarily surfaced through `eslint-plugin-react-hooks`.
+
+To learn more about how the compiler optimizes your code, visit the [Playground](https://playground.react.dev).
+
+
+
+## Use React Compiler Today {/*use-react-compiler-today*/}
+To install the compiler:
+
+npm
+
+{`npm install --save-dev --save-exact babel-plugin-react-compiler@latest`}
+
+
+pnpm
+
+{`pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest`}
+
+
+yarn
+
+{`yarn add --dev --exact babel-plugin-react-compiler@latest`}
+
+
+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 Compiler now supports optional chains and array indices as dependencies. These improvements ultimately result in fewer re-renders and more responsive UIs, while letting you keep writing idiomatic declarative code.
+
+You can find more details on using the Compiler in [our docs](/learn/react-compiler).
+
+## What we're seeing in production {/*react-compiler-at-meta*/}
+[The compiler has already shipped in apps like Meta Quest Store](https://youtu.be/lyEKhv8-3n0?t=3002). We've seen initial loads and cross-page navigations improve by up to 12%, while certain interactions are more than 2.5× faster. Memory usage stays neutral even with these wins. Although your mileage may vary, we recommend experimenting with the compiler in your app to see similar performance gains.
+
+## Backwards Compatibility {/*backwards-compatibility*/}
+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](/reference/react-compiler/target#targeting-react-17-or-18).
+
+## Enforce the Rules of React with compiler-powered linting {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/}
+React Compiler includes an ESLint rule that helps identify code that breaks the [Rules of React](/reference/rules). 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.
+
+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 install:
+
+npm
+
+{`npm install --save-dev eslint-plugin-react-hooks@latest`}
+
+
+pnpm
+
+{`pnpm add --save-dev eslint-plugin-react-hooks@latest`}
+
+
+yarn
+
+{`yarn add --dev eslint-plugin-react-hooks@latest`}
+
+
+```js {6}
+// eslint.config.js (Flat Config)
+import reactHooks from 'eslint-plugin-react-hooks';
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig([
+ reactHooks.configs.flat.recommended,
+]);
+```
+
+```js {3}
+// eslintrc.json (Legacy Config)
+{
+ "extends": ["plugin:react-hooks/recommended"],
+ // ...
+}
+```
+
+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. Here are a few examples we featured at React Conf:
+
+- Catching `setState` patterns that cause render loops with [`set-state-in-render`](/reference/eslint-plugin-react-hooks/lints/set-state-in-render).
+- Flagging expensive work inside effects via [`set-state-in-effect`](/reference/eslint-plugin-react-hooks/lints/set-state-in-effect).
+- Preventing unsafe ref access during render with [`refs`](/reference/eslint-plugin-react-hooks/lints/refs).
+
+## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
+By default, React Compiler will memoize your code based on its analysis and heuristics. In most cases, this memoization will be as precise, or moreso, than what you may have written — and as noted above, the compiler can memoize even in cases where `useMemo`/`useCallback` cannot be used, such as after an early return.
+
+However, in some cases developers may need more control over memoization. The `useMemo` and `useCallback` hooks can continue to be used with React Compiler as an escape hatch to provide control over which values are memoized. A common use-case for this is if a memoized value is used as an effect dependency, in order to ensure that an effect does not fire repeatedly even when its dependencies do not meaningfully change.
+
+For new code, we recommend relying on the compiler for memoization and using `useMemo`/`useCallback` where needed to achieve precise control.
+
+For existing code, we recommend either leaving existing memoization in place (removing it can change compilation output) or carefully testing before removing the memoization.
+
+## New apps should use React Compiler {/*new-apps-should-use-react-compiler*/}
+We have partnered with the Expo, Vite, and Next.js teams to add the compiler to the new app experience.
+
+[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.
+
+
+{`npx create-expo-app@latest`}
+
+
+[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`.
+
+
+{`npm create vite@latest`}
+
+
+
+
+
+{`npx create-next-app@latest`}
+
+
+## Adopt React Compiler incrementally {/*adopt-react-compiler-incrementally*/}
+If you're maintaining an existing application, you can roll out the compiler at your own pace. We published a step-by-step [incremental adoption guide](/learn/react-compiler/incremental-adoption) that covers gating strategies, compatibility checks, and rollout tooling so you can enable the compiler with confidence.
+
+## swc support (experimental) {/*swc-support-experimental*/}
+React Compiler can be installed across [several build tools](/learn/react-compiler#installation) such as Babel, Vite, and Rsbuild.
+
+In addition to those tools, we have been collaborating with Kang Dongyoon ([@kdy1dev](https://x.com/kdy1dev)) from the [swc](https://swc.rs/) team on adding additional support for React Compiler as an swc plugin. While this work isn't done, Next.js build performance should now be considerably faster when the [React Compiler is enabled in your Next.js app](https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler).
+
+We recommend using Next.js [15.3.1](https://github.com/vercel/next.js/releases/tag/v15.3.1) or greater to get the best build performance.
+
+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](/learn/react-compiler/installation#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.
+
+## Upgrading React Compiler {/*upgrading-react-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.
+
+However, because product code may sometimes break the [rules of React](/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](/learn/synchronizing-with-effects), your codebase may have `useEffect`s that cover other use cases, such as effects that needs to only run in response to specific values changing.
+
+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.
+
+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.
+
+---
+
+Thanks to [Jason Bonta](https://x.com/someextent), [Jimmy Lai](https://x.com/feedthejim), [Kang Dongyoon](https://x.com/kdy1dev) (@kdy1dev), and [Dan Abramov](https://bsky.app/profile/danabra.mov) for reviewing and editing this post.
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index 0477bb0c..a3054227 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -12,21 +12,27 @@ You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account
-
+
-React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. In this post ...
+We're releasing the compiler's first stable release today, plus linting and tooling improvements to make adoption easier.
-
+
-In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and sharing other areas we're working on now ...
+Today, we're announcing our plans to create the React Foundation and a new technical governance structure ...
+
+
+
+
+
+React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. In this post ...
-
+
-We are releasing the compiler's first Release Candidate (RC) today.
+In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and sharing other areas we're working on now ...
diff --git a/src/content/errors/index.md b/src/content/errors/index.md
index 25746d25..d4fc3927 100644
--- a/src/content/errors/index.md
+++ b/src/content/errors/index.md
@@ -7,4 +7,4 @@ In the minified production build of React, we avoid sending down full error mess
We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, the error message will include just a link to the docs for the error.
-For an example, see: [https://react.dev/errors/149](/errors/421).
+For an example, see: [https://react.dev/errors/149](/errors/149).
diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md
index 7987e126..92cf0b74 100644
--- a/src/content/learn/react-compiler/installation.md
+++ b/src/content/learn/react-compiler/installation.md
@@ -18,28 +18,24 @@ This guide will help you install and configure React Compiler in your React appl
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).
-
-React Compiler is currently in RC. Install it using the `@rc` tag to get the latest release candidate version.
-
-
## Installation {/*installation*/}
Install React Compiler as a `devDependency`:
-npm install -D babel-plugin-react-compiler@rc
+npm install -D babel-plugin-react-compiler@latest
Or with Yarn:
-yarn add -D babel-plugin-react-compiler@rc
+yarn add -D babel-plugin-react-compiler@latest
Or with pnpm:
-pnpm install -D babel-plugin-react-compiler@rc
+pnpm install -D babel-plugin-react-compiler@latest
## Basic Setup {/*basic-setup*/}
@@ -173,7 +169,7 @@ React Compiler includes an ESLint rule that helps identify code that can't be op
Install the ESLint plugin:
-npm install -D eslint-plugin-react-hooks@^6.1.1
+npm install -D eslint-plugin-react-hooks@latest
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.
diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md
index 96fa8802..ff5d6eae 100644
--- a/src/content/learn/react-compiler/introduction.md
+++ b/src/content/learn/react-compiler/introduction.md
@@ -16,10 +16,6 @@ React Compiler is a new build-time tool that automatically optimizes your React
-
-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.
-
-
## What does React Compiler do? {/*what-does-react-compiler-do*/}
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.
@@ -28,7 +24,7 @@ React Compiler automatically optimizes your React application at build time. Rea
Without the compiler, you need to manually memoize components and values to optimize re-renders:
-```js {expectedErrors: {'react-compiler': [4]}}
+```js
import { useMemo, useCallback, memo } from 'react';
const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
@@ -157,7 +153,7 @@ We encourage everyone to start using React Compiler. While the compiler is still
### Is it safe to use? {/*is-it-safe-to-use*/}
-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).
+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).
## What build tools are supported? {/*what-build-tools-are-supported*/}
@@ -169,9 +165,13 @@ Next.js users can enable the swc-invoked React Compiler by using [v15.3.1](https
## What should I do about useMemo, useCallback, and React.memo? {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
-React Compiler adds automatic memoization more precisely and granularly than is possible with [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component.
+By default, React Compiler will memoize your code based on its analysis and heuristics. In most cases, this memoization will be as precise, or moreso, than what you may have written.
+
+However, in some cases developers may need more control over memoization. The `useMemo` and `useCallback` hooks can continue to be used with React Compiler as an escape hatch to provide control over which values are memoized. A common use-case for this is if a memoized value is used as an effect dependency, in order to ensure that an effect does not fire repeatedly even when its dependencies do not meaningfully change.
+
+For new code, we recommend relying on the compiler for memoization and using `useMemo`/`useCallback` where needed to achieve precise control.
-This is done out of caution as a common anti-pattern with manual memoization is using it for correctness. This means your app depends on specific values being memoized to work properly. For example, in order to prevent an infinite loop, you may have memoized some values to stop a `useEffect` call from firing. This breaks the Rules of React, but since it can potentially be dangerous for the compiler to automatically remove manual memoization, the compiler will just bail out instead. You should manually remove your handwritten memoization and verify that your app still works as expected.
+For existing code, we recommend either leaving existing memoization in place (removing it can change compilation output) or carefully testing before removing the memoization.
## Try React Compiler {/*try-react-compiler*/}
diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md
index 39a1dc74..76e58e30 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -1106,7 +1106,7 @@ Remove the state variable and the Effect, and instead add a `useMemo` call to ca
-```js {expectedErrors: {'react-compiler': [8]}}
+```js
import { useState, useMemo } from 'react';
import { initialTodos, createTodo, getVisibleTodos } from './todos.js';
diff --git a/src/content/reference/dev-tools/react-performance-tracks.md b/src/content/reference/dev-tools/react-performance-tracks.md
index 4f613f80..dc2912da 100644
--- a/src/content/reference/dev-tools/react-performance-tracks.md
+++ b/src/content/reference/dev-tools/react-performance-tracks.md
@@ -24,7 +24,7 @@ These tracks are designed to provide developers with comprehensive insights into
React Performance tracks are only available in development and profiling builds of React:
- **Development**: enabled by default.
-- **Profiling**: you can either wrap a subtree that you want to instrument with [``](/reference/react/Profiler) component or have [React Developer Tools extension](/learn/react-developer-tools) enabled. Tracks specific to React Server Components are not enabled in profiling builds.
+- **Profiling**: Only Scheduler tracks are enabled by default. The Components track only lists Components that are in subtrees wrapped with [``](/reference/react/Profiler). If you have [React Developer Tools extension](/learn/react-developer-tools) enabled, all Components are included in the Components track even if they're not wrapped in ``. Server tracks are not available in profiling builds.
If enabled, tracks should appear automatically in the traces you record with the Performance panel of browsers that provide [extensibility APIs](https://developer.chrome.com/docs/devtools/performance/extension).
@@ -35,6 +35,13 @@ Server Components and Server Requests tracks are only available in development b
+### Using profiling builds {/*using-profiling-builds*/}
+
+In addition to production and development builds, React also includes a special profiling build.
+To use profiling builds, you have to use `react-dom/profiling` instead of `react-dom/client`.
+We recommend that you alias `react-dom/client` to `react-dom/profiling` at build time via bundler aliases instead of manually updating each `react-dom/client` import.
+Your framework might have built-in support for enabling React's profiling build.
+
---
## Tracks {/*tracks*/}
diff --git a/src/content/reference/eslint-plugin-react-hooks/index.md b/src/content/reference/eslint-plugin-react-hooks/index.md
index 34dbdc63..b3a16bc3 100644
--- a/src/content/reference/eslint-plugin-react-hooks/index.md
+++ b/src/content/reference/eslint-plugin-react-hooks/index.md
@@ -19,15 +19,10 @@ What this means for linting, is that you don’t need to fix all violations imme
## Recommended Rules {/*recommended*/}
-These rules are included in the `recommended` preset `eslint-plugin-react-hooks`:
+These rules are included in the `recommended` preset in `eslint-plugin-react-hooks`:
* [`exhaustive-deps`](/reference/eslint-plugin-react-hooks/lints/exhaustive-deps) - Validates that dependency arrays for React hooks contain all necessary dependencies
* [`rules-of-hooks`](/reference/eslint-plugin-react-hooks/lints/rules-of-hooks) - Validates that components and hooks follow the Rules of Hooks
-
-## Additional Rules {/*additional-rules*/}
-
-Starting in version 6.0, these rules are available to opt-in:
-
* [`component-hook-factories`](/reference/eslint-plugin-react-hooks/lints/component-hook-factories) - Validates higher order functions defining nested components or hooks
* [`config`](/reference/eslint-plugin-react-hooks/lints/config) - Validates the compiler configuration options
* [`error-boundaries`](/reference/eslint-plugin-react-hooks/lints/error-boundaries) - Validates usage of Error Boundaries instead of try/catch for child errors
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md
index 49d6b6d4..537903ab 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md
@@ -8,12 +8,6 @@ Validates against higher order functions defining nested components or hooks. Co
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
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.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/config.md b/src/content/reference/eslint-plugin-react-hooks/lints/config.md
index 98bc8b27..719e0841 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/config.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/config.md
@@ -1,6 +1,5 @@
---
title: config
-version: rc
---
@@ -9,12 +8,6 @@ Validates the compiler [configuration options](/reference/react-compiler/configu
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
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.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md
index c9430ea3..830098e5 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md
@@ -1,6 +1,5 @@
---
title: error-boundaries
-version: rc
---
@@ -9,12 +8,6 @@ Validates usage of Error Boundaries instead of try/catch for errors in child com
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
Try/catch blocks can't catch errors that happen during React's rendering process. Errors thrown in rendering methods or hooks bubble up through the component tree. Only [Error Boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) can catch these errors.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/gating.md b/src/content/reference/eslint-plugin-react-hooks/lints/gating.md
index 62b98df0..3bd662a8 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/gating.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/gating.md
@@ -1,6 +1,5 @@
---
title: gating
-version: rc
---
@@ -9,12 +8,6 @@ Validates configuration of [gating mode](/reference/react-compiler/gating).
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
Gating mode lets you gradually adopt React Compiler by marking specific components for optimization. This rule ensures your gating configuration is valid so the compiler knows which components to process.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/globals.md b/src/content/reference/eslint-plugin-react-hooks/lints/globals.md
index ea429404..fe0cbe00 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/globals.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/globals.md
@@ -1,6 +1,5 @@
---
title: globals
-version: rc
---
@@ -9,12 +8,6 @@ Validates against assignment/mutation of globals during render, part of ensuring
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
Global variables exist outside React's control. When you modify them during render, you break React's assumption that rendering is pure. This can cause components to behave differently in development vs production, break Fast Refresh, and make your app impossible to optimize with features like React Compiler.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md b/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md
index 33498ebe..2314cde0 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md
@@ -1,6 +1,5 @@
---
title: immutability
-version: rc
---
@@ -9,12 +8,6 @@ Validates against mutating props, state, and other values that [are immutable](/
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
A component’s props and state are immutable snapshots. Never mutate them directly. Instead, pass new props down, and use the setter function from `useState`.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md
index b041d02c..e057e197 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md
@@ -1,6 +1,5 @@
---
title: incompatible-library
-version: rc
---
@@ -11,12 +10,6 @@ Validates against usage of libraries which are incompatible with memoization (ma
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
-
-
These libraries were designed before React's memoization rules were fully documented. They made the correct choices at the time to optimize for ergonomic ways to keep components just the right amount of reactive as app state changes. While these legacy patterns worked, we have since discovered that it's incompatible with React's programming model. We will continue working with library authors to migrate these libraries to use patterns that follow the Rules of React.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md b/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md
index 5efc2f82..93b582b1 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md
@@ -1,6 +1,5 @@
---
title: preserve-manual-memoization
-version: rc
---
@@ -9,12 +8,6 @@ Validates that existing manual memoization is preserved by the compiler. React C
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
React Compiler preserves your existing `useMemo`, `useCallback`, and `React.memo` calls. If you've manually memoized something, the compiler assumes you had a good reason and won't remove it. However, incomplete dependencies prevent the compiler from understanding your code's data flow and applying further optimizations.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/purity.md b/src/content/reference/eslint-plugin-react-hooks/lints/purity.md
index 74c13275..af8aacc6 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/purity.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/purity.md
@@ -1,6 +1,5 @@
---
title: purity
-version: rc
---
@@ -9,12 +8,6 @@ Validates that [components/hooks are pure](/reference/rules/components-and-hooks
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
React components must be pure functions - given the same props, they should always return the same JSX. When components use functions like `Math.random()` or `Date.now()` during render, they produce different output each time, breaking React's assumptions and causing bugs like hydration mismatches, incorrect memoization, and unpredictable behavior.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/refs.md b/src/content/reference/eslint-plugin-react-hooks/lints/refs.md
index d8fe222e..3108fdd8 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/refs.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/refs.md
@@ -1,6 +1,5 @@
---
title: refs
-version: rc
---
@@ -9,12 +8,6 @@ Validates correct usage of refs, not reading/writing during render. See the "pit
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
Refs hold values that aren't used for rendering. Unlike state, changing a ref doesn't trigger a re-render. Reading or writing `ref.current` during render breaks React's expectations. Refs might not be initialized when you try to read them, and their values can be stale or inconsistent.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md
index 55b63b31..64fa5c65 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md
@@ -1,6 +1,5 @@
---
title: set-state-in-effect
-version: rc
---
@@ -9,12 +8,6 @@ Validates against calling setState synchronously in an effect, which can lead to
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
Setting state immediately inside an effect forces React to restart the entire render cycle. When you update state in an effect, React must re-render your component, apply changes to the DOM, and then run effects again. This creates an extra render pass that could have been avoided by transforming data directly during render or deriving state from props. Transform data at the top level of your component instead. This code will naturally re-run when props or state change without triggering additional render cycles.
@@ -78,7 +71,7 @@ function Component({selectedId, items}) {
Examples of correct code for this rule:
-```js {expectedErrors: {'react-compiler': [8]}}
+```js
// ✅ setState in an effect is fine if the value comes from a ref
function Tooltip() {
const ref = useRef(null);
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
index a88de100..7517d5f9 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
@@ -1,6 +1,5 @@
---
title: set-state-in-render
-version: rc
---
@@ -9,12 +8,6 @@ Validates against unconditionally setting state during render, which can trigger
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
Calling `setState` during render unconditionally triggers another render before the current one finishes. This creates an infinite loop that crashes your app.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md
index b403cc0b..bd52f070 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md
@@ -1,6 +1,5 @@
---
title: static-components
-version: rc
---
@@ -9,12 +8,6 @@ Validates that components are static, not recreated every render. Components tha
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
Components defined inside other components are recreated on every render. React sees each as a brand new component type, unmounting the old one and mounting the new one, destroying all state and DOM nodes in the process.
@@ -36,10 +29,10 @@ function Parent() {
// ❌ Dynamic component creation
function Parent({type}) {
- const Component = type === 'button'
+ const Component = type === 'button'
? () =>
: () =>
;
function Parent({type}) {
- const Component = type === 'button'
+ const Component = type === 'button'
? ButtonComponent // Reference existing component
: TextComponent;
-
+
return ;
}
```
@@ -72,7 +65,7 @@ You might define components inside to access local state:
// ❌ Wrong: Inner component to access parent state
function Parent() {
const [theme, setTheme] = useState('light');
-
+
function ThemedButton() { // Recreated every render!
return (
);
}
-
+
return ;
}
```
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md b/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md
index b6055449..a3eefcdb 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md
@@ -1,6 +1,5 @@
---
title: unsupported-syntax
-version: rc
---
@@ -9,12 +8,6 @@ Validates against syntax that React Compiler does not support. If you need to, y
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
React Compiler needs to statically analyze your code to apply optimizations. Features like `eval` and `with` make it impossible to statically understand what the code does at compile time, so the compiler can't optimize components that use them.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
index faa8c42d..a5a77e5f 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
@@ -1,6 +1,5 @@
---
title: use-memo
-version: rc
---
@@ -9,12 +8,6 @@ Validates that the `useMemo` hook is used with a return value. See [`useMemo` do
-
-
-This rule is available in `eslint-plugin-react-hooks` v6.
-
-
-
## Rule Details {/*rule-details*/}
`useMemo` is for computing and caching expensive values, not for side effects. Without a return value, `useMemo` returns `undefined`, which defeats its purpose and likely indicates you're using the wrong hook.
diff --git a/src/content/reference/react-compiler/compiling-libraries.md b/src/content/reference/react-compiler/compiling-libraries.md
index f09ffcb7..ec0a7581 100644
--- a/src/content/reference/react-compiler/compiling-libraries.md
+++ b/src/content/reference/react-compiler/compiling-libraries.md
@@ -21,7 +21,7 @@ As a library author, you can compile your library code before publishing to npm.
Add React Compiler to your library's build process:
-npm install -D babel-plugin-react-compiler@rc
+npm install -D babel-plugin-react-compiler@latest
Configure your build tool to compile your library. For example, with Babel:
@@ -45,13 +45,13 @@ If your library supports React versions below 19, you'll need additional configu
We recommend installing react-compiler-runtime as a direct dependency:
-npm install react-compiler-runtime@rc
+npm install react-compiler-runtime@latest
```json
{
"dependencies": {
- "react-compiler-runtime": "^19.1.0-rc.2"
+ "react-compiler-runtime": "^1.0.0"
},
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
diff --git a/src/content/reference/react-compiler/configuration.md b/src/content/reference/react-compiler/configuration.md
index f38f1afc..ec9b27e6 100644
--- a/src/content/reference/react-compiler/configuration.md
+++ b/src/content/reference/react-compiler/configuration.md
@@ -130,7 +130,7 @@ module.exports = {
Older React versions need the runtime package and target configuration:
```bash
-npm install react-compiler-runtime@rc
+npm install react-compiler-runtime@latest
```
```js
diff --git a/src/content/reference/react-compiler/target.md b/src/content/reference/react-compiler/target.md
index 38174851..8ccc4a6b 100644
--- a/src/content/reference/react-compiler/target.md
+++ b/src/content/reference/react-compiler/target.md
@@ -45,7 +45,7 @@ Configures the React version compatibility for the compiled output.
- Always use string values, not numbers (e.g., `'17'` not `17`)
- Don't include patch versions (e.g., use `'18'` not `'18.2.0'`)
- React 19 includes built-in compiler runtime APIs
-- React 17 and 18 require installing `react-compiler-runtime@rc`
+- React 17 and 18 require installing `react-compiler-runtime@latest`
---
@@ -75,7 +75,7 @@ For React 17 and React 18 projects, you need two steps:
1. Install the runtime package:
```bash
-npm install react-compiler-runtime@rc
+npm install react-compiler-runtime@latest
```
2. Configure the target:
@@ -114,7 +114,7 @@ If you see errors like "Cannot find module 'react/compiler-runtime'":
2. If using React 17 or 18, install the runtime:
```bash
- npm install react-compiler-runtime@rc
+ npm install react-compiler-runtime@latest
```
3. Ensure your target matches your React version:
@@ -130,7 +130,7 @@ Ensure the runtime package is:
1. Installed in your project (not globally)
2. Listed in your `package.json` dependencies
-3. The correct version (`@rc` tag)
+3. The correct version (`@latest` tag)
4. Not in `devDependencies` (it's needed at runtime)
### Checking compiled output {/*checking-output*/}
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index b17b1a40..1043b13a 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -278,7 +278,7 @@ export default function Search() {
Displaying a form submission error message before the JavaScript bundle loads for progressive enhancement requires that:
-1. `
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+