You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
7
+
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.
8
8
9
9
</Intro>
10
10
11
11
---
12
12
13
13
## Hooks d'état local {/*state-hooks*/}
14
14
15
-
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.
15
+
*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.
16
16
17
-
Pour ajouter l'état local à un composant, utilisez un de ces Hooks:
17
+
Pour ajouter un état local à un composant, utilisez un de ces Hooks:
18
18
19
19
*[`useState`](/reference/react/useState) déclare une variable d'état local que vous pouvez mettre à jour directement.
20
-
*[`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)
20
+
*[`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).
21
21
22
22
```js
23
23
functionImageGallery() {
@@ -29,9 +29,9 @@ function ImageGallery() {
29
29
30
30
## Hooks de Contexte {/*context-hooks*/}
31
31
32
-
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.
32
+
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.
33
33
34
-
* [`useContext`](/reference/react/useContext) lit et s'abonne à un contexte.
34
+
* [`useContext`](/reference/react/useContext) s'abonne à un contexte et le lit.
35
35
36
36
```js
37
37
functionButton() {
@@ -43,11 +43,11 @@ function Button() {
43
43
44
44
## Hooks de Ref {/*ref-hooks*/}
45
45
46
-
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.
46
+
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.
47
47
48
-
* [`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.
48
+
* [`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.
49
49
50
-
* [`useImperativeHandle`](/reference/react/useImperativeHandle) vous permet de personnaliser le ref exposé par votre composant. ceci est rarement utilisé.
50
+
* [`useImperativeHandle`](/reference/react/useImperativeHandle) vous permet de personnaliser la Ref exposée par votre composant. Ce Hook est rarement utilisé.
51
51
52
52
```js
53
53
functionForm() {
@@ -57,11 +57,11 @@ function Form() {
57
57
58
58
---
59
59
60
-
## Hooks d'effet {/*effect-hooks*/}
60
+
## Hooks d'effets {/*effect-hooks*/}
61
61
62
-
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.
62
+
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.
63
63
64
-
* [`useEffect`](/reference/react/useEffect) connecte un composant à un système externe.
64
+
* [`useEffect`](/reference/react/useEffect) connecte un composant à un système extérieur.
65
65
66
66
```js
67
67
functionChatRoom({ roomId }) {
@@ -73,23 +73,23 @@ function ChatRoom({ roomId }) {
73
73
// ...
74
74
```
75
75
76
-
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)
76
+
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).
77
77
78
78
Il existe deux variantes rarement utilisées de `useEffect` avec des différences de timing :
79
79
80
-
* [`useLayoutEffect`](/reference/react/useLayoutEffect) se déclenche avant que le navigateur ne repeigne l'écran. Vous pouvez mesurer la mise en page ici.
81
-
* [`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.
80
+
* [`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.
81
+
* [`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.
82
82
83
83
---
84
84
85
85
## Les Hooks de performance {/*performance-hooks*/}
86
86
87
-
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.
87
+
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.
88
88
89
-
Pour éviter les calculs coûteux et les réaffichages inutiles, utilisez l'un de ces Hooks:
89
+
Pour éviter les calculs coûteux et les réaffichages inutiles, utilisez l’un de ces Hooks:
90
90
91
91
- [`useMemo`](/reference/react/useMemo) vous permet de mettre en cache le résultat d'un calcul coûteux.
92
-
- [`useCallback`](/reference/react/useCallback) Vous permet de mettre en cache la création d'une fonction avant de la passer à un composant optimisé.
92
+
- [`useCallback`](/reference/react/useCallback) vous permet de mettre en cache la définition d’une fonction avant de la passer à un composant optimisé.
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).
101
+
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).
102
102
103
-
Pour établir un ordre de priorité d'affichage, utilisez un de ces Hooks:
103
+
Pour établir des priorités de rendu, utilisez un de ces Hooks:
104
104
105
-
- [`useTransition`](/reference/react/useTransition) permet de marquer une transition d'état local comme non bloquante et d'autoriser d'autres mises à jour à l'interrompre.
106
-
- [`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.
105
+
- [`useTransition`](/reference/react/useTransition) permet de marquer une transition d'état local comme non bloquante ce qui autorise d'autres mises à jour à l'interrompre.
106
+
- [`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.
107
107
108
108
---
109
109
110
110
## Autres Hooks {/*other-hooks*/}
111
111
112
-
Ces Hooks sont majoritairement utiles aux auteurs de bibliothèque et ne sont pas couramment utilisés dans le code de l'application.
112
+
Ces Hooks sont majoritairement utiles aux auteur·e·s de bibliothèque et ne sont pas couramment utilisés dans du code applicatif.
113
113
114
-
- [`useDebugValue`](/reference/react/useDebugValue) vous permet de personnaliser le titre que React Devtools affiche pour votre Hook personnalisé.
115
-
- [`useId`](/reference/react/useId) permet à un composant de s'associer lui-même à un ID unique. Géneralement avec les accessibilités des APIs.
116
-
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) permet à un composant de s'abonner à une source de données externe.
114
+
- [`useDebugValue`](/reference/react/useDebugValue) vous permet de personnaliser le libellé que React Devtools affiche pour votre Hook personnalisé.
115
+
- [`useId`](/reference/react/useId) permet à un composant de s'associer un ID unique. Généralement utilisé avec les API d’accessibilité.
116
+
- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) permet à un composant de s'abonner à une source de données extérieure.
117
117
118
118
---
119
119
120
120
## Vos propres Hooks {/*your-own-hooks*/}
121
121
122
-
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.
122
+
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.
0 commit comments