From 1f1d931166816ff4e5a41244bb49b70c5d03bb94 Mon Sep 17 00:00:00 2001 From: emmadal Date: Mon, 1 May 2023 01:34:01 +0000 Subject: [PATCH 1/3] react:Hooks index page translation --- src/content/reference/react/index.md | 75 ++++++++++++++-------------- 1 file changed, 38 insertions(+), 37 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 650a1c382..8445ae2b7 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -1,23 +1,23 @@ --- -title: "Built-in React Hooks" +title: "Hooks intégrés à React" --- -*Hooks* let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own. This page lists all built-in Hooks in React. +Les *Hooks* vous permettent d'utiliser différentes fonctionnalités de React dans vos composants. Vous pouvez utiliser les Hooks intégrés ou les associer pour créer les vôtres. Cette page liste tout les Hooks intégrés à React. --- -## State Hooks {/*state-hooks*/} +## Hooks d'état local {/*state-hooks*/} -*State* lets a component ["remember" information like user input.](/learn/state-a-components-memory) For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index. +L'*État local* permet à un composant ["de se souvenir" des informations fournies par l'utilisateur.](/learn/state-a-components-memory) Par exemple, un formulaire composant peut utiliser l'état local pour enregister la valeur de saisie, alors qu'un composant de galerie d'image peut utiliser l'état local pour enregister l'index de l'image. -To add state to a component, use one of these Hooks: +Pour ajouter l'état local à un composant, utilisez un de ces Hooks: -* [`useState`](/reference/react/useState) declares a state variable that you can update directly. -* [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer) +* [`useState`](/reference/react/useState) déclare une variable d'état local que vous pouvez mettre à jour directement. +* [`useReducer`](/reference/react/useReducer) déclare une variable d'état local avec une logique de mise à jour dans une [fonction réducteur.](/learn/extracting-state-logic-into-a-reducer) ```js function ImageGallery() { @@ -27,11 +27,11 @@ function ImageGallery() { --- -## Context Hooks {/*context-hooks*/} +## Hooks de Contexte {/*context-hooks*/} -*Context* lets a component [receive information from distant parents without passing it as props.](/learn/passing-props-to-a-component) For example, your app's top-level component can pass the current UI theme to all components below, no matter how deep. +Le *Contexte* permet à un composant [de recevoir les informations des parents éloignés sans avoir à les passer comme des props.](/learn/passing-props-to-a-component) Par exemple, le composant de niveau supérieur de votre appli peut véritablement passer le thème de l'interface utilisateur à tous ses composants inférieurs, peut importe la profondeur. -* [`useContext`](/reference/react/useContext) reads and subscribes to a context. +* [`useContext`](/reference/react/useContext) lit et s'abonne à un contexte. ```js function Button() { @@ -41,12 +41,13 @@ function Button() { --- -## Ref Hooks {/*ref-hooks*/} +## Hooks de Ref {/*ref-hooks*/} -*Refs* let a component [hold some information that isn't used for rendering,](/learn/referencing-values-with-refs) like a DOM node or a timeout ID. Unlike with state, updating a ref does not re-render your component. Refs are an "escape hatch" from the React paradigm. They are useful when you need to work with non-React systems, such as the built-in browser APIs. +le *Refs* permet à un composant [de contenir certaines informations qui ne sont pas utilisés pour faire le rendu,](/learn/referencing-values-with-refs) comme un nœud DOM ou un ID de délai d'attente. Contrairement à l'état local, la mise à jour d'un ref n'entraine pas de faire à nouveau le rendu de votre composant. les Refs sont une "issue de secours" du paradigme de React. Ils sont utiles lorsque vous devez travailler avec des systèmes qui ne sont pas des systèmes React, telles que les APIs intégrées du navigateur web. -* [`useRef`](/reference/react/useRef) declares a ref. You can hold any value in it, but most often it's used to hold a DOM node. -* [`useImperativeHandle`](/reference/react/useImperativeHandle) lets you customize the ref exposed by your component. This is rarely used. +* [`useRef`](/reference/react/useRef) déclare un ref. Vous pouvez placer n'importe quelle valeur, mais le plus souvent il est utilisé pour contenir un nœud DOM. + +* [`useImperativeHandle`](/reference/react/useImperativeHandle) vous permet de personnaliser le ref exposé par votre composant. ceci est rarement utilisé. ```js function Form() { @@ -56,11 +57,11 @@ function Form() { --- -## Effect Hooks {/*effect-hooks*/} +## Hooks d'effet {/*effect-hooks*/} -*Effects* let a component [connect to and synchronize with external systems.](/learn/synchronizing-with-effects) This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code. +Les *Effets* permettent à un composant [de se connecter et de se synchroniser avec des systèmes externes.](/learn/synchronizing-with-effects) Il s'agit de gérer le réseau, le DOM du navigateur, les animations, les élements d'interface écrit en utilisant une bibliothèque d'interface utilisateur différente et les codes non React. -* [`useEffect`](/reference/react/useEffect) connects a component to an external system. +* [`useEffect`](/reference/react/useEffect) connecte un composant à un système externe. ```js function ChatRoom({ roomId }) { @@ -72,23 +73,23 @@ function ChatRoom({ roomId }) { // ... ``` -Effects are an "escape hatch" from the React paradigm. Don't use Effects to orchestrate the data flow of your application. If you're not interacting with an external system, [you might not need an Effect.](/learn/you-might-not-need-an-effect) +Les Effets sont une "issue de secours" du paradigme de React. N'utilisez pas les Effets pour orchestrer le flux de données de votre application. Si vous n'intéragissez pas avec un système externe, [Vous n'avez pas besoin d'un Effet.](/learn/you-might-not-need-an-effect) -There are two rarely used variations of `useEffect` with differences in timing: +Il existe deux variantes rarement utilisées de `useEffect` avec des différences de timing : -* [`useLayoutEffect`](/reference/react/useLayoutEffect) fires before the browser repaints the screen. You can measure layout here. -* [`useInsertionEffect`](/reference/react/useInsertionEffect) fires before React makes changes to the DOM. Libraries can insert dynamic CSS here. +* [`useLayoutEffect`](/reference/react/useLayoutEffect) se déclenche avant que le navigateur ne repeigne l'écran. Vous pouvez mesurer la mise en page ici. +* [`useInsertionEffect`](/reference/react/useInsertionEffect) se déclenche avant que React ne fasse des changements dans le DOM. Les bibliothèques peuvent insérer du CSS dynamique ici. --- -## Performance Hooks {/*performance-hooks*/} +## Les Hooks de performance {/*performance-hooks*/} -A common way to optimize re-rendering performance is to skip unnecessary work. For example, you can tell React to reuse a cached calculation or to skip a re-render if the data has not changed since the previous render. +La manière courante d'optimiser la performance de réaffichage est d'éviter les tâches inutiles. Par exemple, vous pouvez demander à React de réutiliser la valeur mise en cache ou d'éviter un réaffichage si la donnée n'a pas changé depuis l'affichage précedent. -To skip calculations and unnecessary re-rendering, use one of these Hooks: +Pour éviter les calculs coûteux et les réaffichages inutiles, utilisez l'un de ces Hooks: -- [`useMemo`](/reference/react/useMemo) lets you cache the result of an expensive calculation. -- [`useCallback`](/reference/react/useCallback) lets you cache a function definition before passing it down to an optimized component. +- [`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 création d'une fonction avant de la passer à un composant optimisé. ```js function TodoList({ todos, tab, theme }) { @@ -97,25 +98,25 @@ function TodoList({ todos, tab, theme }) { } ``` -Sometimes, you can't skip re-rendering because the screen actually needs to update. In that case, you can improve performance by separating blocking updates that must be synchronous (like typing into an input) from non-blocking updates which don't need to block the user interface (like updating a chart). +Parfois, vous ne pouvez pas éviter le réaffichage parce que la vue actuelle doit être mis à jour. Dans ce cas, vous pouvez améliorer la performance en séparant les mises à jour bloquantes qui sont synchrones (comme si vous tapiez dans un champ de saisie) aux mises à jour non bloquantes qui ne bloquent pas l'interface utilisateur (mise à jour d'une carte). -To prioritize rendering, use one of these Hooks: +Pour établir un ordre de priorité d'affichage, utilisez un de ces Hooks: -- [`useTransition`](/reference/react/useTransition) lets you mark a state transition as non-blocking and allow other updates to interrupt it. -- [`useDeferredValue`](/reference/react/useDeferredValue) lets you defer updating a non-critical part of the UI and let other parts update first. +- [`useTransition`](/reference/react/useTransition) permet de marquer une transition d'état local comme non bloquante et d'autoriser 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'interface utilisateur et de laisser les autres parties se mettre à jour en premier. --- -## Other Hooks {/*other-hooks*/} +## Autres Hooks {/*other-hooks*/} -These Hooks are mostly useful to library authors and aren't commonly used in the application code. +Ces Hooks sont majoritairement utiles aux auteurs de bibliothèque et ne sont pas couramment utilisés dans le code de l'application. -- [`useDebugValue`](/reference/react/useDebugValue) lets you customize the label React DevTools displays for your custom Hook. -- [`useId`](/reference/react/useId) lets a component associate a unique ID with itself. Typically used with accessibility APIs. -- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) lets a component subscribe to an external store. +- [`useDebugValue`](/reference/react/useDebugValue) vous permet de personnaliser le titre que React Devtools affiche pour votre Hook personnalisé. +- [`useId`](/reference/react/useId) permet à un composant de s'associer lui-même à un ID unique. Géneralement avec les accessibilités des APIs. +- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) permet à un composant de s'abonner à une source de données externe. --- -## Your own Hooks {/*your-own-hooks*/} +## Vos propres Hooks {/*your-own-hooks*/} -You can also [define your own custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) as JavaScript functions. +Vous pouvez [définir vos propres Hooks personnalisés](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component) comme des fonctions Javascript. From a42a6b35bdf6ff591c2d2f06e759db870e11f91b Mon Sep 17 00:00:00 2001 From: emmadal Date: Sat, 6 May 2023 14:18:33 +0000 Subject: [PATCH 2/3] apply suggestion of translation --- src/content/reference/react/index.md | 56 ++++++++++++++-------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 8445ae2b7..25ccf7a8d 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -1,10 +1,10 @@ --- -title: "Hooks intégrés à React" +title: "Hooks fournis par React" --- -Les *Hooks* vous permettent d'utiliser différentes fonctionnalités de React dans vos composants. Vous pouvez utiliser les Hooks intégrés ou les associer pour créer les vôtres. Cette page liste tout les Hooks intégrés à React. +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. @@ -12,12 +12,12 @@ Les *Hooks* vous permettent d'utiliser différentes fonctionnalités de React da ## Hooks d'état local {/*state-hooks*/} -L'*État local* permet à un composant ["de se souvenir" des informations fournies par l'utilisateur.](/learn/state-a-components-memory) Par exemple, un formulaire composant peut utiliser l'état local pour enregister la valeur de saisie, alors qu'un composant de galerie d'image peut utiliser l'état local pour enregister l'index de l'image. +*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 l'état local à un composant, utilisez un de ces Hooks: +Pour ajouter un état local à un composant, utilisez un de ces Hooks : * [`useState`](/reference/react/useState) déclare une variable d'état local que vous pouvez mettre à jour directement. -* [`useReducer`](/reference/react/useReducer) déclare une variable d'état local avec une logique de mise à jour dans une [fonction réducteur.](/learn/extracting-state-logic-into-a-reducer) +* [`useReducer`](/reference/react/useReducer) déclare une variable d'é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() { @@ -29,9 +29,9 @@ function ImageGallery() { ## Hooks de Contexte {/*context-hooks*/} -Le *Contexte* permet à un composant [de recevoir les informations des parents éloignés sans avoir à les passer comme des props.](/learn/passing-props-to-a-component) Par exemple, le composant de niveau supérieur de votre appli peut véritablement passer le thème de l'interface utilisateur à tous ses composants inférieurs, peut importe la profondeur. +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) lit et s'abonne à un contexte. +* [`useContext`](/reference/react/useContext) s'abonne à un contexte et le lit. ```js function Button() { @@ -43,11 +43,11 @@ function Button() { ## Hooks de Ref {/*ref-hooks*/} -le *Refs* permet à un composant [de contenir certaines informations qui ne sont pas utilisés pour faire le rendu,](/learn/referencing-values-with-refs) comme un nœud DOM ou un ID de délai d'attente. Contrairement à l'état local, la mise à jour d'un ref n'entraine pas de faire à nouveau le rendu de votre composant. les Refs sont une "issue de secours" du paradigme de React. Ils sont utiles lorsque vous devez travailler avec des systèmes qui ne sont pas des systèmes React, telles que les APIs intégrées du navigateur web. +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 un ref. Vous pouvez placer n'importe quelle valeur, mais le plus souvent il est utilisé pour contenir un nœud DOM. +* [`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 le ref exposé par votre composant. ceci est rarement utilisé. +* [`useImperativeHandle`](/reference/react/useImperativeHandle) vous permet de personnaliser la Ref exposée par votre composant. Ce Hook est rarement utilisé. ```js function Form() { @@ -57,11 +57,11 @@ function Form() { --- -## Hooks d'effet {/*effect-hooks*/} +## Hooks d'effets {/*effect-hooks*/} -Les *Effets* permettent à un composant [de se connecter et de se synchroniser avec des systèmes externes.](/learn/synchronizing-with-effects) Il s'agit de gérer le réseau, le DOM du navigateur, les animations, les élements d'interface écrit en utilisant une bibliothèque d'interface utilisateur différente et les codes non React. +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 externe. +* [`useEffect`](/reference/react/useEffect) connecte un composant à un système extérieur. ```js function ChatRoom({ roomId }) { @@ -73,23 +73,23 @@ function ChatRoom({ roomId }) { // ... ``` -Les Effets sont une "issue de secours" du paradigme de React. N'utilisez pas les Effets pour orchestrer le flux de données de votre application. Si vous n'intéragissez pas avec un système externe, [Vous n'avez pas besoin d'un Effet.](/learn/you-might-not-need-an-effect) +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 mesurer la mise en page ici. -* [`useInsertionEffect`](/reference/react/useInsertionEffect) se déclenche avant que React ne fasse des changements dans le DOM. Les bibliothèques peuvent insérer du CSS dynamique ici. +* [`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*/} -La manière courante d'optimiser la performance de réaffichage est d'éviter les tâches inutiles. Par exemple, vous pouvez demander à React de réutiliser la valeur mise en cache ou d'éviter un réaffichage si la donnée n'a pas changé depuis l'affichage précedent. +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: +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 création d'une fonction avant de la passer à un composant optimisé. +- [`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 }) { @@ -98,25 +98,25 @@ function TodoList({ todos, tab, theme }) { } ``` -Parfois, vous ne pouvez pas éviter le réaffichage parce que la vue actuelle doit être mis à jour. Dans ce cas, vous pouvez améliorer la performance en séparant les mises à jour bloquantes qui sont synchrones (comme si vous tapiez dans un champ de saisie) aux mises à jour non bloquantes qui ne bloquent pas l'interface utilisateur (mise à jour d'une carte). +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 un ordre de priorité d'affichage, utilisez un de ces Hooks: +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 et d'autoriser 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'interface utilisateur et de laisser les autres parties se mettre à jour en premier. +- [`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. --- ## Autres Hooks {/*other-hooks*/} -Ces Hooks sont majoritairement utiles aux auteurs de bibliothèque et ne sont pas couramment utilisés dans le code de l'application. +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 titre que React Devtools affiche pour votre Hook personnalisé. -- [`useId`](/reference/react/useId) permet à un composant de s'associer lui-même à un ID unique. Géneralement avec les accessibilités des APIs. -- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) permet à un composant de s'abonner à une source de données externe. +- [`useDebugValue`](/reference/react/useDebugValue) vous permet de personnaliser le libellé que React Devtools affiche pour votre Hook personnalisé. +- [`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) comme des fonctions Javascript. +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. From 1f0e215c8e275b38f232ccf385c12ef3094c84e9 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Sat, 6 May 2023 15:32:19 +0100 Subject: [PATCH 3/3] copy: final review pass for Hooks ref index --- src/content/reference/react/index.md | 40 ++++++++++++++-------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index 25ccf7a8d..c004e080a 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -4,20 +4,20 @@ title: "Hooks fournis par React" -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. +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. --- -## Hooks d'état local {/*state-hooks*/} +## 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. +*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 une variable d'état local que vous pouvez mettre à jour directement. -* [`useReducer`](/reference/react/useReducer) déclare une variable d'état local dont la logique de mise à jour réside dans une [fonction réducteur](/learn/extracting-state-logic-into-a-reducer). +* [`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() { @@ -29,9 +29,9 @@ function ImageGallery() { ## 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. +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. +* [`useContext`](/reference/react/useContext) s’abonne à un contexte et le lit. ```js function Button() { @@ -43,7 +43,7 @@ function Button() { ## 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. +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. @@ -57,9 +57,9 @@ function Form() { --- -## Hooks d'effets {/*effect-hooks*/} +## 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. +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. @@ -73,22 +73,22 @@ function ChatRoom({ 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). +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. +* [`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. +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. +- [`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 @@ -98,12 +98,12 @@ function TodoList({ todos, tab, theme }) { } ``` -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). +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. +- [`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. --- @@ -111,9 +111,9 @@ Pour établir des priorités de rendu, utilisez un de ces 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 React Devtools affiche pour votre Hook personnalisé. -- [`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. +- [`useDebugValue`](/reference/react/useDebugValue) vous permet de personnaliser le libellé que React Devtools affiche 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. ---