Sync with reactjs.org @ 84ad330 (#515)

* Fix grammar (#4502)

* Fix grammar

* Update rendering-lists.md

Co-authored-by: dan <[email protected]>

* docs: Add React Finland 2022 (#4544)

* Update conferences.md (#4546)

* fix babel url version (#4549)

Co-authored-by: David <[email protected]>

* Fix params order for hydrateRoot reference (#4552)

* Override sharp version (#4554)

* Document useId is not for keys (#4557)

* Edits for ReactDOMServer API (#4558)

* Edits for ReactDOMServer API

* Move note below example

* No destructure

* Rm hr

* Add onError

* Drop SEO

* Update reference-react-dom-server.md

* Clarify renderToString etc usage

* Add more details on batching (#4559)

* Add more details on batching

* Use a generic example

* renderToReadableStream: Ensure same var name is used in `onError` (#4562)

* Mention TypeScript in the upgrade post (#4567)

* Mention TypeScript in the upgrade post

* Add a link

* fix typo "sever" on reference-react-dom-server.md (#4570)

* resolve merge conflicts

Co-authored-by: Jeongwoo Park <[email protected]>
Co-authored-by: dan <[email protected]>
Co-authored-by: Juho Vepsäläinen <[email protected]>
Co-authored-by: Strek <[email protected]>
Co-authored-by: DavidKessel <[email protected]>
Co-authored-by: David <[email protected]>
Co-authored-by: Marco Antonio Ghiani <[email protected]>
Co-authored-by: Sebastian Silbermann <[email protected]>
Co-authored-by: Antony Budianto <[email protected]>
Co-authored-by: Rainer Martínez Fraga <[email protected]>

Author: 10 people

Diff for: beta/src/pages/learn/add-react-to-a-website.md

@@ -136,7 +136,7 @@ return <button onClick={() => setLiked(true)}>Like</button>;
 
 Estos dos fragmentos de código son equivalentes. JSX es una sintaxis popular para describir marcado en JavaScript. Muchas personas lo encuentran familiar y útil para escribir código de UI--tanto con React como con otras bibliotecas. ¡Puede que veas «marcado esparcido por tu JavaScript» en otros proyectos!
 
-> Puedes interactuar con la transformación de marcado HTML en JSX usando este [convertir en línea](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3).
+> Puedes interactuar con la transformación de marcado HTML en JSX usando este [convertir en línea](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.17).
 
 ### Prueba JSX {/*try-jsx*/}
 

Diff for: beta/src/pages/learn/rendering-lists.md

@@ -30,7 +30,7 @@ Say that you have a list of content.
 </ul>
 ```
 
-The only difference among those list items are their contents, their data. You will run into many situations where you need many of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to render lists of components from them.
+The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to render lists of components from them.
 
 Here’s a short example of how to generate a list of items from an array:
 

Diff for: content/blog/2022-03-08-react-18-upgrade-guide.md

@@ -126,6 +126,21 @@ Finally, this API will continue to work for rendering e-mails:
 
 For more information on the changes to server rendering APIs, see the working group post on [Upgrading to React 18 on the server](https://github.com/reactwg/react-18/discussions/22), a [deep dive on the new Suspense SSR Architecture](https://github.com/reactwg/react-18/discussions/37), and [Shaundai Person’s](https://twitter.com/shaundai) talk on [Streaming Server Rendering with Suspense](https://www.youtube.com/watch?v=pj5N-Khihgc) at React Conf 2021.
 
+## Updates to TypeScript definitions
+
+If your project uses TypeScript, you will need to update your `@types/react` and `@types/react-dom` dependencies to the latest versions. The new types are safer and catch issues that used to be ignored by the type checker. The most notable change is that the `children` prop now needs to be listed explicitly when defining props, for example:
+
+```typescript{3}
+interface MyButtonProps {
+  color: string;
+  children?: React.ReactNode;
+}
+```
+
+See the [React 18 typings pull request](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210) for a full list of type-only changes. It links to example fixes in library types so you can see how to adjust your code. You can use the [automated migration script](https://github.com/eps1lon/types-react-codemod) to help port your application code to the new and safer typings faster.
+
+If you find a bug in the typings, please [file an issue](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package) in the DefinitelyTyped repo.
+
 ## Automatic Batching {#automatic-batching}
 
 React 18 adds out-of-the-box performance improvements by doing more batching by default. Batching is when React groups multiple state updates into a single re-render for better performance. Before React 18, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default:

Diff for: content/blog/2022-03-29-react-v18.md

@@ -220,6 +220,10 @@ With Strict Mode in React 18, React will simulate unmounting and remounting the
 
 `useId` is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches. It is primarily useful for component libraries integrating with accessibility APIs that require unique IDs. This solves an issue that already exists in React 17 and below, but it's even more important in React 18 because of how the new streaming server renderer delivers HTML out-of-order. [See docs here](/docs/hooks-reference.html#useid).
 
+> Note
+>
+> `useId` is **not** for generating [keys in a list](/docs/lists-and-keys.html#keys). Keys should be generated from your data.
+
 #### useTransition {#usetransition}
 
 `useTransition` and `startTransition` let you mark some state updates as not urgent. Other state updates are considered urgent by default. React will allow urgent state updates (for example, updating a text input) to interrupt non-urgent state updates (for example, rendering a list of search results). [See docs here](/docs/hooks-reference.html#usetransition)

Diff for: content/community/conferences.md

@@ -12,11 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {#upcoming-conferences}
 
-### React Live 2022 {#react-live-2022}
-April 1, 2022. Amsterdam, The Netherlands
-
-[Website](https://www.reactlive.nl/) - [Twitter](https://twitter.com/reactlivenl)
-
 ### React Miami 2022 🌴 {#react-miami-2022}
 April 18 - 19, 2022. Miami, Florida
 [Website](https://www.reactmiami.com/)
@@ -60,6 +55,11 @@ September 1-2, 2022 - Remote event
 [Facebook](https://www.facebook.com/reactnativeeu/) - 
 [Instagram](https://www.instagram.com/reactnative_eu/)
 
+### React Finland 2022 {#react-finland-2022}
+September 12 - 16, 2022. In-person in Helsinki, Finland
+
+[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland) - [Schedule](https://react-finland.fi/schedule/) - [Speakers](https://react-finland.fi/speakers/)
+
 ### React India 2022 {#react-india-2022}
 September 22 - 24, 2022. In-person in Goa, India + remote (hybrid event)
 
@@ -72,6 +72,11 @@ September 29 - October 1, 2022. In-person in Alicante, Spain + remote (hybrid ev
 
 ## Past Conferences {#past-conferences}
 
+### React Live 2022 {#react-live-2022}
+April 1, 2022. Amsterdam, The Netherlands
+
+[Website](https://www.reactlive.nl/) - [Twitter](https://twitter.com/reactlivenl)
+
 ### AgentConf 2022 {#agent-conf-2022} 
 
 January 27 - 30, 2022. In-person in Dornbirn and Lech Austria

Diff for: content/docs/hooks-reference.md

@@ -108,6 +108,14 @@ Si se actualiza un Hook de estado con el mismo valor que el estado actual, React
 
 Recuerda que React puede necesitar renderizar de nuevo ese componente en específico antes de evitarlo. Esto no debería ser un problema ya que React no irá innecesariamente "más profundo" en el árbol. Si estás realizando cálculos costosos mientras renderizas, puedes optimizarlos con `useMemo`.
 
+#### Batching of state updates {#batching-of-state-updates}
+
+React may group several state updates into a single re-render to improve performance. Normally, this improves performance and shouldn't affect your application's behavior.
+
+Before React 18, only updates inside React event handlers were batched. Starting with React 18, [batching is enabled for all updates by default](/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching). Note that React makes sure that updates from several *different* user-initiated events -- for example, clicking a button twice -- are always processed separately and do not get batched. This prevents logical mistakes.
+
+In the rare case that you need to force the DOM update to be applied synchronously, you may wrap it in [`flushSync`](/docs/react-dom.html#flushsync). However, this can hurt performance so do this only where needed.
+
 ### `useEffect` {#useeffect}
 
 ```js
@@ -612,6 +620,10 @@ const id = useId();
 
 `useId` is a hook for generating unique IDs that are stable across the server and client, while avoiding hydration mismatches.
 
+> Note
+>
+> `useId` is **not** for generating [keys in a list](/docs/lists-and-keys.html#keys). Keys should be generated from your data.
+
 For a basic example, pass the `id` directly to the elements that need it:
 
 ```js

Diff for: content/docs/reference-react-component.md

@@ -507,7 +507,7 @@ setState(updater, [callback])
 
 `setState()` hace cambios al estado del componente y le dice a React que este componente y sus elementos secundarios deben volverse a procesar con el estado actualizado. Este es el método principal que utiliza para actualizar la interfaz de usuario en respuesta a los manejadores de eventos y las respuestas del servidor.
 
-Considera `setState()` como una *solicitud* en lugar de un comando para actualizar el componente. Para un mejor rendimiento percibido, React puede retrasarlo, y luego actualizar varios componentes en una sola pasada. React no garantiza que los cambios de estado se apliquen de inmediato.
+Considera `setState()` como una *solicitud* en lugar de un comando para actualizar el componente. Para que se perciba un mejor rendimiento, React puede retrasarlo, y luego actualizar varios componentes en una sola pasada. En el caso inusual que necesites forzar a que la actualización del DOM se aplique de manera síncrona, puedes envolverlo en [`flushSync`](/docs/react-dom.html#flushsync), pero esto puede afectar el rendimiento.
 
 `setState()` no siempre actualiza inmediatamente el componente. Puede procesar por lotes o diferir la actualización hasta más tarde. Esto hace que leer `this.state` después de llamar a `setState()` sea una trampa potencial. En su lugar, usa `componentDidUpdate` o un callback `setState` (`setState(updater, callback)`), se garantiza que cualquiera de los dos se activará una vez la actualización haya sido aplicada. Si necesitas establecer el estado en función del estado anterior, lee a continuación sobre el argumento `updater`.
 

Diff for: content/docs/reference-react-dom-client.md

@@ -71,7 +71,7 @@ root.unmount();
 ### `hydrateRoot()` {#hydrateroot}
 
 ```javascript
-hydrateRoot(element, container[, options])
+hydrateRoot(container, element[, options])
 ```
 
 Same as [`createRoot()`](#createroot), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup.