mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-25 23:05:23 +00:00
Blog post for React 19.2 (#8028)
* wip * feedback and rm canary stuff * tweak * fix json * more canary stuff * fix link * update dates * update meta description * Expand performance track section * adjust linter note * edit perf tracks down * edit perf tracks down more * tweak note * tweak useEffectEvent * formatting * tweaks * ppr * rm canary stuff * fix json * fix json * tweaks * linter note * nit * nit * link * nit * ppr * missing await * add lint v6 * fix link --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
This commit is contained in:
Ricky
BIN
public/images/docs/diagrams/19_2_batching_after.dark.png
Normal file
BIN
public/images/docs/diagrams/19_2_batching_after.dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/images/docs/diagrams/19_2_batching_after.png
Normal file
BIN
public/images/docs/diagrams/19_2_batching_after.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/images/docs/diagrams/19_2_batching_before.dark.png
Normal file
BIN
public/images/docs/diagrams/19_2_batching_before.dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/images/docs/diagrams/19_2_batching_before.png
Normal file
BIN
public/images/docs/diagrams/19_2_batching_before.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
@@ -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();
|
||||
|
||||
339
src/content/blog/2025/10/01/react-19-2.md
Normal file
339
src/content/blog/2025/10/01/react-19-2.md
Normal file
@@ -0,0 +1,339 @@
|
||||
---
|
||||
title: "React 19.2"
|
||||
author: The React Team
|
||||
date: 2025/10/01
|
||||
description: React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more.
|
||||
---
|
||||
|
||||
October 1, 2025 by [The React Team](/community/team)
|
||||
|
||||
---
|
||||
|
||||
<Intro>
|
||||
|
||||
React 19.2 is now available on npm!
|
||||
|
||||
</Intro>
|
||||
|
||||
This is our third release in the last year, following React 19 in December and React 19.1 in June. In this post, we'll give an overview of the new features in React 19.2, and highlight some notable changes.
|
||||
|
||||
<InlineToc />
|
||||
|
||||
---
|
||||
|
||||
## New React Features {/*new-react-features*/}
|
||||
|
||||
### `<Activity />` {/*activity*/}
|
||||
|
||||
`<Activity>` lets you break your app into "activities" that can be controlled and prioritized.
|
||||
|
||||
You can use Activity as an alternative to conditionally rendering parts of your app:
|
||||
|
||||
```js
|
||||
// Before
|
||||
{isVisible && <Page />}
|
||||
|
||||
// After
|
||||
<Activity mode={isVisible ? 'visible' : 'hidden'}>
|
||||
<Page />
|
||||
</Activity>
|
||||
```
|
||||
|
||||
In React 19.2, Activity supports two modes: `visible` and `hidden`.
|
||||
|
||||
- `hidden`: hides the children, unmounts effects, and defers all updates until React has nothing left to work on.
|
||||
- `visible`: shows the children, mounts effects, and allows updates to be processed normally.
|
||||
|
||||
This means you can pre-render and keep rendering hidden parts of the app without impacting the performance of anything visible on screen.
|
||||
|
||||
You can use Activity to render hidden parts of the app that a user is likely to navigate to next, or to save the state of parts the user navigates away from. This helps make navigations quicker by loading data, css, and images in the background, and allows back navigations to maintain state such as input fields.
|
||||
|
||||
In the future, we plan to add more modes to Activity for different use cases.
|
||||
|
||||
For examples on how to use Activity, check out the [Activity docs](/reference/react/Activity).
|
||||
|
||||
---
|
||||
|
||||
### `useEffectEvent` {/*use-effect-event*/}
|
||||
|
||||
One common pattern with `useEffect` is to notify the app code about some kind of "events" from an external system. For example, when a chat room gets connected, you might want to display a notification:
|
||||
|
||||
```js {5,11}
|
||||
function ChatRoom({ roomId, theme }) {
|
||||
useEffect(() => {
|
||||
const connection = createConnection(serverUrl, roomId);
|
||||
connection.on('connected', () => {
|
||||
showNotification('Connected!', theme);
|
||||
});
|
||||
connection.connect();
|
||||
return () => {
|
||||
connection.disconnect()
|
||||
};
|
||||
}, [roomId, theme]);
|
||||
// ...
|
||||
```
|
||||
|
||||
The problem with the code above is that a change to any values used inside such an "event" will cause the surrounding Effect to re-run. For example, changing the `theme` will cause the chat room to reconnect. This makes sense for values related to the Effect logic itself, like `roomId`, but it doesn't make sense for `theme`.
|
||||
|
||||
To solve this, most users just disable the lint rule and exclude the dependency. But that can lead to bugs since the linter can no longer help you keep the dependencies up to date if you need to update the Effect later.
|
||||
|
||||
With `useEffectEvent`, you can split the "event" part of this logic out of the Effect that emits it:
|
||||
|
||||
```js {2,3,4,9}
|
||||
function ChatRoom({ roomId, theme }) {
|
||||
const onConnected = useEffectEvent(() => {
|
||||
showNotification('Connected!', theme);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const connection = createConnection(serverUrl, roomId);
|
||||
connection.on('connected', () => {
|
||||
onConnected();
|
||||
});
|
||||
connection.connect();
|
||||
return () => connection.disconnect();
|
||||
}, [roomId]); // ✅ All dependencies declared (Effect Events aren't dependencies)
|
||||
// ...
|
||||
```
|
||||
|
||||
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.0` 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.
|
||||
|
||||
<Note>
|
||||
|
||||
#### When to use `useEffectEvent` {/*when-to-use-useeffectevent*/}
|
||||
|
||||
You should use `useEffectEvent` for functions that are conceptually "events" that happen to be fired from an Effect instead of a user event (that's what makes it an "Effect Event"). You don't need to wrap everything in `useEffectEvent`, or to use it just to silence the lint error, as this can lead to bugs.
|
||||
|
||||
For a deep dive on how to think about Event Effects, see: [Separating Events from Effects](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects).
|
||||
|
||||
</Note>
|
||||
|
||||
---
|
||||
|
||||
### `cacheSignal` {/*cache-signal*/}
|
||||
|
||||
<RSC>
|
||||
|
||||
`cacheSignal` is only for use with [React Server Components](/reference/rsc/server-components).
|
||||
|
||||
</RSC>
|
||||
|
||||
`cacheSignal` allows you to know when the [`cache()`](/reference/react/cache) lifetime is over:
|
||||
|
||||
```
|
||||
import {cache, cacheSignal} from 'react';
|
||||
const dedupedFetch = cache(fetch);
|
||||
|
||||
async function Component() {
|
||||
await dedupedFetch(url, { signal: cacheSignal() });
|
||||
}
|
||||
```
|
||||
|
||||
This allows you to clean up or abort work when the result will no longer be used in the cache, such as:
|
||||
|
||||
- React has successfully completed rendering
|
||||
- The render was aborted
|
||||
- The render has failed
|
||||
|
||||
For more info, see the [`cacheSignal` docs](/reference/react/cacheSignal).
|
||||
|
||||
---
|
||||
|
||||
### Performance Tracks {/*performance-tracks*/}
|
||||
|
||||
React 19.2 adds a new set of [custom tracks](https://developer.chrome.com/docs/devtools/performance/extension) to Chrome DevTools performance profiles to provide more information about the performance of your React app:
|
||||
|
||||
<div style={{display: 'flex', justifyContent: 'center', marginBottom: '1rem'}}>
|
||||
<picture >
|
||||
<source srcset="/images/blog/react-labs-april-2025/perf_tracks.png" />
|
||||
<img className="w-full light-image" src="/images/blog/react-labs-april-2025/perf_tracks.webp" />
|
||||
</picture>
|
||||
<picture >
|
||||
<source srcset="/images/blog/react-labs-april-2025/perf_tracks_dark.png" />
|
||||
<img className="w-full dark-image" src="/images/blog/react-labs-april-2025/perf_tracks_dark.webp" />
|
||||
</picture>
|
||||
</div>
|
||||
|
||||
The [React Performance Tracks docs](/reference/dev-tools/react-performance-tracks) explain everything included in the tracks, but here is a high-level overview.
|
||||
|
||||
#### Scheduler ⚛ {/*scheduler-*/}
|
||||
|
||||
The Scheduler track shows what React is working on for different priorities such as "blocking" for user interactions, or "transition" for updates inside startTransition. Inside each track, you will see the type of work being performed such as the event that scheduled an update, and when the render for that update happened.
|
||||
|
||||
We also show information such as when an update is blocked waiting for a different priority, or when React is waiting for paint before continuing. The Scheduler track helps you understand how React splits your code into different priorities, and the order it completed the work.
|
||||
|
||||
See the [Scheduler track](/reference/dev-tools/react-performance-tracks#scheduler) docs to see everything included.
|
||||
|
||||
#### Components ⚛ {/*components-*/}
|
||||
|
||||
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.
|
||||
|
||||
See the [Component track docs](/reference/dev-tools/react-performance-tracks#components) for see everything included.
|
||||
|
||||
---
|
||||
|
||||
## New React DOM Features {/*new-react-dom-features*/}
|
||||
|
||||
### Partial Pre-rendering {/*partial-pre-rendering*/}
|
||||
|
||||
In 19.2 we're adding a new capability to pre-render part of the app ahead of time, and resume rendering it later.
|
||||
|
||||
This feature is called "Partial Pre-rendering", and allows you to pre-render the static parts of your app and serve it from a CDN, and then resume rendering the shell to fill it in with dynamic content later.
|
||||
|
||||
To pre-render an app to resume later, first call `prerender` with an `AbortController`:
|
||||
|
||||
```
|
||||
const {prelude, postponed} = await prerender(<App />, {
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
// Save the postponed state for later
|
||||
await savePostponedState(postponed);
|
||||
|
||||
// Send prelude to client or CDN.
|
||||
```
|
||||
|
||||
Then, you can return the `prelude` shell to the client, and later call `resume` to "resume" to a SSR stream:
|
||||
|
||||
```
|
||||
const postponed = await getPostponedState(request);
|
||||
const resumeStream = await resume(<App />, postponed);
|
||||
|
||||
// Send stream to client.
|
||||
```
|
||||
|
||||
Or you can call `resumeAndPrerender` to resume to get static HTML for SSG:
|
||||
|
||||
```
|
||||
const postponedState = await getPostponedState(request);
|
||||
const { prelude } = await resumeAndPrerender(<App />, postponedState);
|
||||
|
||||
// Send complete HTML prelude to CDN.
|
||||
```
|
||||
|
||||
For more info, see the docs for the new APIs:
|
||||
- `react-dom/server`
|
||||
- [`resume`](/reference/react-dom/server/resume): for Web Streams.
|
||||
- [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) for Node Streams.
|
||||
- `react-dom/static`
|
||||
- [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) for Web Streams.
|
||||
- [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) for Node Streams.
|
||||
|
||||
Additionally, the prerender apis now return a `postpone` state to pass to the `resume` apis.
|
||||
|
||||
---
|
||||
|
||||
## Notable Changes {/*notable-changes*/}
|
||||
|
||||
### Batching Suspense Boundaries for SSR {/*batching-suspense-boundaries-for-ssr*/}
|
||||
|
||||
We fixed a behavioral bug where Suspense boundaries would reveal differently depending on if they were rendered on the client or when streaming from server-side rendering.
|
||||
|
||||
Starting in 19.2, React will batch reveals of server-rendered Suspense boundaries for a short time, to allow more content to be revealed together and align with the client-rendered behavior.
|
||||
|
||||
<Diagram name="19_2_batching_before" height={162} width={1270} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a page rectangle showing a glimmer loading state with faded bars. The second panel shows the top half of the page revealed and highlighted in blue. The third panel shows the entire the page revealed and highlighted in blue.">
|
||||
|
||||
Previously, during streaming server-side rendering, suspense content would immediately replace fallbacks.
|
||||
|
||||
</Diagram>
|
||||
|
||||
<Diagram name="19_2_batching_after" height={162} width={1270} alt="Diagram with three sections, with an arrow transitioning each section in between. The first section contains a page rectangle showing a glimmer loading state with faded bars. The second panel shows the same page. The third panel shows the entire the page revealed and highlighted in blue.">
|
||||
|
||||
In React 19.2, suspense boundaries are batched for a small amount of time, to allow revealing more content together.
|
||||
|
||||
</Diagram>
|
||||
|
||||
This fix also prepares apps for supporting `<ViewTransition>` for Suspense during SSR. By revealing more content together, animations can run in larger batches of content, and avoid chaining animations of content that stream in close together.
|
||||
|
||||
<Note>
|
||||
|
||||
React uses heuristics to ensure throttling does not impact core web vitals and search ranking.
|
||||
|
||||
For example, if the total page load time is approaching 2.5s (which is the time considered "good" for [LCP](https://web.dev/articles/lcp)), React will stop batching and reveal content immediately so that the throttling is not the reason to miss the metric.
|
||||
|
||||
</Note>
|
||||
|
||||
---
|
||||
|
||||
### SSR: Web Streams support for Node {/*ssr-web-streams-support-for-node*/}
|
||||
|
||||
React 19.2 adds support for Web Streams for streaming SSR in Node.js:
|
||||
- [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) is now available for Node.js
|
||||
- [`prerender`](/reference/react-dom/static/prerender) is now available for Node.js
|
||||
|
||||
As well as the new `resume` APIs:
|
||||
- [`resume`](/reference/react-dom/server/resume): is available for Node.js.
|
||||
- [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) is available for Node.js.
|
||||
|
||||
|
||||
<Pitfall>
|
||||
|
||||
#### Prefer Node Streams for server-side rendering in Node.js {/*prefer-node-streams-for-server-side-rendering-in-nodejs*/}
|
||||
|
||||
In Node.js environments, we still highly recommend using the Node Streams APIs:
|
||||
|
||||
- [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream)
|
||||
- [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream)
|
||||
- [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream)
|
||||
- [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream)
|
||||
|
||||
This is because Node Streams are much faster than Web Streams in Node, and Web Streams do not support compression by default, leading to users accidentally missing the benefits of streaming.
|
||||
|
||||
</Pitfall>
|
||||
|
||||
---
|
||||
|
||||
### `eslint-plugin-react-hooks` v6 {/*eslint-plugin-react-hooks*/}
|
||||
|
||||
We also published `eslint-plugin-react-hooks@6.1.0` 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`:
|
||||
|
||||
```diff
|
||||
- extends: ['plugin:react-hooks/recommended']
|
||||
+ 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).
|
||||
|
||||
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).
|
||||
|
||||
---
|
||||
|
||||
### Update the default `useId` prefix {/*update-the-default-useid-prefix*/}
|
||||
|
||||
In 19.2, we're updating the default `useId` prefix from `:r:` (19.0.0) or `«r»` (19.1.0) to `_r_`.
|
||||
|
||||
The original intent of using a special character that was not valid for CSS selectors was that it would be unlikely to collide with IDs written by users. However, to support View Transitions, we need to ensure that IDs generated by `useId` are valid for `view-transition-name` and XML 1.0 names.
|
||||
|
||||
---
|
||||
|
||||
## Changelog {/*changelog*/}
|
||||
|
||||
Other notable changes
|
||||
- `react-dom`: Allow nonce to be used on hoistable styles [#32461](https://github.com/facebook/react/pull/32461)
|
||||
- `react-dom`: Warn for using a React owned node as a Container if it also has text content [#32774](https://github.com/facebook/react/pull/32774)
|
||||
|
||||
Notable bug fixes
|
||||
- `react`: Stringify context as "SomeContext" instead of "SomeContext.Provider" [#33507](https://github.com/facebook/react/pull/33507)
|
||||
- `react`: Fix infinite useDeferredValue loop in popstate event [#32821](https://github.com/facebook/react/pull/32821)
|
||||
- `react`: Fix a bug when an initial value was passed to useDeferredValue [#34376](https://github.com/facebook/react/pull/34376)
|
||||
- `react`: Fix a crash when submitting forms with Client Actions [#33055](https://github.com/facebook/react/pull/33055)
|
||||
- `react`: Hide/unhide the content of dehydrated suspense boundaries if they resuspend [#32900](https://github.com/facebook/react/pull/32900)
|
||||
- `react`: Avoid stack overflow on wide trees during Hot Reload [#34145](https://github.com/facebook/react/pull/34145)
|
||||
- `react`: Improve component stacks in various places [#33629](https://github.com/facebook/react/pull/33629), [#33724](https://github.com/facebook/react/pull/33724), [#32735](https://github.com/facebook/react/pull/32735), [#33723](https://github.com/facebook/react/pull/33723)
|
||||
- `react`: Fix a bug with React.use inside React.lazy-ed Component [#33941](https://github.com/facebook/react/pull/33941)
|
||||
- `react-dom`: Stop warning when ARIA 1.3 attributes are used [#34264](https://github.com/facebook/react/pull/34264)
|
||||
- `react-dom`: Fix a bug with deeply nested Suspense inside Suspense fallbacks [#33467](https://github.com/facebook/react/pull/33467)
|
||||
- `react-dom`: Avoid hanging when suspending after aborting while rendering [#34192](https://github.com/facebook/react/pull/34192)
|
||||
|
||||
For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md).
|
||||
|
||||
|
||||
---
|
||||
|
||||
_Thanks to [Ricky Hanlon](https://bsky.app/profile/ricky.fm) for [writing this post](https://www.youtube.com/shorts/T9X3YkgZRG0), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), and [Joe Savona](https://x.com/en_JS) for reviewing this post._
|
||||
@@ -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 ...
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
@@ -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:
|
||||
@@ -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.
|
||||
|
||||
@@ -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.**
|
||||
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
---
|
||||
title: component-hook-factories
|
||||
version: rc
|
||||
---
|
||||
|
||||
<Intro>
|
||||
@@ -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.
|
||||
|
||||
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*/}
|
||||
|
||||
|
||||
@@ -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*/}
|
||||
|
||||
|
||||
@@ -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*/}
|
||||
|
||||
|
||||
@@ -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*/}
|
||||
|
||||
|
||||
@@ -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*/}
|
||||
|
||||
|
||||
@@ -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*/}
|
||||
|
||||
|
||||
@@ -9,13 +9,11 @@ Validates against usage of libraries which are incompatible with memoization (ma
|
||||
|
||||
</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>
|
||||
|
||||
<Note>
|
||||
|
||||
|
||||
@@ -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*/}
|
||||
|
||||
|
||||
@@ -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*/}
|
||||
|
||||
|
||||
@@ -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*/}
|
||||
|
||||
|
||||
@@ -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*/}
|
||||
|
||||
|
||||
@@ -9,13 +9,11 @@ Validates against unconditionally setting state during render, which can trigger
|
||||
|
||||
</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*/}
|
||||
|
||||
|
||||
@@ -9,13 +9,11 @@ Validates that components are static, not recreated every render. Components tha
|
||||
|
||||
</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*/}
|
||||
|
||||
|
||||
@@ -9,13 +9,11 @@ Validates against syntax that React Compiler does not support. If you need to, y
|
||||
|
||||
</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*/}
|
||||
|
||||
|
||||
@@ -9,13 +9,11 @@ Validates that the `useMemo` hook is used with a return value. See [`useMemo` do
|
||||
|
||||
</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*/}
|
||||
|
||||
|
||||
@@ -1,16 +1,7 @@
|
||||
---
|
||||
title: resume
|
||||
canary: true
|
||||
---
|
||||
|
||||
<Canary>
|
||||
|
||||
**The `resume` 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>
|
||||
|
||||
<Intro>
|
||||
|
||||
`resume` streams a pre-rendered React tree to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
|
||||
|
||||
@@ -1,16 +1,7 @@
|
||||
---
|
||||
title: resumeToPipeableStream
|
||||
canary: true
|
||||
---
|
||||
|
||||
<Canary>
|
||||
|
||||
**The `resumeToPipeableStream` 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>
|
||||
|
||||
<Intro>
|
||||
|
||||
`resumeToPipeableStream` streams a pre-rendered React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html)
|
||||
|
||||
@@ -64,7 +64,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
|
||||
`prerender` returns a Promise:
|
||||
- If rendering the is successful, the Promise will resolve to an object containing:
|
||||
- `prelude`: a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
|
||||
- `postponed` <CanaryBadge />: a JSON-serializeable, opaque object that can be passed to [`resume`](/reference/react-dom/server/resume) if `prerender` did not finish. Otherwise `null` indicating that the `prelude` contains all the content and no resume is necessary.
|
||||
- `postponed`: a JSON-serializeable, opaque object that can be passed to [`resume`](/reference/react-dom/server/resume) if `prerender` did not finish. Otherwise `null` indicating that the `prelude` contains all the content and no resume is necessary.
|
||||
- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)
|
||||
|
||||
#### Caveats {/*caveats*/}
|
||||
@@ -313,7 +313,7 @@ async function renderToString() {
|
||||
|
||||
Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state.
|
||||
|
||||
<CanaryBadge /> This can be used for partial prerendering together with [`resume`](/reference/react-dom/server/resume) or [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender).
|
||||
This can be used for partial prerendering together with [`resume`](/reference/react-dom/server/resume) or [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender).
|
||||
|
||||
## Troubleshooting {/*troubleshooting*/}
|
||||
|
||||
|
||||
@@ -65,7 +65,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
|
||||
`prerenderToNodeStream` returns a Promise:
|
||||
- If rendering the is successful, the Promise will resolve to an object containing:
|
||||
- `prelude`: a [Node.js Stream.](https://nodejs.org/api/stream.html) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
|
||||
- `postponed` <CanaryBadge />: a JSON-serializeable, opaque object that can be passed to [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) if `prerenderToNodeStream` did not finish. Otherwise `null` indicating that the `prelude` contains all the content and no resume is necessary.
|
||||
- `postponed`: a JSON-serializeable, opaque object that can be passed to [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) if `prerenderToNodeStream` did not finish. Otherwise `null` indicating that the `prelude` contains all the content and no resume is necessary.
|
||||
- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell)
|
||||
|
||||
#### Caveats {/*caveats*/}
|
||||
@@ -314,7 +314,7 @@ async function renderToString() {
|
||||
|
||||
Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state.
|
||||
|
||||
<CanaryBadge /> This can be used for partial prerendering together with [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) or [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream).
|
||||
This can be used for partial prerendering together with [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) or [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream).
|
||||
|
||||
## Troubleshooting {/*troubleshooting*/}
|
||||
|
||||
|
||||
@@ -1,16 +1,7 @@
|
||||
---
|
||||
title: resumeAndPrerender
|
||||
version: canary
|
||||
---
|
||||
|
||||
<Canary>
|
||||
|
||||
**The `resume` 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>
|
||||
|
||||
<Intro>
|
||||
|
||||
`resumeAndPrerender` continues a prerendered React tree to a static HTML string using a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API).
|
||||
|
||||
@@ -1,16 +1,7 @@
|
||||
---
|
||||
title: resumeAndPrerenderToNodeStream
|
||||
version: canary
|
||||
---
|
||||
|
||||
<Canary>
|
||||
|
||||
**The `resumeAndPrerenderToNodeStream` API is currently only available in React’s Experimental channels.**
|
||||
|
||||
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
|
||||
|
||||
</Canary>
|
||||
|
||||
<Intro>
|
||||
|
||||
`resumeAndPrerenderToNodeStream` continues a prerendered React tree to a static HTML string using a a [Node.js Stream.](https://nodejs.org/api/stream.html).
|
||||
|
||||
@@ -1,16 +1,7 @@
|
||||
---
|
||||
title: <Activity>
|
||||
version: canary
|
||||
---
|
||||
|
||||
<Canary>
|
||||
|
||||
**The `<Activity />` 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>
|
||||
|
||||
<Intro>
|
||||
|
||||
`<Activity>` lets you hide and restore the UI and internal state of its children.
|
||||
@@ -215,7 +206,7 @@ and check out the new behavior:
|
||||
<Sandpack>
|
||||
|
||||
```js src/App.js active
|
||||
import { unstable_Activity as Activity, useState } from 'react';
|
||||
import { Activity, useState } from 'react';
|
||||
import Sidebar from './Sidebar.js';
|
||||
|
||||
export default function App() {
|
||||
@@ -434,7 +425,7 @@ If we switch to using an Activity boundary to show and hide the active tab, we c
|
||||
<Sandpack>
|
||||
|
||||
```js src/App.js active
|
||||
import { useState, unstable_Activity as Activity } from 'react';
|
||||
import { useState, Activity } from 'react';
|
||||
import TabButton from './TabButton.js';
|
||||
import Home from './Home.js';
|
||||
import Contact from './Contact.js';
|
||||
@@ -712,7 +703,7 @@ Try clicking the Posts tab now:
|
||||
<Sandpack>
|
||||
|
||||
```js src/App.js
|
||||
import { useState, Suspense, unstable_Activity as Activity } from 'react';
|
||||
import { useState, Suspense, Activity } from 'react';
|
||||
import TabButton from './TabButton.js';
|
||||
import Home from './Home.js';
|
||||
import Posts from './Posts.js';
|
||||
@@ -1136,7 +1127,7 @@ Let's update `App` to hide the inactive tab with a hidden Activity boundary inst
|
||||
<Sandpack>
|
||||
|
||||
```js src/App.js active
|
||||
import { useState, unstable_Activity as Activity } from 'react';
|
||||
import { useState, Activity } from 'react';
|
||||
import TabButton from './TabButton.js';
|
||||
import Home from './Home.js';
|
||||
import Video from './Video.js';
|
||||
@@ -1270,7 +1261,7 @@ Let's see the new behavior. Try playing the video, switching to the Home tab, th
|
||||
<Sandpack>
|
||||
|
||||
```js src/App.js active
|
||||
import { useState, unstable_Activity as Activity } from 'react';
|
||||
import { useState, Activity } from 'react';
|
||||
import TabButton from './TabButton.js';
|
||||
import Home from './Home.js';
|
||||
import Video from './Video.js';
|
||||
|
||||
@@ -2,23 +2,15 @@
|
||||
title: cacheSignal
|
||||
---
|
||||
|
||||
<Canary>
|
||||
|
||||
**The `cacheSignal()` 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>
|
||||
|
||||
<RSC>
|
||||
|
||||
`cacheSignal` is currently only used with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components).
|
||||
`cacheSignal` is currently only used with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components).
|
||||
|
||||
</RSC>
|
||||
|
||||
<Intro>
|
||||
|
||||
`cacheSignal` allows you to know when the `cache()` life time is over.
|
||||
`cacheSignal` allows you to know when the `cache()` lifetime is over.
|
||||
|
||||
```js
|
||||
const signal = cacheSignal();
|
||||
@@ -45,7 +37,7 @@ async function Component() {
|
||||
|
||||
When React has finished rendering, the `AbortSignal` will be aborted. This allows you to cancel any in-flight work that is no longer needed.
|
||||
Rendering is considered finished when:
|
||||
- React has successfully completed rendering
|
||||
- React has successfully completed rendering
|
||||
- the render was aborted
|
||||
- the render has failed
|
||||
|
||||
@@ -118,4 +110,4 @@ async function Component({id}) {
|
||||
}
|
||||
return <div>{data.name}</div>;
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
@@ -1691,14 +1691,6 @@ Now that you define the `createOptions` function inside the Effect, the Effect i
|
||||
|
||||
### Reading the latest props and state from an Effect {/*reading-the-latest-props-and-state-from-an-effect*/}
|
||||
|
||||
<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>
|
||||
|
||||
By default, when you read a reactive value from an Effect, you have to add it as a dependency. This ensures that your Effect "reacts" to every change of that value. For most dependencies, that's the behavior you want.
|
||||
|
||||
**However, sometimes you'll want to read the *latest* props and state from an Effect without "reacting" to them.** For example, imagine you want to log the number of the items in the shopping cart for every page visit:
|
||||
@@ -1712,7 +1704,7 @@ function Page({ url, shoppingCart }) {
|
||||
}
|
||||
```
|
||||
|
||||
<CanaryBadge /> **What if you want to log a new page visit after every `url` change, but *not* if only the `shoppingCart` changes?** You can't exclude `shoppingCart` from dependencies without breaking the [reactivity rules.](#specifying-reactive-dependencies) However, you can express that you *don't want* a piece of code to "react" to changes even though it is called from inside an Effect. [Declare an *Effect Event*](/learn/separating-events-from-effects#declaring-an-effect-event) with the [`useEffectEvent`](/reference/react/useEffectEvent) Hook, and move the code reading `shoppingCart` inside of it:
|
||||
**What if you want to log a new page visit after every `url` change, but *not* if only the `shoppingCart` changes?** You can't exclude `shoppingCart` from dependencies without breaking the [reactivity rules.](#specifying-reactive-dependencies) However, you can express that you *don't want* a piece of code to "react" to changes even though it is called from inside an Effect. [Declare an *Effect Event*](/learn/separating-events-from-effects#declaring-an-effect-event) with the [`useEffectEvent`](/reference/react/useEffectEvent) Hook, and move the code reading `shoppingCart` inside of it:
|
||||
|
||||
```js {2-4,7,8}
|
||||
function Page({ url, shoppingCart }) {
|
||||
|
||||
@@ -1,17 +1,7 @@
|
||||
---
|
||||
title: useEffectEvent
|
||||
version: canary
|
||||
---
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<Intro>
|
||||
|
||||
`useEffectEvent` is a React Hook that lets you extract non-reactive logic from your Effects into a reusable function called an [Effect Event](/learn/separating-events-from-effects#declaring-an-effect-event).
|
||||
|
||||
@@ -40,8 +40,7 @@
|
||||
},
|
||||
{
|
||||
"title": "useEffectEvent",
|
||||
"path": "/reference/react/useEffectEvent",
|
||||
"version": "canary"
|
||||
"path": "/reference/react/useEffectEvent"
|
||||
},
|
||||
{
|
||||
"title": "useId",
|
||||
@@ -111,8 +110,7 @@
|
||||
},
|
||||
{
|
||||
"title": "<Activity>",
|
||||
"path": "/reference/react/Activity",
|
||||
"version": "canary"
|
||||
"path": "/reference/react/Activity"
|
||||
},
|
||||
{
|
||||
"title": "<ViewTransition>",
|
||||
@@ -135,8 +133,7 @@
|
||||
},
|
||||
{
|
||||
"title": "cacheSignal",
|
||||
"path": "/reference/react/cacheSignal",
|
||||
"version": "canary"
|
||||
"path": "/reference/react/cacheSignal"
|
||||
},
|
||||
{
|
||||
"title": "captureOwnerStack",
|
||||
@@ -321,13 +318,11 @@
|
||||
},
|
||||
{
|
||||
"title": "resume",
|
||||
"path": "/reference/react-dom/server/resume",
|
||||
"version": "canary"
|
||||
"path": "/reference/react-dom/server/resume"
|
||||
},
|
||||
{
|
||||
"title": "resumeToPipeableStream",
|
||||
"path": "/reference/react-dom/server/resumeToPipeableStream",
|
||||
"version": "canary"
|
||||
"path": "/reference/react-dom/server/resumeToPipeableStream"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -345,13 +340,11 @@
|
||||
},
|
||||
{
|
||||
"title": "resumeAndPrerender",
|
||||
"path": "/reference/react-dom/static/resumeAndPrerender",
|
||||
"version": "canary"
|
||||
"path": "/reference/react-dom/static/resumeAndPrerender"
|
||||
},
|
||||
{
|
||||
"title": "resumeAndPrerenderToNodeStream",
|
||||
"path": "/reference/react-dom/static/resumeAndPrerenderToNodeStream",
|
||||
"version": "canary"
|
||||
"path": "/reference/react-dom/static/resumeAndPrerenderToNodeStream"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -405,11 +398,11 @@
|
||||
},
|
||||
{
|
||||
"hasSectionHeader": true,
|
||||
"sectionHeader": "Developer tooling"
|
||||
"sectionHeader": "React DevTools"
|
||||
},
|
||||
{
|
||||
"title": "React Performance tracks",
|
||||
"path": "/reference/developer-tooling/react-performance-tracks"
|
||||
"path": "/reference/dev-tools/react-performance-tracks"
|
||||
},
|
||||
{
|
||||
"hasSectionHeader": true,
|
||||
|
||||
Reference in New Issue
Block a user