feedback and rm canary stuff

rickhanlonii · rickhanlonii · commit 3c0296f83a1c · 2025-10-01T10:13:04.000-04:00
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
@@ -11542,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();
@@ -12879,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();
diff --git a/src/content/blog/2025/09/30/react-19-2.md b/src/content/blog/2025/09/30/react-19-2.md
@@ -15,20 +15,11 @@ 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.
 
-<Note>
-
-React Conf 2025 is October 7–8 in Henderson, Nevada! 
+<InlineToc />
 
-Watch the livestream on [the React Conf website](https://conf.react.dev).
-
-</Note>
 
-React 19.2 is our third release in the last year, following React 19 in December and React 19.1 in June. 
-
-This release continues to build on the scheduling capabilities of concurrent rendering with Activity, adds performance tracks to help optimize your code for concurrent rendering, and new APIs to improve the developer experience. 
-
-In this post, we'll give an overview of the new features in React 19.2, and how you can adopt them.
 
 ---
 
@@ -38,19 +29,30 @@ In this post, we'll give an overview of the new features in React 19.2, and how
 
 `<Activity>` lets you break your app into "activities" that can be controlled and prioritized.
 
-In React 19.2, Activity supports two modes: `visible` and `hidden`:
+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>
 ```
 
-When an Activity is `visible` it’s rendered as normal on the client, and will defer hydration during SSR. When an Activity is `hidden` it is unmounted (adding `display:none` to the children) and is excluded from the SSR output. While an Activity is hidden, React will keep the hook and DOM state, and continue to render at a lower priority than anything visible on screen.
-  
-You can use Activity to pre-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, and allows back navigations to maintain state such as input fields.
+In React 19.2, Activity supports two modes: `visible` and `hidden`.
 
-For more information, see the last [React Labs post](/blog/2025/04/23/react-labs-view-transitions-activity-and-more#activity) and the [Activity docs](/reference/react/activity).
+- `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).
 
 ---
 
