Merge pull request #611 from reactjs/sync-a8790ca8

Sync with react.dev @ a8790ca

Author: tdd

public/images/docs/diagrams/use_client_module_dependency.dark.png

@@ -58,13 +58,13 @@ export interface RouteMeta {
   order?: number;
 }
 
-type TravesalContext = RouteMeta & {
+type TraversalContext = RouteMeta & {
   currentIndex: number;
 };
 
 export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
   const breadcrumbs = getBreadcrumbs(cleanedPath, routeTree);
-  const ctx: TravesalContext = {
+  const ctx: TraversalContext = {
     currentIndex: 0,
   };
   buildRouteMeta(cleanedPath, routeTree, ctx);
@@ -79,7 +79,7 @@ export function getRouteMeta(cleanedPath: string, routeTree: RouteItem) {
 function buildRouteMeta(
   searchPath: string,
   currentRoute: RouteItem,
-  ctx: TravesalContext
+  ctx: TraversalContext
 ) {
   ctx.currentIndex++;
 

public/images/docs/diagrams/use_client_module_dependency.png

@@ -72,12 +72,11 @@ Le noyau du compilateur est presque entièrement découplé de Babel, et l'API n
 
 Lors des refontes du compilateur de ces derniers mois, nous nous sommes concentrés sur l'affinage du modèle noyau de compilation pour garantir que nous pouvions gérer des complexités telles que les conditionnels, les boucles, la réaffectation et les mutations.  Ceci dit, JavaScript offre de nombreuses manières d'exprimer chacun de ces points : `if`/`else`, les ternaires, `for`, `for-in`, `for-of`, etc.  Si nous avions voulu prendre en charge l'intégralité du langage d'entrée de jeu, nous aurions trop retardé le point de validation du modèle noyau.  Nous avons choisi de plutôt commencer avec un sous-ensemble représentatif du language : `let`/`const`, `if`/`else`, les boucles `for`, les objets, les tableaux, les primitives, les appels de fonctions et quelques autres fonctionnalités.  Au fur et à mesure que nous gagnions en confiance dans notre modèle noyau et que nous en affinions les abstractions internes, nous avons étendu le sous-ensemble pris en charge.  Nous indiquons de façon explicite les parties de la syntaxe que nous ne prenons pas encore en charge, en maintenant des journaux de diagnostic et en sautant la compilation des sources non prises en charge.  Nous avons des utilitaires pour essayer le compilateur sur les bases de code de Meta et voir quels aspects non encore pris en charge sont les plus couramment utilisés, pour prioriser les évolutions à venir.  Nous allons continuer à étendre progressivement tout ça jusqu'à prendre en charge l'intégralité du langage.
 
-
 Pour permettre à du code JavaScript classique d'être réactif dans des composants React, il faut que le compilateur ait une compréhension profonde de sa sémantique pour déterminer précisément ce que fait ce code.  En adoptant cette approche, nous avons créé un système de réactivité en JavaScript qui vous permet d'écrire du code métier de quelque complexité que ce soit, en bénéficiant de la pleine expressivité du langage, plutôt que de vous limiter à un langage taillé sur-mesure.
 
 ## Rendu hors-écran {/*offscreen-rendering*/}
 
-Le rendu hors-écran *(offscreen rendering, NdT)* désigne la possibilité prochaine pour React de calculer les rendus de vos écrans en arrière-plan, sans nuire aux performances.  Vous pouvez y penser comme à une variation de la [propriété CSS `content-visiblity`](https://developer.mozilla.org/fr/docs/Web/CSS/content-visibility), qui ne fonctionnerait pas seulement pour les éléments du DOM mais aussi pour les composants React.  Au fil de nos recherches, nous avons découvert plusieurs scénarios d'utilisation :
+Le rendu hors-écran *(offscreen rendering, NdT)* désigne la possibilité prochaine pour React de calculer les rendus de vos écrans en arrière-plan, sans nuire aux performances.  Vous pouvez y penser comme à une variation de la [propriété CSS `content-visibility`](https://developer.mozilla.org/fr/docs/Web/CSS/content-visibility), qui ne fonctionnerait pas seulement pour les éléments du DOM mais aussi pour les composants React.  Au fil de nos recherches, nous avons découvert plusieurs scénarios d'utilisation :
 
 - Un routeur pourrait précalculer le rendu d'écrans en arrière-plan pour que lorsque l'utilisateur navigue vers l'un d'eux, il soit immédiatement disponible.
 - Un composant d'onglets pourrait préserver l'état d'onglets masqués, pour que lorsque l'utilisateur rebascule dessus, il ne perde pas sa progression.

public/images/docs/diagrams/use_client_render_tree.dark.png

@@ -635,7 +635,7 @@ class Form extends Component {
     return (
       <>
         <input value={this.state.name} onChange={this.handleNameChange} />
-        <p>Salut {this.state.name}.
+        <p>Salut {this.state.name}.</p>
       </>
     );
   }

public/images/docs/diagrams/use_client_render_tree.png

@@ -19,5 +19,5 @@ Les directives fournissent des instructions à destination des [*bundlers* compa
 
 ## Directives dans le code source {/*source-code-directives*/}
 
-* [`'use client'`](/reference/react/use-client) marque les fichiers sources dont les composants s'exécutent côté client.
+* [`'use client'`](/reference/react/use-client) vous permet d'indiquer quel code est exécuté côté client.
 * [`'use server'`](/reference/react/use-server) marque les fonctions côté serveur qui peuvent être appelées par du code côté client.

src/components/Layout/getRouteMeta.tsx

@@ -0,0 +1,140 @@
+---
+title: "Hooks fournis par React"
+---
+
+<Intro>
+
+Les *Hooks* vous permettent d’utiliser différentes fonctionnalités de React au sein de vos composants. Vous pouvez utiliser les Hooks pré-fournis ou les associer pour créer les vôtres. Cette page liste tout les Hooks fournis par React.
+
+</Intro>
+
+---
+
+## Hooks d’état local {/*state-hooks*/}
+
+*L’état local* permet à un composant de [« se souvenir » d’informations telles que des saisies utilisateur](/learn/state-a-components-memory). Par exemple, un composant formulaire peut utiliser l’état local pour stocker la valeur saisie, alors qu’un composant de galerie d’images pourra l’utiliser pour stocker l’index de l’image affichée.
+
+Pour ajouter un état local à un composant, utilisez un de ces Hooks :
+
+* [`useState`](/reference/react/useState) déclare un état local que vous pouvez mettre à jour directement.
+* [`useReducer`](/reference/react/useReducer) déclare un état local dont la logique de mise à jour réside dans une [fonction réducteur](/learn/extracting-state-logic-into-a-reducer).
+
+```js
+function ImageGallery() {
+  const [index, setIndex] = useState(0);
+  // ...
+```
+
+---
+
+## Hooks de Contexte {/*context-hooks*/}
+
+Le *Contexte* permet à un composant [de recevoir des informations de parents éloignés sans avoir à passer par ses props](/learn/passing-props-to-a-component). Par exemple, le composant de niveau racine de votre appli peut passer le thème de l’interface utilisateur (UI) à tous les composants qu’elle contient, à quelque profondeur que ce soit.
+
+* [`useContext`](/reference/react/useContext) s’abonne à un contexte et le lit.
+
+```js
+function Button() {
+  const theme = useContext(ThemeContext);
+  // ...
+```
+
+---
+
+## Hooks de Ref {/*ref-hooks*/}
+
+Les *Refs* permettent à un composant [de conserver certaines informations qui ne sont pas utilisées pour faire le rendu](/learn/referencing-values-with-refs), comme un nœud DOM ou un ID de timer. Contrairement à l’état local, la mise à jour d’une Ref ne déclenche pas un nouveau rendu de votre composant. Les Refs sont une « échappatoire » du paradigme de React. Elles sont utiles lorsque vous devez travailler avec des systèmes externes à React, telles que les API du navigateur web.
+
+* [`useRef`](/reference/react/useRef) déclare une Ref. Vous pouvez y stocker n’importe quelle valeur, mais elle est le plus souvent utilisée pour référencer un nœud du DOM.
+
+* [`useImperativeHandle`](/reference/react/useImperativeHandle) vous permet de personnaliser la Ref exposée par votre composant. Ce Hook est rarement utilisé.
+
+```js
+function Form() {
+  const inputRef = useRef(null);
+  // ...
+```
+
+---
+
+## Hooks d’effets {/*effect-hooks*/}
+
+Les *Effets* permettent à un composant [de se connecter et de se synchroniser avec des systèmes extérieurs](/learn/synchronizing-with-effects). Il peut notamment s’agir du réseau, du DOM, des animations, d’éléments d’interface écrits en utilisant une autre bibliothèque, et d’autres codes non React.
+
+* [`useEffect`](/reference/react/useEffect) connecte un composant à un système extérieur.
+
+```js
+function ChatRoom({ roomId }) {
+  useEffect(() => {
+    const connection = createConnection(roomId);
+    connection.connect();
+    return () => connection.disconnect();
+  }, [roomId]);
+  // ...
+```
+
+Les Effets sont une « échappatoire » du paradigme de React. N’utilisez pas les Effets pour orchestrer le flux de données de votre application. Si vous n’interagissez pas avec un système extérieur, [vous n’avez pas forcément besoin d’un Effet](/learn/you-might-not-need-an-effect).
+
+Il existe deux variantes rarement utilisées de `useEffect` avec des différences de timing :
+
+* [`useLayoutEffect`](/reference/react/useLayoutEffect) se déclenche avant que le navigateur ne repeigne l’écran. Vous pouvez y mesurer la mise en page, notamment les dimensions.
+* [`useInsertionEffect`](/reference/react/useInsertionEffect) se déclenche avant que React ne fasse des changements dans le DOM. Les bibliothèques peuvent y insérer des CSS dynamiques.
+
+---
+
+## Les Hooks de performance {/*performance-hooks*/}
+
+Une manière courante d’optimiser la performance de réaffichage consiste à s’épargner des tâches superflues. Par exemple, vous pouvez demander à React de réutiliser un calcul mis en cache ou d’éviter un nouveau rendu si la donnée n’a pas changé depuis le rendu précédent.
+
+Pour éviter les calculs coûteux et les réaffichages inutiles, utilisez l’un de ces Hooks :
+
+* [`useMemo`](/reference/react/useMemo) vous permet de mettre en cache le résultat d’un calcul coûteux.
+* [`useCallback`](/reference/react/useCallback) vous permet de mettre en cache la définition d’une fonction avant de la passer à un composant optimisé.
+
+```js
+function TodoList({ todos, tab, theme }) {
+  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
+  // ...
+}
+```
+
+Parfois, vous ne pouvez pas éviter le réaffichage parce que la vue doit effectivement être mise à jour. Dans ce cas, vous pouvez améliorer la performance en séparant les mises à jour bloquantes qui doivent être synchrones (comme la gestion d’une saisie dans un champ) des mises à jour non bloquantes, qui ne gèlent  pas le traitement de l’interface (comme la mise à jour d’un graphique).
+
+Pour établir des priorités de rendu, utilisez un de ces Hooks :
+
+* [`useTransition`](/reference/react/useTransition) permet de marquer une transition d’état local comme non bloquante ce qui autorise d’autres mises à jour à l’interrompre.
+* [`useDeferredValue`](/reference/react/useDeferredValue) vous permet de différer la mise à jour d’une partie non critique de l’UI et de laisser les autres parties se mettre à jour en premier.
+
+---
+
+## Les Hooks de gestion de ressources {/*resource-hooks*/}
+
+Un composant peut accéder à des *ressources* sans qu'elles fassent partie de son état. Un composant peut par exemple lire un message depuis une promesse, ou lire des informations de styles depuis un contexte.
+
+Pour lire une valeur depuis une ressource, utilisez ce Hook :
+
+- [`use`](/reference/react/use) vous permet de lire une valeur depuis une ressource telle qu'une [promesse](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) (`Promise`) ou un [contexte](/learn/passing-data-deeply-with-context).
+
+```js
+function MessageComponent({ messagePromise }) {
+  const message = use(messagePromise);
+  const theme = use(ThemeContext);
+  // ...
+}
+```
+
+---
+
+## Autres Hooks {/*other-hooks*/}
+
+Ces Hooks sont majoritairement utiles aux auteur·e·s de bibliothèque et ne sont pas couramment utilisés dans du code applicatif.
+
+* [`useDebugValue`](/reference/react/useDebugValue) vous permet de personnaliser le libellé que les outils de développement React affichent pour votre propre Hook.
+* [`useId`](/reference/react/useId) permet à un composant de s’associer un ID unique. Généralement utilisé avec les API d’accessibilité.
+* [`useSyncExternalStore`](/reference/react/useSyncExternalStore) permet à un composant de s’abonner à une source de données extérieure.
+
+---
+
+## Vos propres Hooks {/*your-own-hooks*/}
+
+Vous pouvez [définir vos propres Hooks personnalisés](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) au moyen de fonctions JavaScript.