Skip to content

Commit c3d7560

Browse files
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>
1 parent dc86f88 commit c3d7560

38 files changed

+424
-245
lines changed
41.5 KB
Loading
41.8 KB
Loading
42.2 KB
Loading
42.5 KB
Loading

src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,9 @@ In React Labs posts, we write about projects in active research and development.
1818

1919
<Note>
2020

21-
React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!
21+
React Conf 2025 is scheduled for October 7–8 in Henderson, Nevada!
2222

23-
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).
24-
25-
For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev).
23+
Watch the livestream on [the React Conf website](https://conf.react.dev).
2624

2725
</Note>
2826

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

1154611544
```js src/App.js
11547-
import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";
11545+
import { unstable_ViewTransition as ViewTransition, Activity } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";
1154811546

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

1288312881
```js src/App.js
12884-
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'
12882+
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'
1288512883

1288612884
export default function App() {
1288712885
const { url } = useRouter();

src/content/blog/2025/10/01/react-19-2.md

Lines changed: 339 additions & 0 deletions
Large diffs are not rendered by default.

src/content/blog/index.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account
1212

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

15+
<BlogCard title="React 19.2" date="October 1, 2025" url="/blog/2025/10/01/react-19-2">
16+
17+
React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. In this post ...
18+
19+
</BlogCard>
20+
1521
<BlogCard title="React Labs: View Transitions, Activity, and more" date="April 23, 2025" url="/blog/2025/04/23/react-labs-view-transitions-activity-and-more">
1622

1723
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 ...

src/content/learn/removing-effect-dependencies.md

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -609,14 +609,6 @@ function ChatRoom({ roomId }) {
609609
610610
### Do you want to read a value without "reacting" to its changes? {/*do-you-want-to-read-a-value-without-reacting-to-its-changes*/}
611611
612-
<Canary>
613-
614-
**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
615-
616-
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
617-
618-
</Canary>
619-
620612
Suppose that you want to play a sound when the user receives a new message unless `isMuted` is `true`:
621613
622614
```js {3,10-12}

src/content/learn/reusing-logic-with-custom-hooks.md

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -837,14 +837,6 @@ Every time your `ChatRoom` component re-renders, it passes the latest `roomId` a
837837
838838
### Passing event handlers to custom Hooks {/*passing-event-handlers-to-custom-hooks*/}
839839
840-
<Canary>
841-
842-
**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
843-
844-
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
845-
846-
</Canary>
847-
848840
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:
849841
850842
```js {9-11}

src/content/learn/separating-events-from-effects.md

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -400,14 +400,6 @@ You need a way to separate this non-reactive logic from the reactive Effect arou
400400
401401
### Declaring an Effect Event {/*declaring-an-effect-event*/}
402402
403-
<Canary>
404-
405-
**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
406-
407-
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
408-
409-
</Canary>
410-
411403
Use a special Hook called [`useEffectEvent`](/reference/react/useEffectEvent) to extract this non-reactive logic out of your Effect:
412404
413405
```js {1,4-6}
@@ -580,14 +572,6 @@ You can think of Effect Events as being very similar to event handlers. The main
580572
581573
### Reading latest props and state with Effect Events {/*reading-latest-props-and-state-with-effect-events*/}
582574
583-
<Canary>
584-
585-
**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
586-
587-
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
588-
589-
</Canary>
590-
591575
Effect Events let you fix many patterns where you might be tempted to suppress the dependency linter.
592576
593577
For example, say you have an Effect to log the page visits:
@@ -729,7 +713,7 @@ function Page({ url }) {
729713
}
730714
```
731715
732-
After `useEffectEvent` becomes a stable part of React, we recommend **never suppressing the linter**.
716+
We recommend **never suppressing the linter**.
733717
734718
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.
735719
@@ -882,14 +866,6 @@ Read [Removing Effect Dependencies](/learn/removing-effect-dependencies) for oth
882866
883867
### Limitations of Effect Events {/*limitations-of-effect-events*/}
884868
885-
<Canary>
886-
887-
**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
888-
889-
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
890-
891-
</Canary>
892-
893869
Effect Events are very limited in how you can use them:
894870
895871
* **Only call them from inside Effects.**

0 commit comments

Comments
 (0)