@@ -76,29 +78,28 @@ For more information, see the [React Performance Tracks docs](/learn/react-perfo
 
 ### `useEffectEvent` {/*use-effect-event*/}
 
-When using Effects you may want to read the most recent props or state inside an Effect without causing the Effect to re-run when those values change. 
+When using Effects you may want to read the most recent props or state inside an Effect without re-running the Effect when those values change. For example, in the following code the `theme` prop is used inside an Effect, but we don’t want the Effect to re-run when `theme` changes:
 
-The typical workaround is to use a ref to store the latest `theme`, and read from that ref inside the Effect. This works, but it’s verbose and requires extra code, so in practice most users just disable the lint rule and leave the dependency out.
-
-Disabling the lint rule creates a refactor hazard, because the linter cannot help you if you later add a dependency that should be included. Here, `threadId` is added after the initial implementation, but the Effect does not re-run when `threadId` changes because it was not added to the dependency array:
-
-```js {1,3,12}
-function ChatRoom({ roomId, theme, threadId }) {
+```js {5,11}
+function ChatRoom({ roomId, theme }) {
   useEffect(() => {
-    const connection = createConnection(serverUrl, roomId + threadId);
+    const connection = createConnection(serverUrl, roomId);
     connection.on('connected', () => {
       showNotification('Connected!', theme);
     });
     connection.connect();
     return () => {
       connection.disconnect()
     };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [roomId]); // 🚩 threadId is missing!
+  }, [roomId, theme]);
   // ...
 ```
 
-To solve this problem, React 19.2 introduces `useEffectEvent`, which lets you declare Effect Events that can be called inside Effects. Effect Events always access the latest values from props and state when they are invoked, so you can read the latest values without re-running the Effect.
+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.
+
+React 19.2 introduces `useEffectEvent`, which lets you declare "Effect Events" that can be called inside Effects. Effect Events always access the latest values from props and state when they are invoked, so you can read the latest values without re-running the Effect:
+
+With `useEffectEvent`, we can define the `onConnected` callback as an "Effect Event". Now, it doesn't re-run when the values change, but it can still “see” the latest values of your props and state:
 
 ```js {2,3,4,9}
 function ChatRoom({ roomId, theme, threadId }) {
@@ -117,6 +118,17 @@ function ChatRoom({ roomId, theme, threadId }) {
   // ...
 ```
 
+<Note>
+
+#### Please don't over use `useEffectEvent` {/*please-dont-over-use-useeffectevent*/}
+
+We introduced `useEffectEvent` as an experimental API several years ago, and you may be curious why it took so long to ship. We've considered multiple alternatives, but all of them have different tradeoffs that can make it too easy to accidentally out of reactivity, especially if it is overused.  
+
+We're shipping `useEffectEvent` because it helps solve a common problem, but we recommend using it sparingly. In the future we may explore other APIs that can solve the same problem better.
+
+</Note>
+
+
 For more information, see [Separating Events from Effects](/learn/separating-events-from-effects) and the [`useEffectEvent` docs](/reference/react/useEffectEvent).
 
 ---
@@ -154,7 +166,7 @@ For more info, see the [`cacheSignal` docs](/reference/react/cacheSignal).
 
 ### Batching Suspense Boundaries for SSR {/*batching-suspense-boundaries-for-ssr*/}
 
-We fixed a long-standing behavior bug where Suspense boundaries would reveal differently depending on if they were rendered on the client or when streaming from server-side rendering. 
+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.
 
@@ -170,7 +182,7 @@ In React 19.2, suspense boundaries are batched for a small amount of time, to al
 
 </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 streams in close together.
+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>
 
@@ -190,7 +202,14 @@ React 19.2 adds support for Web Streams for streaming SSR in Node.js:
 
 <Pitfall>
 
-We still highly recommend using Node Streams for streaming server-side rendering in Node environments because Node Streams are much faster than Web Streams, and Web Streams do not support compression by default, leading to users accidentally missing the benefits of streaming.
+#### 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)
+- [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream)
+
+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>
 
@@ -218,10 +237,10 @@ Notable bug fixes
 - `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 (@hi-ogawa [#33941](https://github.com/facebook/react/pull/33941)
-- `react-dom`: Stop warning when ARIA 1.3 attributes are used (@Abdul-Omira [#34264](https://github.com/facebook/react/pull/34264)
+- `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 (@gnoff [#34192)]()
+- `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).
 
diff --git 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*/}
 
-<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}
diff --git 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*/}
 
-<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}
diff --git 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*/}
 
-<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:
@@ -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.**
diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md
@@ -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';
diff --git 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*/}
 
-<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 }) {
diff --git a/src/content/reference/react/useEffectEvent.md b/src/content/reference/react/useEffectEvent.md
@@ -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).
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
@@ -41,7 +41,6 @@
         {
           "title": "useEffectEvent",
           "path": "/reference/react/useEffectEvent",
-          "version": "canary"
         },
         {
           "title": "useId",
@@ -112,7 +111,6 @@
         {
           "title": "<Activity>",
           "path": "/reference/react/Activity",
-          "version": "canary"
         },
         {
           "title": "<ViewTransition>",

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,6 @@`
`41`	`41`	`{`
`42`	`42`	`"title": "useEffectEvent",`
`43`	`43`	`"path": "/reference/react/useEffectEvent",`
`44`		`- "version": "canary"`
`45`	`44`	`},`
`46`	`45`	`{`
`47`	`46`	`"title": "useId",`
`@@ -112,7 +111,6 @@`
`112`	`111`	`{`
`113`	`112`	`"title": "<Activity>",`
`114`	`113`	`"path": "/reference/react/Activity",`
`115`		`- "version": "canary"`
`116`	`114`	`},`
`117`	`115`	`{`
`118`	`116`	`"title": "<ViewTransition>",`