diff --git a/public/images/docs/diagrams/19_2_batching_after.dark.png b/public/images/docs/diagrams/19_2_batching_after.dark.png new file mode 100644 index 00000000000..29ff140939b Binary files /dev/null and b/public/images/docs/diagrams/19_2_batching_after.dark.png differ diff --git a/public/images/docs/diagrams/19_2_batching_after.png b/public/images/docs/diagrams/19_2_batching_after.png new file mode 100644 index 00000000000..0ae652f7928 Binary files /dev/null and b/public/images/docs/diagrams/19_2_batching_after.png differ diff --git a/public/images/docs/diagrams/19_2_batching_before.dark.png b/public/images/docs/diagrams/19_2_batching_before.dark.png new file mode 100644 index 00000000000..758afceb150 Binary files /dev/null and b/public/images/docs/diagrams/19_2_batching_before.dark.png differ diff --git a/public/images/docs/diagrams/19_2_batching_before.png b/public/images/docs/diagrams/19_2_batching_before.png new file mode 100644 index 00000000000..7e260135f0f Binary files /dev/null and b/public/images/docs/diagrams/19_2_batching_before.png differ diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md index 5d2c59b7615..6d3faa6ce34 100644 --- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md +++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md @@ -18,11 +18,9 @@ In React Labs posts, we write about projects in active research and development. -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). @@ -11544,7 +11542,7 @@ Try searching for a video, selecting it, and clicking "back": ```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 ```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(); diff --git a/src/content/blog/2025/10/01/react-19-2.md b/src/content/blog/2025/10/01/react-19-2.md new file mode 100644 index 00000000000..1162e055521 --- /dev/null +++ b/src/content/blog/2025/10/01/react-19-2.md @@ -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) + +--- + + + +React 19.2 is now available on npm! + + + +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. + + + +--- + +## New React Features {/*new-react-features*/} + +### `` {/*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 && } + +// After + + + +``` + +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. + + + +#### 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). + + + +--- + +### `cacheSignal` {/*cache-signal*/} + + + +`cacheSignal` is only for use with [React Server Components](/reference/rsc/server-components). + + + +`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: + +
+ + + + + + + + +
+ +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(, { + 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(, 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(, 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. + + + +Previously, during streaming server-side rendering, suspense content would immediately replace fallbacks. + + + + + +In React 19.2, suspense boundaries are batched for a small amount of time, to allow revealing more content together. + + + +This fix also prepares apps for supporting `` 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. + + + +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. + + + +--- + +### 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. + + + + +#### 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. + + + +--- + +### `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._ diff --git a/src/content/blog/index.md b/src/content/blog/index.md index a7a89763419..0477bb0ccff 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -12,6 +12,12 @@ You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account
+ + +React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. In this post ... + + + In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and sharing other areas we're working on now ... diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index fb98a0cd148..088d1e00ab4 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -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*/} - - -**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) - - - Suppose that you want to play a sound when the user receives a new message unless `isMuted` is `true`: ```js {3,10-12} diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index 2038e59e16c..2b166b473c6 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -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*/} - - -**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) - - - 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} diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md index 2a19e0f13a1..d7110222a38 100644 --- a/src/content/learn/separating-events-from-effects.md +++ b/src/content/learn/separating-events-from-effects.md @@ -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*/} - - -**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) - - - 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*/} - - -**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) - - - 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*/} - - -**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) - - - Effect Events are very limited in how you can use them: * **Only call them from inside Effects.** diff --git a/src/content/reference/developer-tooling/react-performance-tracks.md b/src/content/reference/dev-tools/react-performance-tracks.md similarity index 96% rename from src/content/reference/developer-tooling/react-performance-tracks.md rename to src/content/reference/dev-tools/react-performance-tracks.md index e663f1471a5..4f613f802f3 100644 --- a/src/content/reference/developer-tooling/react-performance-tracks.md +++ b/src/content/reference/dev-tools/react-performance-tracks.md @@ -1,16 +1,7 @@ --- title: React Performance tracks -version: 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) - - - 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. diff --git a/src/content/reference/eslint-plugin-react-hooks/index.md b/src/content/reference/eslint-plugin-react-hooks/index.md index 21e1222d803..34dbdc632c9 100644 --- a/src/content/reference/eslint-plugin-react-hooks/index.md +++ b/src/content/reference/eslint-plugin-react-hooks/index.md @@ -9,14 +9,6 @@ version: 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). - - - 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. @@ -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. -## 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 diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md index 44d23d758f1..49d6b6d43da 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/component-hook-factories.md @@ -1,6 +1,5 @@ --- title: component-hook-factories -version: rc --- @@ -9,13 +8,11 @@ Validates against higher order functions defining nested components or hooks. Co - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/config.md b/src/content/reference/eslint-plugin-react-hooks/lints/config.md index f7e099752b5..98bc8b27855 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/config.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/config.md @@ -9,13 +9,11 @@ Validates the compiler [configuration options](/reference/react-compiler/configu - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md index bd013f5325e..c9430ea36b2 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/error-boundaries.md @@ -9,13 +9,11 @@ Validates usage of Error Boundaries instead of try/catch for errors in child com - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/gating.md b/src/content/reference/eslint-plugin-react-hooks/lints/gating.md index fdbbadf0efc..62b98df0898 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/gating.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/gating.md @@ -9,13 +9,11 @@ Validates configuration of [gating mode](/reference/react-compiler/gating). - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/globals.md b/src/content/reference/eslint-plugin-react-hooks/lints/globals.md index b9a20d4dbc7..ea429404a86 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/globals.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/globals.md @@ -9,13 +9,11 @@ Validates against assignment/mutation of globals during render, part of ensuring - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md b/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md index 9376271ebd9..33498ebe8c7 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/immutability.md @@ -9,13 +9,11 @@ Validates against mutating props, state, and other values that [are immutable](/ - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md index aa587750328..b041d02c5a5 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/incompatible-library.md @@ -9,13 +9,11 @@ Validates against usage of libraries which are incompatible with memoization (ma - - -This rule is available in the RC version of `eslint-plugin-react-hooks`. + -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. - + diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md b/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md index 2f296ac56b1..5efc2f82d7a 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/preserve-manual-memoization.md @@ -9,13 +9,11 @@ Validates that existing manual memoization is preserved by the compiler. React C - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/purity.md b/src/content/reference/eslint-plugin-react-hooks/lints/purity.md index 14c870fb53b..74c1327597a 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/purity.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/purity.md @@ -9,13 +9,11 @@ Validates that [components/hooks are pure](/reference/rules/components-and-hooks - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/refs.md b/src/content/reference/eslint-plugin-react-hooks/lints/refs.md index 78776ba5724..d8fe222e825 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/refs.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/refs.md @@ -9,13 +9,11 @@ Validates correct usage of refs, not reading/writing during render. See the "pit - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md index df285fedfe8..55b63b3116a 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-effect.md @@ -9,13 +9,11 @@ Validates against calling setState synchronously in an effect, which can lead to - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md index d5bd4f82abf..a88de100663 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md @@ -9,13 +9,11 @@ Validates against unconditionally setting state during render, which can trigger - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md index 06945838f38..b403cc0b6af 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/static-components.md @@ -9,13 +9,11 @@ Validates that components are static, not recreated every render. Components tha - - -This rule is available in the RC version of `eslint-plugin-react-hooks`. + -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. - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md b/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md index 3f3e04d53ad..b6055449a1d 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/unsupported-syntax.md @@ -9,13 +9,11 @@ Validates against syntax that React Compiler does not support. If you need to, y - - -This rule is available in the RC version of `eslint-plugin-react-hooks`. + -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. - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md index d19206d3c99..faa8c42d12b 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md @@ -9,13 +9,11 @@ Validates that the `useMemo` hook is used with a return value. See [`useMemo` do - + -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). - - + ## Rule Details {/*rule-details*/} diff --git a/src/content/reference/react-dom/server/resume.md b/src/content/reference/react-dom/server/resume.md index 836b46c0572..eaa106f7bb1 100644 --- a/src/content/reference/react-dom/server/resume.md +++ b/src/content/reference/react-dom/server/resume.md @@ -1,16 +1,7 @@ --- title: resume -canary: true --- - - -**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) - - - `resume` streams a pre-rendered React tree to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) diff --git a/src/content/reference/react-dom/server/resumeToPipeableStream.md b/src/content/reference/react-dom/server/resumeToPipeableStream.md index cf597e55994..48caa3be64e 100644 --- a/src/content/reference/react-dom/server/resumeToPipeableStream.md +++ b/src/content/reference/react-dom/server/resumeToPipeableStream.md @@ -1,16 +1,7 @@ --- title: resumeToPipeableStream -canary: true --- - - -**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) - - - `resumeToPipeableStream` streams a pre-rendered React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index c788ad841c9..f03d96f69d3 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -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` : 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. - 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*/} diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index 411c4eb1b6a..10c0fa21bb0 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -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` : 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. - 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*/} diff --git a/src/content/reference/react-dom/static/resumeAndPrerender.md b/src/content/reference/react-dom/static/resumeAndPrerender.md index 95e9474f02e..10b240dd916 100644 --- a/src/content/reference/react-dom/static/resumeAndPrerender.md +++ b/src/content/reference/react-dom/static/resumeAndPrerender.md @@ -1,16 +1,7 @@ --- title: resumeAndPrerender -version: 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) - - - `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). diff --git a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md index 559ad8e02ff..4ce3c473653 100644 --- a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md @@ -1,16 +1,7 @@ --- title: resumeAndPrerenderToNodeStream -version: 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) - - - `resumeAndPrerenderToNodeStream` continues a prerendered React tree to a static HTML string using a a [Node.js Stream.](https://nodejs.org/api/stream.html). diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index c7d513afc32..dad6587b3eb 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -1,16 +1,7 @@ --- title: -version: canary --- - - -**The `` 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) - - - `` lets you hide and restore the UI and internal state of its children. @@ -215,7 +206,7 @@ and check out the new behavior: ```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 ```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: ```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 ```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 ```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'; diff --git a/src/content/reference/react/cacheSignal.md b/src/content/reference/react/cacheSignal.md index 31b6a34a15b..c898ca53b1d 100644 --- a/src/content/reference/react/cacheSignal.md +++ b/src/content/reference/react/cacheSignal.md @@ -2,23 +2,15 @@ title: cacheSignal --- - - -**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) - - - -`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). -`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
{data.name}
; } -``` \ No newline at end of file +``` diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index 7ead26dffbd..413e3ebc46e 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -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*/} - - -**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) - - - 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 }) { } ``` - **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 }) { diff --git a/src/content/reference/react/useEffectEvent.md b/src/content/reference/react/useEffectEvent.md index 8792f7ffb4a..a84ffeed5aa 100644 --- a/src/content/reference/react/useEffectEvent.md +++ b/src/content/reference/react/useEffectEvent.md @@ -1,17 +1,7 @@ --- title: useEffectEvent -version: 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) - - - `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). diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 8ce57f79379..44f1554ecbe 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -40,8 +40,7 @@ }, { "title": "useEffectEvent", - "path": "/reference/react/useEffectEvent", - "version": "canary" + "path": "/reference/react/useEffectEvent" }, { "title": "useId", @@ -111,8 +110,7 @@ }, { "title": "", - "path": "/reference/react/Activity", - "version": "canary" + "path": "/reference/react/Activity" }, { "title": "", @@ -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,