mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-27 03:08:06 +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
@@ -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).
|
||||
|
||||
Reference in New Issue
Block a user