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
*Hooks*are a new addition in React 16.8. They let you use state and other React features without writing a class.
9
+
Les *Hooks*sont arrivés avec React 16.8. Ils vous permettent de bénéficier d’un état local et d'autres fonctionnalités de React sans avoir à écrire une classe.
10
10
11
-
Hooks are JavaScript functions, but you need to follow two rules when using them. We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)to enforce these rules automatically:
11
+
Les Hooks sont des fonctions JavaScript, mais vous devez suivre deux règles lorsque vous les utilisez. Nous mettons à votre disposition un [plugin de *linter*](https://www.npmjs.com/package/eslint-plugin-react-hooks)pour vérifier ces règles automatiquement :
12
12
13
-
### Only Call Hooks at the Top Level {#only-call-hooks-at-the-top-level}
13
+
### Appelez les Hooks uniquement au niveau racine {#only-call-hooks-at-the-top-level}
14
14
15
-
**Don't call Hooks inside loops, conditions, or nested functions.**Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple `useState`and`useEffect` calls. (If you're curious, we'll explain this in depth [below](#explanation).)
15
+
**N'appelez pas de Hooks à l'intérieur de boucles, de code conditionnel ou de fonctions imbriquées.**Au lieu de ça, utilisez seulement les Hooks au niveau racine de votre fonction React. En suivant cette règle, vous garantissez que les Hooks sont appelés dans le même ordre à chaque affichage du composant. C'est ce qui permet à React de garantir le bon état des Hooks entre plusieurs appels à `useState`et`useEffect`. (Si vous êtes curieux·se, nous expliquerons ça en détail [plus bas](#explanation).)
16
16
17
-
### Only Call Hooks from React Functions {#only-call-hooks-from-react-functions}
17
+
### Appelez les Hooks uniquement depuis des fonctions React {#only-call-hooks-from-react-functions}
18
18
19
-
**Don't call Hooks from regular JavaScript functions.**Instead, you can:
19
+
**N'appelez pas les Hooks depuis des fonctions JavaScript classiques.**Vous pouvez en revanche :
20
20
21
-
* ✅ Call Hooks from React function components.
22
-
* ✅ Call Hooks from custom Hooks (we'll learn about them [on the next page](/docs/hooks-custom.html)).
21
+
* ✅ Appeler les Hooks depuis des fonctions composants React.
22
+
* ✅ Appeler les Hooks depuis des Hooks personnalisés (nous aborderons le sujet [dans la prochaine page](/docs/hooks-custom.html)).
23
23
24
-
By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
24
+
En suivant cette règle, vous garantissez que toute la logique d’état d’un composant est clairement identifiable dans son code source.
25
25
26
-
## ESLint Plugin {#eslint-plugin}
26
+
## Plugin ESLint {#eslint-plugin}
27
27
28
-
We released an ESLint plugin called [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)that enforces these two rules. You can add this plugin to your project if you'd like to try it:
28
+
Nous avons publié un plugin ESLint appelé [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)qui assure le respect de ces deux règles. Vous pouvez ajouter ce plugin à votre projet si vous souhaitez l'utiliser :
In the future, we intend to include this plugin by default into Create React App and similar toolkits.
48
+
À l’avenir, nous comptons inclure ce plugin par défaut dans Create React App et d'autres boîtes à outils similaires.
49
49
50
-
**You can skip to the next page explaining how to write [your own Hooks](/docs/hooks-custom.html) now.**On this page, we'll continue by explaining the reasoning behind these rules.
50
+
**Vous pouvez maintenant passer directement à la prochaine page, qui explique comment écrire [vos propres Hooks](/docs/hooks-custom.html).**Dans cette page, nous allons maintenant expliquer le raisonnement qui se cache derrière ces règles.
51
51
52
-
## Explanation {#explanation}
52
+
## Explications {#explanation}
53
53
54
-
As we [learned earlier](/docs/hooks-state.html#tip-using-multiple-state-variables), we can use multiple State or Effect Hooks in a single component:
54
+
Comme nous l'avons [appris plus tôt](/docs/hooks-state.html#tip-using-multiple-state-variables), nous pouvons utiliser plusieurs Hooks *State* ou *Effect* au sein d'un même composant :
55
55
56
56
```js
57
57
functionForm() {
58
-
// 1. Use the name state variable
58
+
// 1. Utilise la variable d'état name
59
59
const [name, setName] =useState('Mary');
60
60
61
-
// 2. Use an effect for persisting the form
61
+
// 2. Utilise un effet pour persister le formulaire
62
62
useEffect(functionpersistForm() {
63
63
localStorage.setItem('formData', name);
64
64
});
65
65
66
-
// 3. Use the surname state variable
66
+
// 3. Utilise la variable d'état surname
67
67
const [surname, setSurname] =useState('Poppins');
68
68
69
-
// 4. Use an effect for updating the title
69
+
// 4. Utilise un effet pour mettre à jour le titre
70
70
useEffect(functionupdateTitle() {
71
71
document.title= name +''+ surname;
72
72
});
@@ -75,63 +75,63 @@ function Form() {
75
75
}
76
76
```
77
77
78
-
So how does React know which state corresponds to which `useState` call? The answer is that **React relies on the order in which Hooks are called**. Our example works because the order of the Hook calls is the same on every render:
78
+
Alors, comment React sait-il quel état correspond à quel appel à `useState` ? Réponse : **React se repose sur l'ordre dans lequel les Hooks sont appelés**. Notre exemple fonctionne car l'ordre d'appel des Hooks est le même à chaque affichage :
79
79
80
80
```js
81
81
// ------------
82
-
//First render
82
+
//Premier affichage
83
83
// ------------
84
-
useState('Mary') // 1. Initialize the name state variable with 'Mary'
85
-
useEffect(persistForm) // 2. Add an effect for persisting the form
86
-
useState('Poppins') // 3. Initialize the surname state variable with 'Poppins'
87
-
useEffect(updateTitle) // 4. Add an effect for updating the title
84
+
useState('Mary') // 1. Initialise la variable d'état name avec 'Mary'
85
+
useEffect(persistForm) // 2. Ajoute un effet pour persister le formulaire
86
+
useState('Poppins') // 3. Initialise la variable d'état surname avec 'Poppins'
87
+
useEffect(updateTitle) // 4. Ajoute un effet pour mettre à jour le titre
88
88
89
89
// -------------
90
-
//Second render
90
+
//Deuxième affichage
91
91
// -------------
92
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
93
-
useEffect(persistForm) // 2. Replace the effect for persisting the form
94
-
useState('Poppins') // 3. Read the surname state variable (argument is ignored)
95
-
useEffect(updateTitle) // 4. Replace the effect for updating the title
92
+
useState('Mary') // 1. Lit la variable d'état name (l'argument est ignoré)
93
+
useEffect(persistForm) // 2. Remplace l'effet pour persister le formulaire
94
+
useState('Poppins') // 3. Lit la variable d'état surname (l'argument est ignoré)
95
+
useEffect(updateTitle) // 4. Remplace l'effet pour mettre à jour le titre
96
96
97
97
// ...
98
98
```
99
99
100
-
As long as the order of the Hook calls is the same between renders, React can associate some local state with each of them. But what happens if we put a Hook call (for example, the`persistForm` effect) inside a condition?
100
+
Tant que l'ordre d'appel aux Hooks est le même d’un affichage à l’autre, React peut associer un état local à chacun d'entre eux. Mais que se passerait-il si nous appelions un Hook (par exemple, l'effet`persistForm`) de façon conditionnelle ?
101
101
102
102
```js
103
-
// 🔴 We're breaking the first rule by using a Hook in a condition
103
+
// 🔴 Nous enfreignons la première règle en utilisant un Hook de façon conditionnelle
104
104
if (name !=='') {
105
105
useEffect(functionpersistForm() {
106
106
localStorage.setItem('formData', name);
107
107
});
108
108
}
109
109
```
110
110
111
-
The `name !== ''`condition is `true` on the first render, so we run this Hook. However, on the next render the user might clear the form, making the condition `false`. Now that we skip this Hook during rendering, the order of the Hook calls becomes different:
111
+
La condition `name !== ''`est vraie au premier affichage, donc nous exécutons ce Hook. Cependant, lors du prochain affichage l'utilisateur risque de vider le formulaire, ce qui invalidera la condition. À présent que nous sautons ce Hook lors de l’affichage, l'ordre d'appel aux Hooks devient différent :
112
112
113
113
```js
114
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
115
-
// useEffect(persistForm) // 🔴 This Hook was skipped!
116
-
useState('Poppins') // 🔴 2 (but was 3). Fail to read the surname state variable
117
-
useEffect(updateTitle) // 🔴 3 (but was 4). Fail to replace the effect
114
+
useState('Mary') // 1. Lit la variable d'état name (l'argument est ignoré)
115
+
// useEffect(persistForm) // 🔴 Ce Hook n'a pas été appelé !
116
+
useState('Poppins') // 🔴 2. (mais était 3). Échoue à lire la variable d'état surname
117
+
useEffect(updateTitle) // 🔴 3. (mais était 4). Échoue à remplacer de l'effet
118
118
```
119
119
120
-
React wouldn't know what to return for the second `useState`Hook call. React expected that the second Hook call in this component corresponds to the `persistForm` effect, just like during the previous render, but it doesn't anymore. From that point, every next Hook call after the one we skipped would also shift by one, leading to bugs.
120
+
React ne saurait pas quoi renvoyer lors du second appel au Hook `useState`. React s'attendait à ce que le deuxième appel à un Hook dans ce composant corresponde à l'effet `persistForm`, comme lors de l’affichage précédent, mais ce n'est plus le cas. A partir de là, chaque appel à un Hook ultérieur à celui que nous avons sauté sera aussi décalé de un, provoquant des bugs.
121
121
122
-
**This is why Hooks must be called on the top level of our components.**If we want to run an effect conditionally, we can put that condition *inside* our Hook:
122
+
**C'est pourquoi les Hooks doivent être appelés au niveau racine de vos composants.**Si vous voulez exécuter un effet de manière conditionnelle, vous pouvez mettre cette condition *à l'intérieur* de votre Hook:
123
123
124
124
```js
125
125
useEffect(functionpersistForm() {
126
-
// 👍 We're not breaking the first rule anymore
126
+
// 👍 Nous n’enfreignons plus la première règle
127
127
if (name !=='') {
128
128
localStorage.setItem('formData', name);
129
129
}
130
130
});
131
131
```
132
132
133
-
**Note that you don't need to worry about this problem if you use the [provided lint rule](https://www.npmjs.com/package/eslint-plugin-react-hooks).**But now you also know *why*Hooks work this way, and which issues the rule is preventing.
133
+
**Remarquez que vous n’avez pas à vous inquiéter de ça si vous utilisez [le plugin de *linter* fourni](https://www.npmjs.com/package/eslint-plugin-react-hooks).**Mais maintenant, vous savez *pourquoi* les Hooks fonctionnent de cette manière et quels problèmes ces règles évitent.
134
134
135
-
## Next Steps {#next-steps}
135
+
## Prochaines étapes {#next-steps}
136
136
137
-
Finally, we're ready to learn about [writing your own Hooks](/docs/hooks-custom.html)! Custom Hooks let you combine Hooks provided by React into your own abstractions, and reuse common stateful logic between different components.
137
+
Enfin, nous sommes prêts pour apprendre à [écrire nos propres Hooks](/docs/hooks-custom.html) ! Les Hooks personnalisés vous permettent de combiner les Hooks fournis par React pour créer vos propres abstractions et réutiliser une logique d’état commune dans différents composants.
0 commit comments