Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,9 @@ In React Labs posts, we write about projects in active research and development.

<Note>

React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!
React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!

We're looking for speakers to help us create talks about the features covered in this post. If you're interested in speaking at ReactConf, [please apply here](https://forms.reform.app/react-conf/call-for-speakers/) (no talk proposal required).

For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev).
Watch the livestream on [the React Conf website](https://conf.react.dev).

</Note>

Expand Down Expand Up @@ -11544,7 +11542,7 @@ Try searching for a video, selecting it, and clicking "back":
<Sandpack>

```js src/App.js
import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";
import { unstable_ViewTransition as ViewTransition, Activity } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";

export default function App() {
const { url } = useRouter();
Expand Down Expand Up @@ -12881,7 +12879,7 @@ With this update, if the content on the next page has time to pre-render, it wil
<Sandpack>

```js src/App.js
import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data'
import { unstable_ViewTransition as ViewTransition, Activity, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data'

export default function App() {
const { url } = useRouter();
Expand Down
339 changes: 339 additions & 0 deletions src/content/blog/2025/10/01/react-19-2.md

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions src/content/blog/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account

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

<BlogCard title="React 19.2" date="October 1, 2025" url="/blog/2025/10/01/react-19-2">

React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. In this post ...

</BlogCard>

<BlogCard title="React Labs: View Transitions, Activity, and more" date="April 23, 2025" url="/blog/2025/04/23/react-labs-view-transitions-activity-and-more">

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 ...
Expand Down
8 changes: 0 additions & 8 deletions src/content/learn/removing-effect-dependencies.md
Original file line number Diff line number Diff line change
Expand Up @@ -609,14 +609,6 @@ function ChatRoom({ roomId }) {
### Do you want to read a value without "reacting" to its changes? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/}
<Canary>
**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
</Canary>
Suppose that you want to play a sound when the user receives a new message unless `isMuted` is `true`:
```js {3,10-12}
Expand Down
8 changes: 0 additions & 8 deletions src/content/learn/reusing-logic-with-custom-hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -837,14 +837,6 @@ Every time your `ChatRoom` component re-renders, it passes the latest `roomId` a
### Passing event handlers to custom Hooks {/*passing-event-handlers-to-custom-hooks*/}
<Canary>
**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
</Canary>
As you start using `useChatRoom` in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook:
```js {9-11}
Expand Down
26 changes: 1 addition & 25 deletions src/content/learn/separating-events-from-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -400,14 +400,6 @@ You need a way to separate this non-reactive logic from the reactive Effect arou

### Declaring an Effect Event {/*declaring-an-effect-event*/}

<Canary>

**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**

[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)

</Canary>

Use a special Hook called [`useEffectEvent`](/reference/react/useEffectEvent) to extract this non-reactive logic out of your Effect:

```js {1,4-6}
Expand Down Expand Up @@ -580,14 +572,6 @@ You can think of Effect Events as being very similar to event handlers. The main

### Reading latest props and state with Effect Events {/*reading-latest-props-and-state-with-effect-events*/}

<Canary>

**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**

[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)

</Canary>

Effect Events let you fix many patterns where you might be tempted to suppress the dependency linter.

For example, say you have an Effect to log the page visits:
Expand Down Expand Up @@ -729,7 +713,7 @@ function Page({ url }) {
}
```

After `useEffectEvent` becomes a stable part of React, we recommend **never suppressing the linter**.
We recommend **never suppressing the linter**.

The first downside of suppressing the rule is that React will no longer warn you when your Effect needs to "react" to a new reactive dependency you've introduced to your code. In the earlier example, you added `url` to the dependencies *because* React reminded you to do it. You will no longer get such reminders for any future edits to that Effect if you disable the linter. This leads to bugs.

Expand Down Expand Up @@ -882,14 +866,6 @@ Read [Removing Effect Dependencies](/learn/removing-effect-dependencies) for oth

### Limitations of Effect Events {/*limitations-of-effect-events*/}

<Canary>

**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**

[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)

</Canary>

Effect Events are very limited in how you can use them:

* **Only call them from inside Effects.**
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
---
title: React Performance tracks
version: canary
---

<Canary>

**This feature is currently only available in React’s Canary and Experimental channels.**

[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)

</Canary>

<Intro>

React Performance tracks are specialized custom entries that appear on the Performance panel's timeline in your browser developer tools.
Expand Down Expand Up @@ -67,7 +58,7 @@ The Scheduler is an internal React concept used for managing tasks with differen
Every render pass consists of multiple phases that you can see on a timeline:

- **Update** - this is what caused a new render pass.
- **Render** - React renders the updated subtree by calling render functions of components. You can see the rendered components subtree on [Components track](/reference/developer-tooling/react-performance-tracks#components), which follows the same color scheme.
- **Render** - React renders the updated subtree by calling render functions of components. You can see the rendered components subtree on [Components track](#components), which follows the same color scheme.
- **Commit** - After rendering components, React will submit the changes to the DOM and run layout effects, like [`useLayoutEffect`](/reference/react/useLayoutEffect).
- **Remaining Effects** - React runs passive effects of a rendered subtree. This usually happens after the paint, and this is when React runs hooks like [`useEffect`](/reference/react/useEffect). One known exception is user interactions, like clicks, or other discrete events. In this scenario, this phase could run before the paint.

Expand Down
16 changes: 5 additions & 11 deletions src/content/reference/eslint-plugin-react-hooks/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,6 @@ version: rc

</Intro>

<RC>

These docs include rules available in the RC version of `eslint-plugin-react-hooks`.

You can try them by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).

</RC>

This plugin helps you catch violations of React's rules at build time, ensuring your components and hooks follow React's rules for correctness and performance. The lints cover both fundamental React patterns (exhaustive-deps and rules-of-hooks) and issues flagged by React Compiler. React Compiler diagnostics are automatically surfaced by this ESLint plugin, and can be used even if your app hasn't adopted the compiler yet.

<Note>
Expand All @@ -25,14 +17,16 @@ When the compiler reports a diagnostic, it means that the compiler was able to s
What this means for linting, is that you don’t need to fix all violations immediately. Address them at your own pace to gradually increase the number of optimized components.
</Note>

## Available Lints {/*available-lints*/}
## Recommended Rules {/*recommended*/}

These rules are available in the stable version of `eslint-plugin-react-hooks`:
These rules are included in the `recommended` preset `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

These rules are available in the RC version of `eslint-plugin-react-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
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
---
title: component-hook-factories
version: rc
---

<Intro>
Expand All @@ -9,13 +8,11 @@ Validates against higher order functions defining nested components or hooks. Co

</Intro>

<RC>
<Note>

This rule is available in the RC version of `eslint-plugin-react-hooks`.
This rule is available in `eslint-plugin-react-hooks` v6.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if it's opt-in, could we tell people what incantation they need to enable?

rules: {
  'react-hooks/component-hook-factories': 'error',
}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, but i'm not sure what that looks like for flat config, is it just that?


You can try it by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).

</RC>
</Note>

## Rule Details {/*rule-details*/}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ Validates the compiler [configuration options](/reference/react-compiler/configu

</Intro>

<RC>
<Note>

This rule is available in the RC version of `eslint-plugin-react-hooks`.
This rule is available in `eslint-plugin-react-hooks` v6.

You can try it by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).

</RC>
</Note>

## Rule Details {/*rule-details*/}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ Validates usage of Error Boundaries instead of try/catch for errors in child com

</Intro>

<RC>
<Note>

This rule is available in the RC version of `eslint-plugin-react-hooks`.
This rule is available in `eslint-plugin-react-hooks` v6.

You can try it by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).

</RC>
</Note>

## Rule Details {/*rule-details*/}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ Validates configuration of [gating mode](/reference/react-compiler/gating).

</Intro>

<RC>
<Note>

This rule is available in the RC version of `eslint-plugin-react-hooks`.
This rule is available in `eslint-plugin-react-hooks` v6.

You can try it by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).

</RC>
</Note>

## Rule Details {/*rule-details*/}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ Validates against assignment/mutation of globals during render, part of ensuring

</Intro>

<RC>
<Note>

This rule is available in the RC version of `eslint-plugin-react-hooks`.
This rule is available in `eslint-plugin-react-hooks` v6.

You can try it by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).

</RC>
</Note>

## Rule Details {/*rule-details*/}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ Validates against mutating props, state, and other values that [are immutable](/

</Intro>

<RC>
<Note>

This rule is available in the RC version of `eslint-plugin-react-hooks`.
This rule is available in `eslint-plugin-react-hooks` v6.

You can try it by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).

</RC>
</Note>

## Rule Details {/*rule-details*/}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ Validates against usage of libraries which are incompatible with memoization (ma

</Intro>

<RC>

This rule is available in the RC version of `eslint-plugin-react-hooks`.
<Note>

You can try it by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).
This rule is available in `eslint-plugin-react-hooks` v6.

</RC>
</Note>

<Note>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ Validates that existing manual memoization is preserved by the compiler. React C

</Intro>

<RC>
<Note>

This rule is available in the RC version of `eslint-plugin-react-hooks`.
This rule is available in `eslint-plugin-react-hooks` v6.

You can try it by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).

</RC>
</Note>

## Rule Details {/*rule-details*/}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ Validates that [components/hooks are pure](/reference/rules/components-and-hooks

</Intro>

<RC>
<Note>

This rule is available in the RC version of `eslint-plugin-react-hooks`.
This rule is available in `eslint-plugin-react-hooks` v6.

You can try it by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).

</RC>
</Note>

## Rule Details {/*rule-details*/}

Expand Down
8 changes: 3 additions & 5 deletions src/content/reference/eslint-plugin-react-hooks/lints/refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ Validates correct usage of refs, not reading/writing during render. See the "pit

</Intro>

<RC>
<Note>

This rule is available in the RC version of `eslint-plugin-react-hooks`.
This rule is available in `eslint-plugin-react-hooks` v6.

You can try it by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).

</RC>
</Note>

## Rule Details {/*rule-details*/}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,11 @@ Validates against calling setState synchronously in an effect, which can lead to

</Intro>

<RC>
<Note>

This rule is available in the RC version of `eslint-plugin-react-hooks`.
This rule is available in `eslint-plugin-react-hooks` v6.

You can try it by upgrading the lint plugin [to the most recent RC version](/learn/react-compiler/installation#eslint-integration).

</RC>
</Note>

## Rule Details {/*rule-details*/}

Expand Down
Loading