From 4d3d4959190d8377444c77957af895df624a63ec Mon Sep 17 00:00:00 2001 From: Ricky Date: Tue, 9 Sep 2025 11:57:29 -0400 Subject: [PATCH 1/3] Add React Conf 2024 to /videos (#7977) --- src/content/community/videos.md | 83 ++++++++++++++++++++++++++++++--- 1 file changed, 76 insertions(+), 7 deletions(-) diff --git a/src/content/community/videos.md b/src/content/community/videos.md index 3fad95786..1fca60307 100644 --- a/src/content/community/videos.md +++ b/src/content/community/videos.md @@ -8,6 +8,75 @@ Videos dedicated to the discussion of React and the React ecosystem. +## React Conf 2024 {/*react-conf-2024*/} + +At React Conf 2024, Meta CTO [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) shared a welcome message to kick off the conference: + + + +### React 19 Keynote {/*react-19-keynote*/} + +In the Day 1 keynote, we shared vision for React starting with React 19 and the React Compiler. Watch the full keynote from [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Andrew Clark](https://twitter.com/acdlite), [Josh Story](https://twitter.com/joshcstory), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei): + + + + +### React Unpacked: A Roadmap to React 19 {/*react-unpacked-a-roadmap-to-react-19*/} + +React 19 introduced new features including Actions, `use()`, `useOptimistic` and more. For a deep dive on using new features in React 19, see [Sam Selikoff's](https://twitter.com/samselikoff) talk: + + + +### What's New in React 19 {/*whats-new-in-react-19*/} + +[Lydia Hallie](https://twitter.com/lydiahallie) gave a visual deep dive of React 19's new features: + + + +### React 19 Deep Dive: Coordinating HTML {/*react-19-deep-dive-coordinating-html*/} + +[Josh Story](https://twitter.com/joshcstory) provided a deep dive on the document and resource streaming APIs in React 19: + + + +### React for Two Computers {/*react-for-two-computers*/} + +[Dan Abramov](https://bsky.app/profile/danabra.mov) imagined an alternate history where React started server-first: + + + +### Forget About Memo {/*forget-about-memo*/} + +[Lauren Tan](https://twitter.com/potetotes) gave a talk on using the React Compiler in practice: + + + +### React Compiler Deep Dive {/*react-compiler-deep-dive*/} + +[Sathya Gunasekaran](https://twitter.com/_gsathya) and [Mofei Zhang](https://twitter.com/zmofei) provided a deep dive on how the React Compiler works: + + + +### And more... {/*and-more-2024*/} + +**We also heard talks from the community on Server Components:** +* [Enhancing Forms with React Server Components](https://www.youtube.com/embed/0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff) +* [And Now You Understand React Server Components](https://www.youtube.com/embed/pOo7x8OiAec) by [Kent C. Dodds](https://twitter.com/kentcdodds) +* [Real-time Server Components](https://www.youtube.com/embed/6sMANTHWtLM) by [Sunil Pai](https://twitter.com/threepointone) + +**Talks from React frameworks using new features:** + +* [Vanilla React](https://www.youtube.com/embed/ZcwA0xt8FlQ) by [Ryan Florence](https://twitter.com/ryanflorence) +* [React Rhythm & Blues](https://www.youtube.com/embed/rs9X5MjvC4s) by [Lee Robinson](https://twitter.com/leeerob) +* [RedwoodJS, now with React Server Components](https://www.youtube.com/embed/sjyY4MTECUU) by [Amy Dutton](https://twitter.com/selfteachme) +* [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/embed/djhEgxQf3Kw) by [Evan Bacon](https://twitter.com/Baconbrix) + +**And Q&As with the React and React Native teams:** +- [React Q&A](https://www.youtube.com/embed/T8TZQ6k4SLE&t=27518s) hosted by [Michael Chan](https://twitter.com/chantastic) +- [React Native Q&A](https://www.youtube.com/embed/0ckOUBiuxVY&t=27935s) hosted by [Jamon Holmgren](https://twitter.com/jamonholmgren) + +You can watch all of the talks at React Conf 2024 at [conf2024.react.dev](https://conf2024.react.dev/talks). + ## React Conf 2021 {/*react-conf-2021*/} ### React 18 Keynote {/*react-18-keynote*/} @@ -16,13 +85,13 @@ In the keynote, we shared our vision for the future of React starting with React Watch the full keynote from [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), and [Rick Hanlon](https://twitter.com/rickhanlonii) here: - + ### React 18 for Application Developers {/*react-18-for-application-developers*/} For a demo of upgrading to React 18, see [Shruti Kapoor](https://twitter.com/shrutikapoor08)’s talk here: - + ### Streaming Server Rendering with Suspense {/*streaming-server-rendering-with-suspense*/} @@ -32,7 +101,7 @@ Streaming server rendering lets you generate HTML from React components on the s For a deep dive, see [Shaundai Person](https://twitter.com/shaundai)’s talk here: - + ### The first React working group {/*the-first-react-working-group*/} @@ -40,7 +109,7 @@ For React 18, we created our first Working Group to collaborate with a panel of For an overview of this work, see [Aakansha' Doshi](https://twitter.com/aakansha1216)'s talk: - + ### React Developer Tooling {/*react-developer-tooling*/} @@ -48,19 +117,19 @@ To support the new features in this release, we also announced the newly formed For more information and a demo of new DevTools features, see [Brian Vaughn](https://twitter.com/brian_d_vaughn)’s talk: - + ### React without memo {/*react-without-memo*/} Looking further into the future, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype: - + ### React docs keynote {/*react-docs-keynote*/} [Rachel Nabors](https://twitter.com/rachelnabors) kicked off a section of talks about learning and designing with React with a keynote about our investment in React's new docs ([now shipped as react.dev](/blog/2023/03/16/introducing-react-dev)): - + ### And more... {/*and-more*/} From 0bfd418252167fc7cce16452ae319e1071498ccc Mon Sep 17 00:00:00 2001 From: Akshay Ashok Date: Thu, 11 Sep 2025 21:57:28 +0530 Subject: [PATCH 2/3] docs: add flushSync Troubleshooting section (#7978) * docs: add flushSync Troubleshooting section * Update src/content/reference/react-dom/flushSync.md * oops * Apply suggestions from code review * formatting and pitfall --------- Co-authored-by: Ricky Co-authored-by: Rick Hanlon --- src/content/reference/react-dom/flushSync.md | 72 ++++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/src/content/reference/react-dom/flushSync.md b/src/content/reference/react-dom/flushSync.md index e23ef4eac..6fe53337d 100644 --- a/src/content/reference/react-dom/flushSync.md +++ b/src/content/reference/react-dom/flushSync.md @@ -131,3 +131,75 @@ Without `flushSync`, the print dialog will display `isPrinting` as "no". This is Most of the time, `flushSync` can be avoided, so use `flushSync` as a last resort. + +--- + +## Troubleshooting {/*troubleshooting*/} + +### I'm getting an error: "flushSync was called from inside a lifecycle method" {/*im-getting-an-error-flushsync-was-called-from-inside-a-lifecycle-method*/} + + +React cannot `flushSync` in the middle of a render. If you do, it will noop and warn: + + + +Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task. + + + +This includes calling `flushSync` inside: + +- rendering a component. +- `useLayoutEffect` or `useEffect` hooks. +- Class component lifecycle methods. + +For example, calling `flushSync` in an Effect will noop and warn: + +```js +import { useEffect } from 'react'; +import { flushSync } from 'react-dom'; + +function MyComponent() { + useEffect(() => { + // 🚩 Wrong: calling flushSync inside an effect + flushSync(() => { + setSomething(newValue); + }); + }, []); + + return

{/* ... */}

; +} +``` + +To fix this, you usually want to move the `flushSync` call to an event: + +```js +function handleClick() { + // ✅ Correct: flushSync in event handlers is safe + flushSync(() => { + setSomething(newValue); + }); +} +``` + + +If it's difficult to move to an event, you can defer `flushSync` in a microtask: + +```js {3,7} +useEffect(() => { + // ✅ Correct: defer flushSync to a microtask + queueMicrotask(() => { + flushSync(() => { + setSomething(newValue); + }); + }); +}, []); +``` + +This will allow the current render to finish and schedule another syncronous render to flush the updates. + + + +`flushSync` can significantly hurt performance, but this particular pattern is even worse for performance. Exhaust all other options before calling `flushSync` in a microtask as an escape hatch. + + From a5181c291f01896735b65772f156cfde34df20ee Mon Sep 17 00:00:00 2001 From: Ricky Date: Fri, 12 Sep 2025 12:47:11 -0400 Subject: [PATCH 3/3] Bump Activity docs to canary (#7974) * correct IconExperimental naming and usage (from #7972) Co-authored-by: Tuna <198469603+TunaDev0@users.noreply.github.com> * Bump Activity to Canary in docs --------- Co-authored-by: Tuna <198469603+TunaDev0@users.noreply.github.com> --- next-env.d.ts | 3 +-- src/components/Icon/IconExperimental.tsx | 2 +- src/components/MDX/MDXComponents.tsx | 3 ++- ...ct-labs-view-transitions-activity-and-more.md | 8 ++++++++ src/content/reference/react/Activity.md | 16 +++++----------- src/sidebarReference.json | 2 +- 6 files changed, 18 insertions(+), 16 deletions(-) diff --git a/next-env.d.ts b/next-env.d.ts index 3cd7048ed..52e831b43 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,5 @@ /// /// -/// // NOTE: This file should not be edited -// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. +// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/src/components/Icon/IconExperimental.tsx b/src/components/Icon/IconExperimental.tsx index 0bba612eb..c0f69e3f9 100644 --- a/src/components/Icon/IconExperimental.tsx +++ b/src/components/Icon/IconExperimental.tsx @@ -6,7 +6,7 @@ import {memo} from 'react'; export const IconExperimental = memo< JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'} ->(function IconCanary( +>(function IconExperimental( {className, title, size} = { className: undefined, title: undefined, diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index 36774ad4b..afcb9c265 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -37,6 +37,7 @@ import {finishedTranslations} from 'utils/finishedTranslations'; import ErrorDecoder from './ErrorDecoder'; import {IconCanary} from '../Icon/IconCanary'; +import {IconExperimental} from 'components/Icon/IconExperimental'; function CodeStep({children, step}: {children: any; step: number}) { return ( @@ -130,7 +131,7 @@ const ExperimentalBadge = ({title}: {title: string}) => ( className={ 'text-base font-display px-1 py-0.5 font-bold bg-gray-10 dark:bg-gray-60 text-gray-60 dark:text-gray-10 rounded' }> - 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 333334073..c7f740091 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 @@ -11465,6 +11465,14 @@ _For more background on how we built View Transitions, see: [#31975](https://git ## Activity {/*activity*/} + + +**`` is now available in React’s Canary channel.** + +[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels) + + + In [past](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen) [updates](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity), we shared that we were researching an API to allow components to be visually hidden and deprioritized, preserving UI state with reduced performance costs relative to unmounting or hiding with CSS. We're now ready to share the API and how it works, so you can start testing it in experimental React versions. diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index 09b79c79f..c7d513afc 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -1,21 +1,15 @@ --- title: -version: experimental +version: canary --- - + -**This API is experimental and is not available in a stable version of React yet.** +**The `` API is currently only available in React’s Canary and Experimental channels.** -You can try it by upgrading React packages to the most recent experimental version: +[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels) -- `react@experimental` -- `react-dom@experimental` -- `eslint-plugin-react-hooks@experimental` - -Experimental versions of React may contain bugs. Don't use them in production. - - + diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 59f472084..18fbd4097 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -107,7 +107,7 @@ { "title": "", "path": "/reference/react/Activity", - "version": "experimental" + "version": "canary" }, { "title": "",