Merge pull request #641 from reactjs/sync-97489434

Sync with react.dev @ 9748943

Author: tdd

CONTRIBUTING.md

@@ -79,6 +79,7 @@ Ignore this rule if you're specifically describing an experimental proposal. Mak
 - Use semicolons.
 - No space between function names and parens (`method() {}` not `method () {}`).
 - When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
+- Always capitalize React concepts such as Hooks, Effects, and Transitions.
 
 ### Highlighting
 

package.json

@@ -97,7 +97,7 @@
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "engines": {
-    "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
+    "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
   },
   "nextBundleAnalysis": {
     "budget": null,

public/images/team/jack-pope.jpg

@@ -16,6 +16,7 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
 * [Andreas Svensson](https://github.com/syranide)
 * [Alex Krolick](https://github.com/alexkrolick)
 * [Alexey Pyltsyn](https://github.com/lex111)
+* [Andrey Lunyov](https://github.com/alunyov)
 * [Brandon Dail](https://github.com/aweary)
 * [Brian Vaughn](https://github.com/bvaughn)
 * [Caleb Meredith](https://github.com/calebmer)

src/content/community/acknowledgements.md

@@ -18,10 +18,6 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     Andrew a commencé le développement web en faisant des sites avec Wordpress, puis il a fini par se persuader de faire du JavaScript.  Son passe-temps favori est le karaoké.  Selon son humeur du jour, Andrew est soit un méchant Disney, soit une princesse Disney.
 </TeamMember>
 
-<TeamMember name="Andrey Lunyov" permalink="andrey-lunyov" photo="/images/team/andrey-lunyov.jpg" github="alunyov" twitter="alunyov" threads="alunyov" title="Ingénieur chez Meta">
-    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_abramov2" 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>
@@ -30,6 +26,10 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     Eli a commencé la programmation après avoir été suspendu au collège pour piratage.  Il travaille sur React et React Native depuis 2017. Il aime manger des sucreries, en particulier les crèmes glacées et la tarte aux pommes. Vous le trouverez généralement en train d'essayer des trucs un peu fous comme le parkour, les simulateurs de chute libre ou la danse aérienne sur rubans de soie.
 </TeamMember>
 
+<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Ingénieur chez Meta">
+    Peut après avoir découvert AutoHotkey, Jack écrivait des scripts pour automatiser tout ce à quoi il pouvait penser.  Lorsqu'il a atteint les limites de l'exercice, il s'est plongé dans le développement web et n'a jamais regardé en arrière.  Dernièrement, Jack a travaillé sur la plateforme web d'Instagram, avant de migrer vers React.  Son langage de programmation préféré est JSX.
+</TeamMember>
+
 <TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Manager d’ingénieurs chez Meta">
     Jason aime faire livrer des tonnes de paquets Amazon au boulot pour pouvoir se construire des forts. Bien qu'il se soit parfois littéralement cloisonné de son équipe, et même s'il ne comprend pas comment fonctionne une boucle for-of, on l'aime pour les qualités uniques qu'il met dans son travail.
 </TeamMember>
@@ -74,7 +74,7 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     Sébastien a étudié la psychologie. Il est généralement silencieux. Même lorsqu'il dit quelque chose, ça ne finit par avoir du sens pour le reste d'entre nous que quelques mois plus tard.  La véritable pronconciation de son nom de famille est « marc-bau-jai », mais il a fini par tolérer « marc-beige » par pur pragmatisme — une approche qu'il applique aussi à React.
 </TeamMember>
 
-<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Ingénieur indépendant">
+<TeamMember name="Sebastian Silbermann" permalink="sebastian-silbermann" photo="/images/team/sebsilbermann.jpg" github="eps1lon" twitter="sebsilbermann" threads="sebsilbermann" title="Ingénieur chez Vercel">
     Sebastian a appris à programmer pour améliorer les jeux auxquels il jouait en cours dans son navigateur. Ça l'a amené à contribuer à énormément de code en logiciel libre. Lorsqu'il n'est pas en train de coder, il est très occupé à s'assurer qu'on ne le confond pas avec les autres Sebastian et Zilberman de la communauté React.
 </TeamMember>
 

src/content/community/team.md

@@ -453,7 +453,7 @@ Nous vous conseillons les ressources suivantes *(toutes en anglais, NdT)* :
 
  - [Le handbook TypeScript](https://www.typescriptlang.org/docs/handbook/) est la documentation officielle du langage et couvre tous les aspects importants.
 
- - [Les notes de versions de TypeScript](https://devblogs.microsoft.com/typescript/) présentent chaque nouvelle fonctionnalité en détails.
+ - [Les notes de versions de TypeScript](https://devblogs.microsoft.com/typescript/) présentent les nouvelles fonctionnalités en détails.
 
  - [L'antisèche React TypeScript](https://react-typescript-cheatsheet.netlify.app/) est une antisèche synthétique maintenue par la communauté pour utiliser TypeScript avec React, qui couvre pas mal de cas à la marge et aborde plus de sujets que cette page.
 

src/content/learn/typescript.md

@@ -52,7 +52,7 @@ La plupart du temps, vous devriez éviter `flushSync`. Ne l'utilisez qu'en derni
 
 * `flushSync` peut nuire fortement aux performances. Ne l'utilisez qu'avec parcimonie.
 * `flushSync` peut forcer des périmètres Suspense en attente à afficher leur contenu de secours.
-* `flushSync` peut exécuter des effets en attente et appliquer leurs mises à jour d'état de façon synchrone avant de terminer.
+* `flushSync` peut exécuter des Effets en attente et appliquer leurs mises à jour d'état de façon synchrone avant de terminer.
 * `flushSync` peut traiter des mises à jour d'état en attente demandées hors de la fonction de rappel si celles-ci sont nécessaires aux mises à jour demandées dans la fonction de rappel. Par exemple, si certaines mises à jour sont en attente suite à un clic, React risque de devoir les traiter avant de traiter celles issues de la fonction de rappel.
 
 ---

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

@@ -54,7 +54,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime
 #### Paramètres {/*onrender-parameters*/}
 
 * `id` : la prop textuelle `id` du `<Profiler>` qui vient de boucler son rendu. Elle vous permet d’identifier quelle partie de l’arbre est finalisée lorsque vous utilisez plusieurs profileurs.
-* `phase` : `"mount"`, `"update"` ou `"nested-update"`. Ça vous permet de savoir si l’arbre vient d’être monté pour la première fois ou a fait un nouveau rendu suite à un changement dans les props, l’état ou les hooks.
+* `phase` : `"mount"`, `"update"` ou `"nested-update"`. Ça vous permet de savoir si l’arbre vient d’être monté pour la première fois ou a fait un nouveau rendu suite à un changement dans les props, l’état ou les Hooks.
 * `actualDuration` : la durée en millisecondes du rendu du `<Profiler>` et de ses enfants pour la mise à jour concernée. Ça indique à quel point vos descendants profitent de la mémoïsation (notamment [`memo`](/reference/react/memo) et [`useMemo`](/reference/react/useMemo)). Idéalement, cette valeur devrait décroître de façon significative après le montage initial car la plupart des descendants ne referont un rendu que si leurs props changent.
 * `baseDuration` : une estimation de la durée en millisecondes que prendrait un rendu complet du `<Profiler>` et de ses descendants, sans aucune optimisation. Elle est calculée en ajoutant les durées de rendu les plus récentes de chaque composant concerné. Cette valeur représente le coût maximal de rendu (c’est-à-dire le temps initial de montage sans mémoïsation). Comparez-la avec `actualDuration` pour déterminer si la mémoïsation fonctionne.
 * `startTime` : un horodatage numérique du début de la mise à jour par React.

src/content/reference/react/Profiler.md

@@ -196,14 +196,16 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
   border: 1px solid #aaa;
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;
@@ -283,14 +285,16 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
   border: 1px solid #aaa;
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;
@@ -377,14 +381,16 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
   border: 1px solid #aaa;
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;
@@ -467,14 +473,16 @@ ul {
   margin: 0;
   list-style-type: none;
   height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px;
 }
 
 li {
   border: 1px solid #aaa;
   border-radius: 6px;
   float: left;
   margin: 5px;
-  margin-bottom: 20px;
   padding: 5px;
   width: 70px;
   height: 100px;

src/content/reference/react/StrictMode.md

@@ -1362,7 +1362,7 @@ input { margin: 10px; }
 
 <Note>
 
-Les valeurs différées ainsi que les [transitions](#preventing-already-revealed-content-from-hiding) vous permettent d'éviter d'afficher le contenu de secours Suspense en lui préférant une indication de chargement.  Les transitions marquent l'ensemble de leur mise à jour comme non urgente, elles sont donc généralement utilisées par les frameworks et les bibliothèques de routage pour la navigation.  Les valeurs différées sont elles surtout utiles dans du code applicatif lorsque vous souhaitez indiquer qu'une partie de l'UI est non urgente, pour lui permettre d'être temporairement « en retard » sur le reste de l'UI.
+Les valeurs différées ainsi que les [Transitions](#preventing-already-revealed-content-from-hiding) vous permettent d'éviter d'afficher le contenu de secours Suspense en lui préférant une indication de chargement.  Les transitions marquent l'ensemble de leur mise à jour comme non urgente, elles sont donc généralement utilisées par les frameworks et les bibliothèques de routage pour la navigation.  Les valeurs différées sont elles surtout utiles dans du code applicatif lorsque vous souhaitez indiquer qu'une partie de l'UI est non urgente, pour lui permettre d'être temporairement « en retard » sur le reste de l'UI.
 
 </Note>
 
@@ -1745,7 +1745,7 @@ main {
 
 Quand vous avez appuyé sur le bouton, le composant `Router` a affiché `ArtistPage` au lieu de `IndexPage`. Un composant au sein d'`ArtistPage` a suspendu, du coup le plus proche périmètre Suspense a basculé sur son contenu de secours. Comme ce périmètre était proche de la racine, la mise en page complète du site a été remplacée par `BigSpinner`.
 
-Pour éviter ça, vous pouvez indiquer que la mise à jour de l'état de navigation est une *transition*, en utilisant [`startTransition`](/reference/react/startTransition) :
+Pour éviter ça, vous pouvez indiquer que la mise à jour de l'état de navigation est une *Transition*, en utilisant [`startTransition`](/reference/react/startTransition) :
 
 ```js {5,7}
 function Router() {
@@ -1759,7 +1759,7 @@ function Router() {
   // ...
 ```
 
-Ça dit à React que cette transition d'état n'est pas urgente, et qu'il est préférable de continuer à afficher la page précédente plutôt que de masquer du contenu déjà révélé.  À présent cliquer sur le bouton « attend » que `Biography` soit chargé :
+Ça dit à React que cette Transition d'état n'est pas urgente, et qu'il est préférable de continuer à afficher la page précédente plutôt que de masquer du contenu déjà révélé.  À présent cliquer sur le bouton « attend » que `Biography` soit chargé :
 
 <Sandpack>
 
@@ -2134,19 +2134,19 @@ main {
 
 </Sandpack>
 
-Une transition n'attend pas que *tout* le contenu soit chargé. Elle attend seulement assez longtemps pour éviter d'avoir à masquer du contenu déjà révélé. Par exemple, le `Layout` du site était déjà révélé, ce serait donc dommage de le masquer derrière un *spinner* de chargement.  En revanche, le périmètre `Suspense` imbriqué autour d'`Albums` est nouveau, la transition ne l'attend donc pas.
+Une Transition n'attend pas que *tout* le contenu soit chargé. Elle attend seulement assez longtemps pour éviter d'avoir à masquer du contenu déjà révélé. Par exemple, le `Layout` du site était déjà révélé, ce serait donc dommage de le masquer derrière un *spinner* de chargement.  En revanche, le périmètre `Suspense` imbriqué autour d'`Albums` est nouveau, la Transition ne l'attend donc pas.
 
 <Note>
 
-Les routeurs compatibles Suspense sont censés enrober par défaut leurs navigations dans des transitions.
+Les routeurs compatibles Suspense sont censés enrober par défaut leurs navigations dans des Transitions.
 
 </Note>
 
 ---
 
-### Indiquer qu'une transition est en cours {/*indicating-that-a-transition-is-happening*/}
+### Indiquer qu'une Transition est en cours {/*indicating-that-a-transition-is-happening*/}
 
-Dans l'exemple précédent, une fois que vous avez cliqué sur le bouton, aucune indication visuelle ne vous informe qu'une navigation est en cours. Pour ajouter une indication, vous pouvez remplacer [`startTransition`](/reference/react/startTransition) par [`useTransition`](/reference/react/useTransition), qui vous donne une valeur booléenne `isPending`. Dans l'exemple qui suit, on l'utilise pour modifier le style de l'en-tête du site pendant qu'une transition est en cours :
+Dans l'exemple précédent, une fois que vous avez cliqué sur le bouton, aucune indication visuelle ne vous informe qu'une navigation est en cours. Pour ajouter une indication, vous pouvez remplacer [`startTransition`](/reference/react/startTransition) par [`useTransition`](/reference/react/useTransition), qui vous donne une valeur booléenne `isPending`. Dans l'exemple qui suit, on l'utilise pour modifier le style de l'en-tête du site pendant qu'une Transition est en cours :
 
 <Sandpack>
 
@@ -2527,13 +2527,13 @@ main {
 
 ### Réinitialiser les périmètres Suspense à la navigation {/*resetting-suspense-boundaries-on-navigation*/}
 
-Pendant une transition, React évitera de masquer du contenu déjà révélé. Ceci dit, lorsque vous naviguez vers une route aux paramètres différents, vous voudrez peut-être indiquer à React que le contenu est *différent*.  Vous pouvez exprimer ça avec une `key` :
+Pendant une Transition, React évitera de masquer du contenu déjà révélé. Ceci dit, lorsque vous naviguez vers une route aux paramètres différents, vous voudrez peut-être indiquer à React que le contenu est *différent*.  Vous pouvez exprimer ça avec une `key` :
 
 ```js
 <ProfilePage key={queryParams.id} />
 ```
 
-Imaginez que vous naviguiez au sein d'une page de profil utilisateur, et que quelque chose suspende.  Si cette mise à jour est enrobée dans une transition, elle ne déclenchera pas de contenu de secours pour le contenu déjà visible.  C'est bien le comportement attendu.
+Imaginez que vous naviguiez au sein d'une page de profil utilisateur, et que quelque chose suspende.  Si cette mise à jour est enrobée dans une Transition, elle ne déclenchera pas de contenu de secours pour le contenu déjà visible.  C'est bien le comportement attendu.
 
 En revanche, imaginez maintenant que vous naviguiez entre deux profils utilisateurs différents.  Dans ce cas, afficher le contenu de secours aurait du sens. Par exemple, le fil des publications d'un utilisateur constitue un *contenu différent* de celui d'un autre utilisateur.  En spécifiant une `key`, vous garantissez que React traitera les fils de publications d'utilisateurs différents comme des composants différents, et réinitialisera les périmètres Suspense lors de la navigation.  Les routeurs compatibles Suspense sont censés le faire automatiquement.
 
@@ -2570,7 +2570,7 @@ Le HTML produit par le serveur incluera l'indicateur de chargement. Il sera ensu
 
 Le remplacement d'une UI visible par un contenu de secours produit une expérience utilisateur désagréable.  Ça peut arriver lorsqu'une mise à jour entraîne la suspension d'un composant, et que le périmètre Suspense le plus proche affiche déjà du contenu à l'utilisateur.
 
-Pour empêcher ça, [indiquez que la mise à jour est non urgente grâce à `startTransition`](#preventing-already-revealed-content-from-hiding). Pendant la transition, React attendra jusqu'à ce qu'assez de données aient été chargées, afin d'éviter l'affichage d'un contenu de secours indésirable :
+Pour empêcher ça, [indiquez que la mise à jour est non urgente grâce à `startTransition`](#preventing-already-revealed-content-from-hiding). Pendant la Transition, React attendra jusqu'à ce qu'assez de données aient été chargées, afin d'éviter l'affichage d'un contenu de secours indésirable :
 
 ```js {2-3,5}
 function handleNextPageClick() {

src/content/reference/react/Suspense.md

@@ -29,6 +29,14 @@ React-DOM comprend les fonctionnalités qui ne sont prises en charge que pour le
 * [Fonctions côté client](/reference/react-dom/client) - L'API dans `react-dom/client` vous permet d'effectuer le rendu de composants React côté client (dans le navigateur).
 * [Fonctions côté serveur](/reference/react-dom/server) - L'API dans `react-dom/server` vous permet d'effectuer le rendu de composants React côté serveur, vers du HTML.
 
+## Les règles de React {/*rules-of-react*/}
+
+React repose sur des idiomes — ou règles — visant à exprimer vos approches de façon facile à comprendre, et à même de produire des applications de grande qualité :
+
+* [Les composants et les Hooks doivent être purs](/reference/rules/components-and-hooks-must-be-pure) – Cette pureté facilite la compréhension de votre code ainsi que son débogage, et permet à React d'optimiser automatiquement et correctement vos composants et Hooks.
+* [React appelle les composants et les Hooks](/reference/rules/react-calls-components-and-hooks) – React est responsable du rendu des composants et des Hooks de façon à optimiser l'expérience utilisateur.
+* [Les règles des Hooks](/reference/rules/rules-of-hooks) – Les Hooks reposent sur de simples fonctions JavaScript, mais ils représentent un type spécifique de logique UI réutilisable, et ne peuvent être appelés que dans des circonstances bien précises.
+
 ## API React historique {/*legacy-apis*/}
 
 * [API React historique](/reference/react/legacy) - Ces fonctions sont présentes dans le module `react`, mais leur utilisation est découragée pour tout nouveau code.