Merge pull request #110 from reactjs/sync-a5181c29

Sync with react.dev @ a5181c2

Author: orama254

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,

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'
     }>
-    <IconCanary
+    <IconExperimental
       size="s"
       className={'inline me-1 mb-0.5 text-sm text-gray-60 dark:text-gray-10'}
     />

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*/}
 
+<Note>
+
+**`<Activity />` is now available in React’s Canary channel.**
+
+[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
+
+</Note>
+
 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.

src/content/community/conferences.md

@@ -60,10 +60,10 @@ March 26 - 27, 2026. In-person in Paris, France (hybrid event)
 ## Past Conferences {/*past-conferences*/}
 
 
-### CityJS London 2025 {/*cityjs-london*/}
-April 23 - 25, 2025. In-person in London, UK
+### React Nexus 2025 {/*react-nexus-2025*/}
+July 03 - 05, 2025. In-person in Bangalore, India
 
-[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) -  [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
 
 ### React Summit 2025 {/*react-summit-2025*/}
 June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)

src/content/community/videos.md

@@ -8,6 +8,75 @@ Videos dedicated to the discussion of React and the React ecosystem.
 
 </Intro>
 
+## 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:
+
+<YouTubeIframe src="https://www.youtube.com/embed/T8TZQ6k4SLE?t=975s" title="Boz and Seth Intro" />
+
+### 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):
+
+
+<YouTubeIframe src="https://www.youtube.com/embed/lyEKhv8-3n0" title="YouTube video player" />
+
+### 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:
+
+<YouTubeIframe src="https://www.youtube.com/embed/R0B2HsSM78s" title="React Unpacked: A Roadmap to React 19" />
+
+### 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:
+
+<YouTubeIframe src="https://www.youtube.com/embed/AJOGzVygGcY" title="What's New in React 19" />
+
+### 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:
+
+<YouTubeIframe src="https://www.youtube.com/embed/IBBN-s77YSI" title="React 19 Deep Dive: Coordinating HTML" />
+
+### 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:
+
+<YouTubeIframe src="https://www.youtube.com/embed/ozI4V_29fj4" title="React for Two Computers" />
+
+### Forget About Memo {/*forget-about-memo*/}
+
+[Lauren Tan](https://twitter.com/potetotes) gave a talk on using the React Compiler in practice:
+
+<YouTubeIframe src="https://www.youtube.com/embed/lvhPq5chokM" title="Forget About Memo" />
+
+### 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:
+
+<YouTubeIframe src="https://www.youtube.com/embed/uA_PVyZP7AI" title="React Compiler Deep Dive" />
+
+### 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:
 
-<YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/FZ0cG47msEk" title="React 18 Keynote" />
 
 ### 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:
 
-<YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/ytudH8je5ko" title="React 18 for Application Developers" />
 
 ### Streaming Server Rendering with Suspense {/*streaming-server-rendering-with-suspense*/}
 
@@ -32,35 +101,35 @@ 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:
 
-<YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/pj5N-Khihgc" title="Streaming Server Rendering with Suspense" />
 
 ### The first React working group {/*the-first-react-working-group*/}
 
 For React 18, we created our first Working Group to collaborate with a panel of experts, developers, library maintainers, and educators. Together we worked to create our gradual adoption strategy and refine new APIs such as `useId`, `useSyncExternalStore`, and `useInsertionEffect`.
 
 For an overview of this work, see [Aakansha' Doshi](https://twitter.com/aakansha1216)'s talk:
 
-<YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/qn7gRClrC9U" title="The first React working group" />
 
 ### React Developer Tooling {/*react-developer-tooling*/}
 
 To support the new features in this release, we also announced the newly formed React DevTools team and a new Timeline Profiler to help developers debug their React apps.
 
 For more information and a demo of new DevTools features, see [Brian Vaughn](https://twitter.com/brian_d_vaughn)’s talk:
 
-<YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/oxDfrke8rZg" title="React Developer Tooling" />
 
 ### 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:
 
-<YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/lGEMwh32soc" title="React without memo" />
 
 ### 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)):
 
-<YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" title="YouTube video player" />
+<YouTubeIframe src="https://www.youtube.com/embed/mneDaMYOKP8" title="React docs keynote" />
 
 ### And more... {/*and-more*/}
 

src/content/learn/tutorial-tic-tac-toe.md

@@ -283,9 +283,15 @@ Katika CodeSandbox utaona sehemu tatu kuu:
 
 ![CodeSandbox na msimbo wa mwanzo](../images/tutorial/react-starter-code-codesandbox.png)
 
+<<<<<<< HEAD
 1. Sehemu ya _Files_ na orodha ya mafaili kama `App.js`, `index.js`, `styles.css` na folda inayoitwa `public`
 1. _Kihariri cha msimbo_ ambapo utaona msimbo wa chanzo wa faili uliyouchagua
 1. Sehemu ya _kivinjari_ ambapo utaona jinsi msimbo ulioandika utakavyonyeshwa
+=======
+1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` in `src` folder and a folder called `public`
+1. The _code editor_ where you'll see the source code of your selected file
+1. The _browser_ section where you'll see how the code you've written will be displayed
+>>>>>>> a5181c291f01896735b65772f156cfde34df20ee
 
 Faili ya `App.js` inapaswa kuchaguliwa katika sehemu ya _Files_. Maudhui ya faili hiyo katika _mhariri wa msimbo_ yanapaswa kuwa:
 
@@ -2247,7 +2253,11 @@ body {
 
 </Sandpack>
 
+<<<<<<< HEAD
 Unapozunguka kupitia orodha ya `history` ndani ya function unayopitisha kwa `map`, hoja ya `squares` inapitia kila kipengele cha `history`, na hoja ya `move` inapitia kila kiashiria cha orodha: `0`, `1`, `2`, …. (Katika hali nyingi, ungehitaji vipengele halisi vya orodha, lakini ili kuonyesha orodha ya harakati utahitaji tu viashiria.)
+=======
+As you iterate through the `history` array inside the function you passed to `map`, the `squares` argument goes through each element of `history`, and the `move` argument goes through each array index: `0`, `1`, `2`, …. (In most cases, you'd need the actual array elements, but to render a list of moves you will only need indexes.)
+>>>>>>> a5181c291f01896735b65772f156cfde34df20ee
 
 Kwa kila harakati katika historia ya mchezo wa tic-tac-toe, unaunda kipengele cha orodha `<li>` kinachojumuisha kitufe `<button>`. Kitufe kinakuwa na kihariri cha `onClick` kinachoitwa function inayoitwa `jumpTo` (ambayo huja kuwa umeitekeleza bado).
 

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.
 
 </Pitfall>
+
+---
+
+## 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:
+
+<ConsoleBlock level="error">
+
+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.
+
+</ConsoleBlock>
+
+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 <div>{/* ... */}</div>;
+}
+```
+
+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.
+
+<Pitfall>
+
+`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.
+
+</Pitfall>

src/content/reference/react/Activity.md

@@ -1,21 +1,15 @@
 ---
 title: <Activity>
-version: experimental
+version: canary
 ---
 
-<Experimental>
+<Canary>
 
-**This API is experimental and is not available in a stable version of React yet.**
+**The `<Activity />` 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.
-
-</Experimental>
+</Canary>
 
 <Intro>
 

src/sidebarReference.json

@@ -107,7 +107,7 @@
         {
           "title": "<Activity>",
           "path": "/reference/react/Activity",
-          "version": "experimental"
+          "version": "canary"
         },
         {
           "title": "<ViewTransition>",
@@ -169,6 +169,23 @@
         }
       ]
     },
+    {
+      "title": "Directives",
+      "path": "/reference/react/directives",
+      "canary": true,
+      "routes": [
+        {
+          "title": "'use client'",
+          "path": "/reference/react/use-client",
+          "canary": true
+        },
+        {
+          "title": "unstable_addTransitionType",
+          "path": "/reference/react/addTransitionType",
+          "version": "experimental"
+        }
+      ]
+    },
     {
       "hasSectionHeader": true,
       "sectionHeader": "react-dom@{{version}}"