Merge pull request #631 from reactjs/sync-081d1008

Sync with react.dev @ 081d100

Author: tdd

package.json

@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "2.6.0",
+    "@codesandbox/sandpack-react": "2.13.1",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",

src/components/MDX/Sandpack/SandpackRoot.tsx

@@ -88,7 +88,7 @@ function SandpackRoot(props: SandpackProps) {
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
-          bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev',
+          bundlerURL: 'https://786946de.sandpack-bundler-4bw.pages.dev',
           logLevel: SandpackLogLevel.None,
         }}>
         <CustomPreset providedFiles={Object.keys(files)} />

src/content/community/conferences.md

@@ -70,6 +70,22 @@ July 17-19, 2024. In-person in Portland, OR, USA
 
 [Site web](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
 
+### The Geek Conf 2024 {/*the-geek-conf-2024*/}
+July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Site web](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
+
+### React Universe Conf 2024 {/*react-universe-conf-2024*/}
+September 5-6, 2024. Wrocław, Poland.
+
+[Site web](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
+
+### React Alicante 2024 {/*react-alicante-2024*/}
+September 19-21, 2024. Alicante, Spain.
+
+[Site web](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+
+
 ### React India 2024 {/*react-india-2024*/}
 October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
 

src/content/community/team.md

@@ -22,8 +22,8 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     Andrey a commencé sa carrière comme designer pour progressivement passer au développement web.  Après avoir rejoint l'équipe React Data chez Meta, il a travaillé à ajouter un compilateur incrémental JavaScript dans Relay… pour finir par le retirer plus tard.  Hors du boulot, Andrey aime jouer de la musique et faire divers types de sports.
 </TeamMember>
 
-<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Ingénieur chez Meta">
-    Dans a commencé à programmer lorsqu'il a découvert par hasard qu'il y avait Visual Basic dans Microsoft Powerpoint.  Il a découvert que sa véritable vocation consistait à transformer les tweets de [Sebastian](#sebastian-markbåge) en billets de blog interminables. Dan gagne parfois à Fortnite en se cachant dans un buisson jusqu'à la fin de la partie.
+<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Ingénieur indépendant">
+    Dan a commencé à programmer lorsqu'il a découvert par hasard qu'il y avait Visual Basic dans Microsoft Powerpoint.  Il a découvert que sa véritable vocation consistait à transformer les tweets de [Sebastian](#sebastian-markbåge) en billets de blog interminables. Dan gagne parfois à Fortnite en se cachant dans un buisson jusqu'à la fin de la partie.
 </TeamMember>
 
 <TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" threads="elicwhite" title="Manager d’ingénieurs chez Meta">

src/content/learn/choosing-the-state-structure.md

@@ -557,8 +557,6 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-(Vous pouvez également garder l’index sélectionné dans l’état.)
-
 L’état était dupliqué de cette façon :
 
 * `items = [{ id: 0, title: 'pretzels'}, ...]`

src/content/reference/react-dom/hooks/useFormStatus.md

@@ -185,47 +185,32 @@ import {useFormStatus} from 'react-dom';
 export default function UsernameForm() {
   const {pending, data} = useFormStatus();
 
-  const [showSubmitted, setShowSubmitted] = useState(false);
-  const submittedUsername = useRef(null);
-  const timeoutId = useRef(null);
-
-  useMemo(() => {
-    if (pending) {
-      submittedUsername.current = data?.get('username');
-      if (timeoutId.current != null) {
-        clearTimeout(timeoutId.current);
-      }
-
-      timeoutId.current = setTimeout(() => {
-        timeoutId.current = null;
-        setShowSubmitted(false);
-      }, 2000);
-      setShowSubmitted(true);
-    }
-  }, [pending, data]);
-
   return (
-    <>
-      <label>Réserver l’identifiant : </label><br />
-      <input type="text" name="username" />
+    <div>
+      <h3>Réserver l’identifiant : </h3><br />
+      <input type="text" name="username" disabled={pending} />
       <button type="submit" disabled={pending}>
-        {pending ? 'Envoi en cours...' : 'Envoyer'}
+        Envoyer'}
       </button>
-      {showSubmitted ? (
-        <p>Demande en cours pour l’identifiant : {submittedUsername.current}</p>
-      ) : null}
-    </>
+      <br />
+      <p>{data ? `Récupération de ${data?.get('username')}...` : ''}</p>
+    </div>
   );
 }
 ```
 
 ```js src/App.js
 import UsernameForm from './UsernameForm';
 import { submitForm } from "./actions.js";
+import { useRef } from 'react';
 
 export default function App() {
+  const ref = useRef(null);
   return (
-    <form action={submitForm}>
+    <form ref={ref} action={async (formData) => {
+      await submitForm(formData);
+      ref.current.reset();
+    }}>
       <UsernameForm />
     </form>
   );
@@ -234,8 +219,22 @@ export default function App() {
 
 ```js src/actions.js hidden
 export async function submitForm(query) {
-    await new Promise((res) => setTimeout(res, 1000));
+    await new Promise((res) => setTimeout(res, 2000));
+}
+```
+
+```css
+p {
+    height: 14px;
+    padding: 0;
+    margin: 2px 0 0 0 ;
+    font-size: 14px
+}
+
+button {
+    margin-left: 2px;
 }
+
 ```
 
 ```json package.json hidden

src/content/reference/react-dom/server/renderToNodeStream.md

@@ -13,7 +13,7 @@ Cette API sera retirée d'une future version majeure de React. Utilisez plutôt
 `renderToNodeStream` fait le rendu d'un arbre React dans un [flux Node.js en lecture](https://nodejs.org/api/stream.html#readable-streams).
 
 ```js
-const stream = renderToNodeStream(reactNode)
+const stream = renderToNodeStream(reactNode, options?)
 ```
 
 </Intro>
@@ -24,7 +24,7 @@ const stream = renderToNodeStream(reactNode)
 
 ## Référence {/*reference*/}
 
-### `renderToNodeStream(reactNode)` {/*rendertonodestream*/}
+### `renderToNodeStream(reactNode, options?)` {/*rendertonodestream*/}
 
 Côté serveur, appelez `renderToNodeStream` pour obtenir un [flux Node.js en lecture](https://nodejs.org/api/stream.html#readable-streams) que vous pouvez connecter *(pipe, NdT)* vers la réponse.
 

src/content/reference/react-dom/server/renderToStaticMarkup.md

@@ -7,7 +7,7 @@ title: renderToStaticMarkup
 `renderToStaticMarkup` produit le HTML non interactif d'un arbre React.
 
 ```js
-const html = renderToStaticMarkup(reactNode)
+const html = renderToStaticMarkup(reactNode, options?)
 ```
 
 </Intro>
@@ -18,7 +18,7 @@ const html = renderToStaticMarkup(reactNode)
 
 ## Référence {/*reference*/}
 
-### `renderToStaticMarkup(reactNode)` {/*rendertostaticmarkup*/}
+### `renderToStaticMarkup(reactNode, options?)` {/*rendertostaticmarkup*/}
 
 Côté serveur, appelez `renderToStaticMarkup` pour produire le HTML de votre appli.
 

src/content/reference/react-dom/server/renderToStaticNodeStream.md

@@ -7,7 +7,7 @@ title: renderToStaticNodeStream
 `renderToStaticNodeStream` fait le rendu non interactif d'une arborescence React dans un [flux Node.js en lecture](https://nodejs.org/api/stream.html#readable-streams).
 
 ```js
-const stream = renderToStaticNodeStream(reactNode)
+const stream = renderToStaticNodeStream(reactNode, options?)
 ```
 
 </Intro>
@@ -18,7 +18,7 @@ const stream = renderToStaticNodeStream(reactNode)
 
 ## Référence {/*reference*/}
 
-### `renderToStaticNodeStream(reactNode)` {/*rendertostaticnodestream*/}
+### `renderToStaticNodeStream(reactNode, options?)` {/*rendertostaticnodestream*/}
 
 Côté serveur, appelez `renderToStaticNodeStream` pour obtenir un [flux Node.js en lecture](https://nodejs.org/api/stream.html#readable-streams).
 

src/content/reference/react-dom/server/renderToString.md

@@ -13,7 +13,7 @@ title: renderToString
 `renderToString` fait le rendu d'un arbre React sous forme de texte HTML.
 
 ```js
-const html = renderToString(reactNode)
+const html = renderToString(reactNode, options?)
 ```
 
 </Intro>
@@ -24,7 +24,7 @@ const html = renderToString(reactNode)
 
 ## Référence {/*reference*/}
 
-### `renderToString(reactNode)` {/*rendertostring*/}
+### `renderToString(reactNode, options?)` {/*rendertostring*/}
 
 Côté serveur, appelez `renderToString` pour produire le HTML de votre appli.