Sync with react.dev @ 56df8af5

src/content/blog/2024/04/25/react-19-upgrade-guide.md

@@ -70,7 +70,13 @@ We expect most apps will not be affected since the transform is enabled in most
 To install the latest version of React and React DOM:
 
 ```bash
-npm install react@rc react-dom@rc
+npm install --save-exact react@rc react-dom@rc
+```
+
+Or, if you're using Yarn:
+
+```bash
+yarn add --exact react@rc react-dom@rc
 ```
 
 If you're using TypeScript, you also need to update the types. Once React 19 is released as stable, you can install the types as usual from `@types/react` and `@types/react-dom`.  Until the stable release, the types are available in different packages which need to be enforced in your `package.json`:
@@ -405,7 +411,7 @@ root.render(<App />);
 
 <Note>
 
-Codemod `ReactDOM.render` to `ReactDOM.createRoot`:
+Codemod `ReactDOM.render` to `ReactDOMClient.createRoot`:
 
 ```bash
 npx codemod@latest react/19/replace-reactdom-render
@@ -427,6 +433,15 @@ import {hydrateRoot} from 'react-dom/client';
 hydrateRoot(document.getElementById('root'), <App />);
 ```
 
+<Note>
+
+Codemod `ReactDOM.hydrate` to `ReactDOMClient.hydrateRoot`:
+
+```bash
+npx codemod@latest react/19/replace-reactdom-render
+```
+
+</Note>
 
 #### Removed: `unmountComponentAtNode` {/*removed-unmountcomponentatnode*/}
 
@@ -443,8 +458,18 @@ root.unmount();
 
 For more see `root.unmount()` for [`createRoot`](https://react.dev/reference/react-dom/client/createRoot#root-unmount) and [`hydrateRoot`](https://react.dev/reference/react-dom/client/hydrateRoot#root-unmount).
 
+<Note>
+
+Codemod `unmountComponentAtNode` to `root.unmount`:
+
+```bash
+npx codemod@latest react/19/replace-reactdom-render
+```
+
+</Note>
 
 #### Removed: `ReactDOM.findDOMNode` {/*removed-reactdom-finddomnode*/}
+
 `ReactDOM.findDOMNode` was [deprecated in October 2018 (v16.6.0)](https://legacy.reactjs.org/blog/2018/10/23/react-v-16-6.html#deprecations-in-strictmode). 
 
 We're removing `findDOMNode` because it was a legacy escape hatch that was slow to execute, fragile to refactoring, only returned the first child, and broke abstraction levels (see more [here](https://legacy.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)). You can replace `ReactDOM.findDOMNode` with [DOM refs](/learn/manipulating-the-dom-with-refs):

src/content/community/conferences.md

@@ -10,6 +10,7 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
+<<<<<<< HEAD
 ### React Paris 2024 {/*react-paris-2024*/}
 March 22, 2024. In-person in Paris, France + Remote (hybrid)
 
@@ -53,6 +54,8 @@ June 4 - 7, 2024. Online
 
 [Website](https://frontendnation.com/) - [Twitter](https://twitter.com/frontendnation)
 
+=======
+>>>>>>> 56df8af577407c69889f24a4c7d9ddb54745a26b
 ### React Summit 2024 {/*react-summit-2024*/}
 June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)
 
@@ -106,6 +109,41 @@ October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - re
 
 ## Past Conferences {/*past-conferences*/}
 
+### Frontend Nation 2024 {/*frontend-nation-2024*/}
+June 4 - 7, 2024. Online
+
+[Website](https://frontendnation.com/) - [Twitter](https://twitter.com/frontendnation)
+
+### App.js Conf 2024 {/*appjs-conf-2024*/}
+May 22 - 24, 2024. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### React Conf 2024 {/*react-conf-2024*/}
+May 15 - 16, 2024. In-person in Henderson, NV, USA + remote
+
+[Website](https://conf.react.dev) - [Twitter](https://twitter.com/reactjs)
+
+### React Native Connection 2024 {/*react-native-connection-2024*/}
+April 23, 2024. In-person in Paris, France 
+
+[Website](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn)
+
+### React Miami 2024 {/*react-miami-2024*/}
+April 19 - 20, 2024. In-person in Miami, FL, USA
+
+[Website](https://reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
+
+### Epic Web Conf 2024 {/*epic-web-2024*/}
+April 10 - 11, 2024. In-person in Park City, UT, USA
+
+[Website](https://www.epicweb.dev/conf) - [YouTube](https://www.youtube.com/@EpicWebDev)
+
+### React Paris 2024 {/*react-paris-2024*/}
+March 22, 2024. In-person in Paris, France + Remote (hybrid)
+
+[Website](https://react.paris/) - [Twitter](https://twitter.com/BeJS_) - [LinkedIn](https://www.linkedin.com/events/7150816372074192900/comments/)
+
 ### React Day Berlin 2023 {/*react-day-berlin-2023*/}
 December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)
 

src/content/learn/installation.md

@@ -37,7 +37,11 @@ export default function App() {
 
 Дәл осы жерде код жазуға немесе жоғарғы оң жақ бұрыштағы «Fork» түймесін басу арқылы кодты жаңа табта ашуға болады.
 
+<<<<<<< HEAD
 Мұндай құмжәшіктер React құжаттамасының беттерінің көпшілігінде қолжетімді. React құжаттамасынан басқа, React-ті қолдайтын көптеген онлайн құмжәшіктері бар: мысалы, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), немесе [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb)
+=======
+Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?template=QWYVwWN)
+>>>>>>> 56df8af577407c69889f24a4c7d9ddb54745a26b
 
 ### Локальде React-тi қолданып көріңіз {/*try-react-locally*/}
 

src/content/reference/react-dom/components/script.md

@@ -68,12 +68,10 @@ Props that are **not recommended** for use with React:
 
 #### Special rendering behavior {/*special-rendering-behavior*/}
 
-React can move `<script>` components to the document's `<head>`, de-duplicate identical scripts, and [suspend](/reference/react/Suspense) while the script is loading.
+React can move `<script>` components to the document's `<head>` and de-duplicate identical scripts.
 
 To opt into this behavior, provide the `src` and `async={true}` props. React will de-duplicate scripts if they have the same `src`. The `async` prop must be true to allow scripts to be safely moved.
 
-If you supply any of the `onLoad` or `onError` props, there is no special behavior, because these props indicate that you are managing the loading of the script manually within your component.
-
 This special treatment comes with two caveats:
 
 * React will ignore changes to props after the script has been rendered. (React will issue a warning in development if this happens.)
@@ -86,8 +84,10 @@ This special treatment comes with two caveats:
 ### Rendering an external script {/*rendering-an-external-script*/}
 
 If a component depends on certain scripts in order to be displayed correctly, you can render a `<script>` within the component.
+However, the component might be committed before the script has finished loading.
+You can start depending on the script content once the `load` event is fired e.g. by using the `onLoad` prop.
 
-If you supply an `src` and `async` prop, your component will suspend while the script is loading. React will de-duplicate scripts that have the same `src`, inserting only one of them into the DOM even if multiple components render it.
+React will de-duplicate scripts that have the same `src`, inserting only one of them into the DOM even if multiple components render it.
 
 <SandpackWithHTMLOutput>
 
@@ -97,7 +97,7 @@ import ShowRenderedHTML from './ShowRenderedHTML.js';
 function Map({lat, long}) {
   return (
     <>
-      <script async src="map-api.js" />
+      <script async src="map-api.js" onLoad={() => console.log('script loaded')} />
       <div id="map" data-lat={lat} data-long={long} />
     </>
   );
@@ -120,7 +120,7 @@ When you want to use a script, it can be beneficial to call the [preinit](/refer
 
 ### Rendering an inline script {/*rendering-an-inline-script*/}
 
-To include an inline script, render the `<script>` component with the script source code as its children. Inline scripts are not de-duplicated or moved to the document `<head>`, and since they don't load any external resources, they will not cause your component to suspend.
+To include an inline script, render the `<script>` component with the script source code as its children. Inline scripts are not de-duplicated or moved to the document `<head>`.
 
 <SandpackWithHTMLOutput>
 

src/content/reference/react-dom/preinit.md

@@ -20,7 +20,7 @@ The `preinit` function is currently only available in React's Canary and experim
 `preinit` lets you eagerly fetch and evaluate a stylesheet or external script.
 
 ```js
-preinit("https://example.com/script.js", {as: "style"});
+preinit("https://example.com/script.js", {as: "script"});
 ```
 
 </Intro>

src/content/reference/react/act.md

@@ -0,0 +1,177 @@
+---
+title: act
+---
+
+<Intro>
+
+`act` is a test helper to apply pending React updates before making assertions.
+
+```js
+await act(async actFn)
+```
+
+</Intro>
+
+To prepare a component for assertions, wrap the code rendering it and performing updates inside an `await act()` call. This makes your test run closer to how React works in the browser.
+
+<Note>
+You might find using `act()` directly a bit too verbose. To avoid some of the boilerplate, you could use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), whose helpers are wrapped with `act()`.
+</Note>
+
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `await act(async actFn)` {/*await-act-async-actfn*/}
+
+When writing UI tests, tasks like rendering, user events, or data fetching can be considered as “units” of interaction with a user interface. React provides a helper called `act()` that makes sure all updates related to these “units” have been processed and applied to the DOM before you make any assertions.
+
+The name `act` comes from the [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert) pattern.
+
+```js {2,4}
+it ('renders with button disabled', async () => {
+  await act(async () => {
+    root.render(<TestComponent />)
+  });
+  expect(container.querySelector('button')).toBeDisabled();
+});
+```
+
+<Note>
+
+We recommend using `act` with `await` and an `async` function. Although the sync version works in many cases, it doesn't work in all cases and due to the way React schedules updates internally, it's difficult to predict when you can use the sync version.
+
+We will deprecate and remove the sync version in the future.
+
+</Note>
+
+#### Parameters {/*parameters*/}
+
+* `async actFn`: An async function wrapping renders or interactions for components being tested. Any updates triggered within the `actFn`, are added to an internal act queue, which are then flushed together to process and apply any changes to the DOM. Since it is async, React will also run any code that crosses an async boundary, and flush any updates scheduled.
+
+#### Returns {/*returns*/}
+
+`act` does not return anything.
+
+## Usage {/*usage*/}
+
+When testing a component, you can use `act` to make assertions about its output.
+
+For example, let’s say we have this `Counter` component, the usage examples below show how to test it:
+
+```js
+function Counter() {
+  const [count, setCount] = useState(0);
+  const handleClick = () => {
+    setCount(prev => prev + 1);
+  }
+
+  useEffect(() => {
+    document.title = `You clicked ${this.state.count} times`;
+  }, [count]);
+
+  return (
+    <div>
+      <p>You clicked {this.state.count} times</p>
+      <button onClick={this.handleClick}>
+        Click me
+      </button>
+    </div>
+  )
+}
+```
+
+### Rendering components in tests {/*rendering-components-in-tests*/}
+
+To test the render output of a component, wrap the render inside `act()`:
+
+```js  {10,12}
+import {act} from 'react';
+import ReactDOM from 'react-dom/client';
+import Counter from './Counter';
+
+it('can render and update a counter', async () => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+
+  // ✅ Render the component inside act().
+  await act(() => {
+    ReactDOM.createRoot(container).render(<Counter />);
+  });
+
+  const button = container.querySelector('button');
+  const label = container.querySelector('p');
+  expect(label.textContent).toBe('You clicked 0 times');
+  expect(document.title).toBe('You clicked 0 times');
+});
+```
+
+Here, we create a container, append it to the document, and render the `Counter` component inside `act()`. This ensures that the component is rendered and its effects are applied before making assertions.
+
+Using `act` ensures that all updates have been applied before we make assertions.
+
+### Dispatching events in tests {/*dispatching-events-in-tests*/}
+
+To test events, wrap the event dispatch inside `act()`:
+
+```js {14,16}
+import {act} from 'react';
+import ReactDOM from 'react-dom/client';
+import Counter from './Counter';
+
+it.only('can render and update a counter', async () => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+
+  await act( async () => {
+    ReactDOMClient.createRoot(container).render(<Counter />);
+  });
+
+  // ✅ Dispatch the event inside act().
+  await act(async () => {
+    button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+  });
+
+  const button = container.querySelector('button');
+  const label = container.querySelector('p');
+  expect(label.textContent).toBe('You clicked 1 times');
+  expect(document.title).toBe('You clicked 1 times');
+});
+```
+
+Here, we render the component with `act`, and then dispatch the event inside another `act()`. This ensures that all updates from the event are applied before making assertions.
+
+<Pitfall>
+
+Don’t forget that dispatching DOM events only works when the DOM container is added to the document. You can use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to reduce the boilerplate code.
+
+</Pitfall>
+
+## Troubleshooting {/*troubleshooting*/}
+
+### I'm getting an error: "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
+
+Using `act` requires setting `global.IS_REACT_ACT_ENVIRONMENT=true` in your test environment. This is to ensure that `act` is only used in the correct environment.
+
+If you don't set the global, you will see an error like this:
+
+<ConsoleBlock level="error">
+
+Warning: The current testing environment is not configured to support act(...)
+
+</ConsoleBlock>
+
+To fix, add this to your global setup file for React tests:
+
+```js
+global.IS_REACT_ACT_ENVIRONMENT=true
+```
+
+<Note>
+
+In testing frameworks like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), `IS_REACT_ACT_ENVIRONMENT` is already set for you.
+
+</Note>

src/content/reference/react/apis.md

@@ -15,6 +15,7 @@ In addition to [Hooks](/reference/react) and [Components](/reference/react/compo
 * [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.
 * [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
 * [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
+* [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions.
 
 ---
 

src/content/reference/react/cache.md

@@ -226,7 +226,7 @@ By caching a long-running data fetch, you can kick off asynchronous work prior t
 ```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]]
 const getUser = cache(async (id) => {
   return await db.user.query(id);
-}
+})
 
 async function Profile({id}) {
   const user = await getUser(id);

src/content/warnings/react-test-renderer.md

@@ -6,7 +6,7 @@ title: react-test-renderer Deprecation Warnings
 
 react-test-renderer is deprecated. A warning will fire whenever calling ReactTestRenderer.create() or ReactShallowRender.render(). The react-test-renderer package will remain available on NPM but will not be maintained and may break with new React features or changes to React's internals.
 
-The React Team recommends migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started) for a modern and well supported testing experience.
+The React Team recommends migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/start/intro) for a modern and well supported testing experience.
 
 
 ## new ShallowRenderer() warning {/*new-shallowrenderer-warning*/}