From 6dc8297ddaa131084594a98ea56dc8b154d43c7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Mon, 18 Feb 2019 21:57:50 +0100 Subject: [PATCH 01/15] :globe_with_meridians: Translate "Rules of Hooks" into French --- content/docs/hooks-rules.md | 86 ++++++++++++++++++------------------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 698d1c741..6f043ed08 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -1,38 +1,38 @@ --- id: hooks-rules -title: Rules of Hooks +title: Les règles des Hooks permalink: docs/hooks-rules.html next: hooks-custom.html prev: hooks-effect.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +Les *Hooks* sont arrivés avec React 16.8. Ils vous permettent d'utiliser un état et d'autres fonctionnalités de React sans avoir à écrire une classe. -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: +Les Hooks sont des fonctions JavaScript, mais vous devez suivre deux règles lorsque vous les utilisez. Nous mettons à votre disposition un [plugin linter](https://www.npmjs.com/package/eslint-plugin-react-hooks) pour vérifier ces règles automatiquement : -### Only Call Hooks at the Top Level {#only-call-hooks-at-the-top-level} +### Appelez les Hooks uniquement en premier lieu {#only-call-hooks-at-the-top-level} -**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).) +**N'appelez pas de Hooks à l'intérieur de boucles, conditions ou de fonctions imbriquées.** À la place, utilisez seulement les Hooks en premier lieu dans votre fonction React. En suivant cette règle, vous assurez que les Hooks sont appelés dans le même ordre à chaque fois que le composant est rendu. C'est ce qui permet à React de garantir le bon état des Hooks entre plusieurs appels de `useState` et `useEffect`. (Si vous êtes curieux, nous expliquerons cela en détails [ci-dessous](#explanation).) -### Only Call Hooks from React Functions {#only-call-hooks-from-react-functions} +### Appelez les Hooks uniquement depuis des fonctions React {#only-call-hooks-from-react-functions} -**Don't call Hooks from regular JavaScript functions.** Instead, you can: +**N'appelez pas les Hooks depuis des fonctions JavaScript classiques.** À la place, vous pouvez : -* ✅ Call Hooks from React function components. -* ✅ Call Hooks from custom Hooks (we'll learn about them [on the next page](/docs/hooks-custom.html)). +* ✅ Appeler les Hooks depuis des fonctions composants React. +* ✅ Appeler les Hooks depuis des Hooks personnalisés (nous aborderons le sujet [à la page suivante](/docs/hooks-custom.html)). -By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code. +En suivant cette règle, vous assurez que toute la logique à états dans un composant est clairement visible depuis ses sources. -## ESLint Plugin {#eslint-plugin} +## Plugin linter {#eslint-plugin} -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: +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 : ```bash npm install eslint-plugin-react-hooks ``` ```js -// Your ESLint configuration +// Votre configuration ESLint { "plugins": [ // ... @@ -45,28 +45,28 @@ npm install eslint-plugin-react-hooks } ``` -In the future, we intend to include this plugin by default into Create React App and similar toolkits. +Dans le futur, nous avons l'intention d'inclure ce plugin par défaut dans Create React App et d'autres boîtes à outils similaires. -**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. +**Vous pouvez maintenant passer à la page expliquant comment écrire [vos propres Hooks](/docs/hooks-custom.html).** Sur cette page, nous allons continuer à expliquer le raisonnement qui se cache derrière ces règles. -## Explanation {#explanation} +## Explications {#explanation} -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: +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 : ```js function Form() { - // 1. Use the name state variable + // 1. Utilise la variable d'état name const [name, setName] = useState('Mary'); - // 2. Use an effect for persisting the form + // 2. Utilise un effect pour conserver le formulaire useEffect(function persistForm() { localStorage.setItem('formData', name); }); - // 3. Use the surname state variable + // 3. Utilise la variable d'état surname const [surname, setSurname] = useState('Poppins'); - // 4. Use an effect for updating the title + // 4. Utilise un effet pour mettre à jour le titre useEffect(function updateTitle() { document.title = name + ' ' + surname; }); @@ -75,32 +75,32 @@ function Form() { } ``` -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: +Alors, comment React sait quel état correspond à quel `useState`? La réponse est que **React 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 rendu : ```js // ------------ // First render // ------------ -useState('Mary') // 1. Initialize the name state variable with 'Mary' -useEffect(persistForm) // 2. Add an effect for persisting the form -useState('Poppins') // 3. Initialize the surname state variable with 'Poppins' -useEffect(updateTitle) // 4. Add an effect for updating the title +useState('Mary') // 1. Initialise la variable d'état name avec 'Mary' +useEffect(persistForm) // 2. Ajoute un effet pour conserver le formulaire +useState('Poppins') // 3. Initialise la variable d'état surname avec 'Poppins' +useEffect(updateTitle) // 4. Ajoute un effet pour mettre à jour le titre // ------------- // Second render // ------------- -useState('Mary') // 1. Read the name state variable (argument is ignored) -useEffect(persistForm) // 2. Replace the effect for persisting the form -useState('Poppins') // 3. Read the surname state variable (argument is ignored) -useEffect(updateTitle) // 4. Replace the effect for updating the title +useState('Mary') // 1. Lit la variable d'état name (l'argument est ignoré) +useEffect(persistForm) // 2. Remplace l'effet pour conserver le formulaire +useState('Poppins') // 3. Lit la variable d'état surname (l'argument est ignoré) +useEffect(updateTitle) // 4. Remplace l'effet pour mettre à jour le titre // ... ``` -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? +Tant que l'ordre d'appel aux Hooks est le même entre chaque rendu, React peut associer un état local à chacun d'entre eux. Mais que se passe-t-il si nous appelons un Hook (par exemple, l'effet `persistForm`) dans une condition ? ```js - // 🔴 We're breaking the first rule by using a Hook in a condition + // 🔴 Nous brisons la règle en utilisant un Hook dans une condition if (name !== '') { useEffect(function persistForm() { localStorage.setItem('formData', name); @@ -108,30 +108,30 @@ As long as the order of the Hook calls is the same between renders, React can as } ``` -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: +La condition `name !== ''` est `true` au premier rendu, donc nous exécutons le Hook. Cependant, lors du prochain rendu l'utilisateur pourrait vider le formulaire, ce qui aura pour effet de rendre la condition `false`. Maintenant que nous passons ce Hook lors du rendu, l'ordre d'appel aux Hooks devient différent : ```js -useState('Mary') // 1. Read the name state variable (argument is ignored) -// useEffect(persistForm) // 🔴 This Hook was skipped! -useState('Poppins') // 🔴 2 (but was 3). Fail to read the surname state variable -useEffect(updateTitle) // 🔴 3 (but was 4). Fail to replace the effect +useState('Mary') // 1. Lit la variable d'état name (l'argument est ignoré) +// useEffect(persistForm) // 🔴 Le Hook n'a pas été appelé ! +useState('Poppins') // 🔴 2 (mais était 3). Échoue lors de la lecture de la variable d'état surname +useEffect(updateTitle) // 🔴 3 (mais était 4). Échoue lors du remplacement de l'effet ``` -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. +React ne saurait quoi retourner lors du second appel au Hook `useState`. React s'attend à ce que le second appel à un Hook dans ce composant corresponde à l'effet `persistForm`, comme lors du rendu précédent, mais ce n'est plus le cas. A partir de là, chaque nouvel appel à un Hook suivant celui que nous avons passé, sera aussi décalé de un, provocant ainsi des bugs. -**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: +**C'est pourquoi les Hooks doivent être appelé en premier lieu dans vos composants.** Si vous voulez exécuter un effet de manière conditionelle, vous pouvez mettre cette condition *à l'intérieur* de votre Hook : ```js useEffect(function persistForm() { - // 👍 We're not breaking the first rule anymore + // 👍 Nous ne brisons plus la première règle if (name !== '') { localStorage.setItem('formData', name); } }); ``` -**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. +**Notez que vous ne devez pas vous inquiéter de ce problème si vous utilisez [la règle ESLint fournie](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 la règle prévient. -## Next Steps {#next-steps} +## Prochaines étapes {#next-steps} -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. +Enfin, nous sommes prêt pour apprendre à [écrire nos propres Hooks](/docs/hooks-custom.html) ! Les Hooks personnalisés vous permettent de combiner les Hooks fournis par React dans vos propres abstractions et réutiliser la logique à états commune à vos différents composants. From 7abb761136cd3bc0ab352411934f0bcd040e44d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Mon, 18 Feb 2019 22:07:06 +0100 Subject: [PATCH 02/15] =?UTF-8?q?:pencil2:=20Remplace=20"pr=C3=AAt=20pour?= =?UTF-8?q?=20apprendre"=20par=20"pr=C3=AAt=20=C3=A0=20apprendre"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 6f043ed08..f3e0475c5 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -134,4 +134,4 @@ React ne saurait quoi retourner lors du second appel au Hook `useState`. React s ## Prochaines étapes {#next-steps} -Enfin, nous sommes prêt pour apprendre à [écrire nos propres Hooks](/docs/hooks-custom.html) ! Les Hooks personnalisés vous permettent de combiner les Hooks fournis par React dans vos propres abstractions et réutiliser la logique à états commune à vos différents composants. +Enfin, nous sommes prêt à apprendre à [écrire nos propres Hooks](/docs/hooks-custom.html) ! Les Hooks personnalisés vous permettent de combiner les Hooks fournis par React dans vos propres abstractions et réutiliser la logique à états commune à vos différents composants. From 395472aa9f3c8cfa8a084ee61d573c206635ab75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Mon, 18 Feb 2019 22:09:49 +0100 Subject: [PATCH 03/15] =?UTF-8?q?:ok=5Fhand:=20Remplace=20"r=C3=A8gle=20es?= =?UTF-8?q?lint"=20par=20"r=C3=A8gle=20de=20lint"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index f3e0475c5..9aa19f568 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -130,7 +130,7 @@ React ne saurait quoi retourner lors du second appel au Hook `useState`. React s }); ``` -**Notez que vous ne devez pas vous inquiéter de ce problème si vous utilisez [la règle ESLint fournie](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 la règle prévient. +**Notez que vous ne devez pas vous inquiéter de ce problème si vous utilisez [la règle de lint fournie](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 la règle prévient. ## Prochaines étapes {#next-steps} From 7ed878d75e2009d7e2428b2e631440097935c0ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Mon, 18 Feb 2019 22:11:16 +0100 Subject: [PATCH 04/15] =?UTF-8?q?:ok=5Fhand:=20Remplace=20"la=20r=C3=A8gle?= =?UTF-8?q?=20pr=C3=A9vient"=20par=20"pr=C3=A9vient=20la=20r=C3=A8gle"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 9aa19f568..ae35a994c 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -130,7 +130,7 @@ React ne saurait quoi retourner lors du second appel au Hook `useState`. React s }); ``` -**Notez que vous ne devez pas vous inquiéter de ce problème si vous utilisez [la règle de lint fournie](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 la règle prévient. +**Notez que vous ne devez pas vous inquiéter de ce problème si vous utilisez [la règle de lint fournie](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 prévient la règle. ## Prochaines étapes {#next-steps} From 8fd6fe90d9aff7dd2d6698b986470b40221fb2eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Sat, 23 Feb 2019 12:40:17 +0100 Subject: [PATCH 05/15] :ok_hand: Traduit `top-level` en `premier niveau` --- content/docs/hooks-rules.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index ae35a994c..ea4db5660 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -10,9 +10,9 @@ Les *Hooks* sont arrivés avec React 16.8. Ils vous permettent d'utiliser un ét Les Hooks sont des fonctions JavaScript, mais vous devez suivre deux règles lorsque vous les utilisez. Nous mettons à votre disposition un [plugin linter](https://www.npmjs.com/package/eslint-plugin-react-hooks) pour vérifier ces règles automatiquement : -### Appelez les Hooks uniquement en premier lieu {#only-call-hooks-at-the-top-level} +### Appelez les Hooks uniquement au premier niveau {#only-call-hooks-at-the-top-level} -**N'appelez pas de Hooks à l'intérieur de boucles, conditions ou de fonctions imbriquées.** À la place, utilisez seulement les Hooks en premier lieu dans votre fonction React. En suivant cette règle, vous assurez que les Hooks sont appelés dans le même ordre à chaque fois que le composant est rendu. C'est ce qui permet à React de garantir le bon état des Hooks entre plusieurs appels de `useState` et `useEffect`. (Si vous êtes curieux, nous expliquerons cela en détails [ci-dessous](#explanation).) +**N'appelez pas de Hooks à l'intérieur de boucles, conditions ou de fonctions imbriquées.** À la place, utilisez seulement les Hooks au premier niveau de votre fonction React. En suivant cette règle, vous assurez que les Hooks sont appelés dans le même ordre à chaque fois que le composant est rendu. C'est ce qui permet à React de garantir le bon état des Hooks entre plusieurs appels de `useState` et `useEffect`. (Si vous êtes curieux, nous expliquerons cela en détails [ci-dessous](#explanation).) ### Appelez les Hooks uniquement depuis des fonctions React {#only-call-hooks-from-react-functions} @@ -119,7 +119,7 @@ useEffect(updateTitle) // 🔴 3 (mais était 4). Échoue lors du remplaceme React ne saurait quoi retourner lors du second appel au Hook `useState`. React s'attend à ce que le second appel à un Hook dans ce composant corresponde à l'effet `persistForm`, comme lors du rendu précédent, mais ce n'est plus le cas. A partir de là, chaque nouvel appel à un Hook suivant celui que nous avons passé, sera aussi décalé de un, provocant ainsi des bugs. -**C'est pourquoi les Hooks doivent être appelé en premier lieu dans vos composants.** Si vous voulez exécuter un effet de manière conditionelle, vous pouvez mettre cette condition *à l'intérieur* de votre Hook : +**C'est pourquoi les Hooks doivent être appelé au premier niveau de vos composants.** Si vous voulez exécuter un effet de manière conditionelle, vous pouvez mettre cette condition *à l'intérieur* de votre Hook : ```js useEffect(function persistForm() { From 3d1686dfba7e3791c4ba93c6d58dd1d3e6eb95b2 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 28 Feb 2019 22:20:16 +0100 Subject: [PATCH 06/15] Update content/docs/hooks-rules.md Co-Authored-By: charlyx --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index ea4db5660..88075662d 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -6,7 +6,7 @@ next: hooks-custom.html prev: hooks-effect.html --- -Les *Hooks* sont arrivés avec React 16.8. Ils vous permettent d'utiliser un état et d'autres fonctionnalités de React sans avoir à écrire une classe. +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. Les Hooks sont des fonctions JavaScript, mais vous devez suivre deux règles lorsque vous les utilisez. Nous mettons à votre disposition un [plugin linter](https://www.npmjs.com/package/eslint-plugin-react-hooks) pour vérifier ces règles automatiquement : From 76a46d0029116c6746b63c385b4b25f650e6dc54 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 28 Feb 2019 22:20:37 +0100 Subject: [PATCH 07/15] Update content/docs/hooks-rules.md Co-Authored-By: charlyx --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 88075662d..caf64a06d 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -8,7 +8,7 @@ prev: hooks-effect.html 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. -Les Hooks sont des fonctions JavaScript, mais vous devez suivre deux règles lorsque vous les utilisez. Nous mettons à votre disposition un [plugin linter](https://www.npmjs.com/package/eslint-plugin-react-hooks) pour vérifier ces règles automatiquement : +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 : ### Appelez les Hooks uniquement au premier niveau {#only-call-hooks-at-the-top-level} From e7bf91f6f0a7571e080b37869230833f57d816b2 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 28 Feb 2019 22:21:02 +0100 Subject: [PATCH 08/15] Update content/docs/hooks-rules.md Co-Authored-By: charlyx --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index caf64a06d..22c530b90 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -10,7 +10,7 @@ Les *Hooks* sont arrivés avec React 16.8. Ils vous permettent de bénéficier d 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 : -### Appelez les Hooks uniquement au premier niveau {#only-call-hooks-at-the-top-level} +### Appelez les Hooks uniquement au niveau racine {#only-call-hooks-at-the-top-level} **N'appelez pas de Hooks à l'intérieur de boucles, conditions ou de fonctions imbriquées.** À la place, utilisez seulement les Hooks au premier niveau de votre fonction React. En suivant cette règle, vous assurez que les Hooks sont appelés dans le même ordre à chaque fois que le composant est rendu. C'est ce qui permet à React de garantir le bon état des Hooks entre plusieurs appels de `useState` et `useEffect`. (Si vous êtes curieux, nous expliquerons cela en détails [ci-dessous](#explanation).) From 107888771103664ab30137753eabed72fa6dea2e Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 28 Feb 2019 22:21:48 +0100 Subject: [PATCH 09/15] Update content/docs/hooks-rules.md Co-Authored-By: charlyx --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 22c530b90..355cc0535 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -12,7 +12,7 @@ Les Hooks sont des fonctions JavaScript, mais vous devez suivre deux règles lor ### Appelez les Hooks uniquement au niveau racine {#only-call-hooks-at-the-top-level} -**N'appelez pas de Hooks à l'intérieur de boucles, conditions ou de fonctions imbriquées.** À la place, utilisez seulement les Hooks au premier niveau de votre fonction React. En suivant cette règle, vous assurez que les Hooks sont appelés dans le même ordre à chaque fois que le composant est rendu. C'est ce qui permet à React de garantir le bon état des Hooks entre plusieurs appels de `useState` et `useEffect`. (Si vous êtes curieux, nous expliquerons cela en détails [ci-dessous](#explanation).) +**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 fois 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 [ci-dessous](#explanation).) ### Appelez les Hooks uniquement depuis des fonctions React {#only-call-hooks-from-react-functions} From 1fa9b30376ce03f4dd58595595dae3376859122c Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 28 Feb 2019 22:22:41 +0100 Subject: [PATCH 10/15] Update content/docs/hooks-rules.md Co-Authored-By: charlyx --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 355cc0535..8c85292da 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -117,7 +117,7 @@ useState('Poppins') // 🔴 2 (mais était 3). Échoue lors de la lecture useEffect(updateTitle) // 🔴 3 (mais était 4). Échoue lors du remplacement de l'effet ``` -React ne saurait quoi retourner lors du second appel au Hook `useState`. React s'attend à ce que le second appel à un Hook dans ce composant corresponde à l'effet `persistForm`, comme lors du rendu précédent, mais ce n'est plus le cas. A partir de là, chaque nouvel appel à un Hook suivant celui que nous avons passé, sera aussi décalé de un, provocant ainsi des bugs. +React ne saurait pas quoi renvoyer lors du second appel au Hook `useState`. React s'attendait à ce que le second 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. **C'est pourquoi les Hooks doivent être appelé au premier niveau de vos composants.** Si vous voulez exécuter un effet de manière conditionelle, vous pouvez mettre cette condition *à l'intérieur* de votre Hook : From 0a2b6ad4eec524be69df64297c71b46cfabfdd0b Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 28 Feb 2019 22:24:25 +0100 Subject: [PATCH 11/15] Update content/docs/hooks-rules.md Co-Authored-By: charlyx --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 8c85292da..2f9de2a54 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -123,7 +123,7 @@ React ne saurait pas quoi renvoyer lors du second appel au Hook `useState`. Reac ```js useEffect(function persistForm() { - // 👍 Nous ne brisons plus la première règle + // 👍 Nous n’enfreignons plus la première règle if (name !== '') { localStorage.setItem('formData', name); } From d8693734bf83b4396a506ad6527b2fc79e9c9111 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 28 Feb 2019 22:25:05 +0100 Subject: [PATCH 12/15] Update content/docs/hooks-rules.md Co-Authored-By: charlyx --- content/docs/hooks-rules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 2f9de2a54..044d95672 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -130,7 +130,7 @@ React ne saurait pas quoi renvoyer lors du second appel au Hook `useState`. Reac }); ``` -**Notez que vous ne devez pas vous inquiéter de ce problème si vous utilisez [la règle de lint fournie](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 prévient la règle. +**Remarquez que vous n’avez pas à vous inquiéter de ça si vous utilisez [la règle de lint fournie](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 la règle évite. ## Prochaines étapes {#next-steps} From 09f456f7e01cc604ebe6b5e4d37156e1d8ac154e Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 28 Feb 2019 22:33:11 +0100 Subject: [PATCH 13/15] Apply suggestions from code review Co-Authored-By: charlyx --- content/docs/hooks-rules.md | 38 ++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 044d95672..6005c14a6 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -16,14 +16,14 @@ Les Hooks sont des fonctions JavaScript, mais vous devez suivre deux règles lor ### Appelez les Hooks uniquement depuis des fonctions React {#only-call-hooks-from-react-functions} -**N'appelez pas les Hooks depuis des fonctions JavaScript classiques.** À la place, vous pouvez : +**N'appelez pas les Hooks depuis des fonctions JavaScript classiques.** Vous pouvez en revanche : * ✅ Appeler les Hooks depuis des fonctions composants React. -* ✅ Appeler les Hooks depuis des Hooks personnalisés (nous aborderons le sujet [à la page suivante](/docs/hooks-custom.html)). +* ✅ Appeler les Hooks depuis des Hooks personnalisés (nous aborderons le sujet [dans la prochaine page](/docs/hooks-custom.html)). -En suivant cette règle, vous assurez que toute la logique à états dans un composant est clairement visible depuis ses sources. +En suivant cette règle, vous garantissez que toute la logique d’état d’un composant est clairement identifiable dans son code source. -## Plugin linter {#eslint-plugin} +## Plugin ESLint {#eslint-plugin} 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 : @@ -45,20 +45,20 @@ npm install eslint-plugin-react-hooks } ``` -Dans le futur, nous avons l'intention d'inclure ce plugin par défaut dans Create React App et d'autres boîtes à outils similaires. +À l’avenir, nous comptons inclure ce plugin par défaut dans Create React App et d'autres boîtes à outils similaires. -**Vous pouvez maintenant passer à la page expliquant comment écrire [vos propres Hooks](/docs/hooks-custom.html).** Sur cette page, nous allons continuer à expliquer le raisonnement qui se cache derrière ces règles. +**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. ## Explications {#explanation} -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 : +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 : ```js function Form() { // 1. Utilise la variable d'état name const [name, setName] = useState('Mary'); - // 2. Utilise un effect pour conserver le formulaire + // 2. Utilise un effet pour persister le formulaire useEffect(function persistForm() { localStorage.setItem('formData', name); }); @@ -75,32 +75,32 @@ function Form() { } ``` -Alors, comment React sait quel état correspond à quel `useState`? La réponse est que **React 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 rendu : +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 : ```js // ------------ -// First render +// Premier affichage // ------------ useState('Mary') // 1. Initialise la variable d'état name avec 'Mary' -useEffect(persistForm) // 2. Ajoute un effet pour conserver le formulaire +useEffect(persistForm) // 2. Ajoute un effet pour persister le formulaire useState('Poppins') // 3. Initialise la variable d'état surname avec 'Poppins' useEffect(updateTitle) // 4. Ajoute un effet pour mettre à jour le titre // ------------- -// Second render +// Deuxième affichage // ------------- useState('Mary') // 1. Lit la variable d'état name (l'argument est ignoré) -useEffect(persistForm) // 2. Remplace l'effet pour conserver le formulaire +useEffect(persistForm) // 2. Remplace l'effet pour persister le formulaire useState('Poppins') // 3. Lit la variable d'état surname (l'argument est ignoré) useEffect(updateTitle) // 4. Remplace l'effet pour mettre à jour le titre // ... ``` -Tant que l'ordre d'appel aux Hooks est le même entre chaque rendu, React peut associer un état local à chacun d'entre eux. Mais que se passe-t-il si nous appelons un Hook (par exemple, l'effet `persistForm`) dans une condition ? +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 ? ```js - // 🔴 Nous brisons la règle en utilisant un Hook dans une condition + // 🔴 Nous enfreignons la première règle en utilisant un Hook de façon conditionnelle if (name !== '') { useEffect(function persistForm() { localStorage.setItem('formData', name); @@ -108,18 +108,18 @@ Tant que l'ordre d'appel aux Hooks est le même entre chaque rendu, React peut a } ``` -La condition `name !== ''` est `true` au premier rendu, donc nous exécutons le Hook. Cependant, lors du prochain rendu l'utilisateur pourrait vider le formulaire, ce qui aura pour effet de rendre la condition `false`. Maintenant que nous passons ce Hook lors du rendu, l'ordre d'appel aux Hooks devient différent : +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 : ```js useState('Mary') // 1. Lit la variable d'état name (l'argument est ignoré) -// useEffect(persistForm) // 🔴 Le Hook n'a pas été appelé ! +// useEffect(persistForm) // 🔴 Ce Hook n'a pas été appelé ! useState('Poppins') // 🔴 2 (mais était 3). Échoue lors de la lecture de la variable d'état surname useEffect(updateTitle) // 🔴 3 (mais était 4). Échoue lors du remplacement de l'effet ``` React ne saurait pas quoi renvoyer lors du second appel au Hook `useState`. React s'attendait à ce que le second 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. -**C'est pourquoi les Hooks doivent être appelé au premier niveau de vos composants.** Si vous voulez exécuter un effet de manière conditionelle, vous pouvez mettre cette condition *à l'intérieur* de votre Hook : +**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 : ```js useEffect(function persistForm() { @@ -134,4 +134,4 @@ React ne saurait pas quoi renvoyer lors du second appel au Hook `useState`. Reac ## Prochaines étapes {#next-steps} -Enfin, nous sommes prêt à apprendre à [écrire nos propres Hooks](/docs/hooks-custom.html) ! Les Hooks personnalisés vous permettent de combiner les Hooks fournis par React dans vos propres abstractions et réutiliser la logique à états commune à vos différents composants. +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. From 7524eb80bbed3b2fc49a185c0144b8b0b550063f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Charles-Henri=20GU=C3=89RIN?= Date: Thu, 28 Feb 2019 22:35:25 +0100 Subject: [PATCH 14/15] :globe_with_meridians: Translate navigation --- content/docs/nav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 6d657f17e..338fda069 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -116,7 +116,7 @@ - id: hooks-effect title: Using the Effect Hook - id: hooks-rules - title: Rules of Hooks + title: Les règles des Hooks - id: hooks-custom title: Building Your Own Hooks - id: hooks-reference From c89f894ea01f611ed013d93b2d98acd24ed5528c Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Fri, 1 Mar 2019 09:37:56 +0100 Subject: [PATCH 15/15] Final tweaks --- content/docs/hooks-rules.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/hooks-rules.md b/content/docs/hooks-rules.md index 6005c14a6..f29f981ba 100644 --- a/content/docs/hooks-rules.md +++ b/content/docs/hooks-rules.md @@ -8,15 +8,15 @@ prev: hooks-effect.html 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. -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 : +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 : ### Appelez les Hooks uniquement au niveau racine {#only-call-hooks-at-the-top-level} -**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 fois 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 [ci-dessous](#explanation).) +**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).) ### Appelez les Hooks uniquement depuis des fonctions React {#only-call-hooks-from-react-functions} -**N'appelez pas les Hooks depuis des fonctions JavaScript classiques.** Vous pouvez en revanche : +**N'appelez pas les Hooks depuis des fonctions JavaScript classiques.** Vous pouvez en revanche : * ✅ Appeler les Hooks depuis des fonctions composants React. * ✅ Appeler les Hooks depuis des Hooks personnalisés (nous aborderons le sujet [dans la prochaine page](/docs/hooks-custom.html)). @@ -25,7 +25,7 @@ En suivant cette règle, vous garantissez que toute la logique d’état d’un ## Plugin ESLint {#eslint-plugin} -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 : +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 : ```bash npm install eslint-plugin-react-hooks @@ -51,7 +51,7 @@ npm install eslint-plugin-react-hooks ## Explications {#explanation} -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 : +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 : ```js function Form() { @@ -108,16 +108,16 @@ Tant que l'ordre d'appel aux Hooks est le même d’un affichage à l’autre, R } ``` -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 : +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 : ```js useState('Mary') // 1. Lit la variable d'état name (l'argument est ignoré) -// useEffect(persistForm) // 🔴 Ce Hook n'a pas été appelé ! -useState('Poppins') // 🔴 2 (mais était 3). Échoue lors de la lecture de la variable d'état surname -useEffect(updateTitle) // 🔴 3 (mais était 4). Échoue lors du remplacement de l'effet +// useEffect(persistForm) // 🔴 Ce Hook n'a pas été appelé ! +useState('Poppins') // 🔴 2. (mais était 3). Échoue à lire la variable d'état surname +useEffect(updateTitle) // 🔴 3. (mais était 4). Échoue à remplacer de l'effet ``` -React ne saurait pas quoi renvoyer lors du second appel au Hook `useState`. React s'attendait à ce que le second 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. +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. **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 : @@ -130,7 +130,7 @@ React ne saurait pas quoi renvoyer lors du second appel au Hook `useState`. Reac }); ``` -**Remarquez que vous n’avez pas à vous inquiéter de ça si vous utilisez [la règle de lint fournie](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 la règle évite. +**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. ## Prochaines étapes {#next-steps}