From 0668721d13c4332cd4e4794687943388cc805859 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 21 Oct 2024 10:59:36 +0200 Subject: [PATCH 1/4] copy(l10n): first part of React rules --- .../components-and-hooks-must-be-pure.md | 2 +- src/content/reference/rules/index.md | 46 ++++++++++--------- src/sidebarReference.json | 2 +- 3 files changed, 26 insertions(+), 24 deletions(-) diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md index 9245ff511..ab82338ad 100644 --- a/src/content/reference/rules/components-and-hooks-must-be-pure.md +++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md @@ -1,5 +1,5 @@ --- -title: Les composants et les Hooks doivent être purs +title: Les composants et les Hooks doivent être des fonctions pures --- {/* FIXME:L10N */} diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index 51ebc703b..4dad798c4 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -2,10 +2,10 @@ title: Les règles de React --- -{/* FIXME:L10N */} - -Just as different programming languages have their own ways of expressing concepts, React has its own idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications. + +Tout comme des langages de programmation distincts ont leurs propres manières d'exprimer des concepts, React a ses propres idiômes — ou règles — pour exprimer certaines approches de façon facile à comprendre, afin de produire des applications de grande qualité. + @@ -13,42 +13,44 @@ Just as different programming languages have their own ways of expressing concep --- -To learn more about expressing UIs with React, we recommend reading [Thinking in React](/learn/thinking-in-react). + +Pour apprendre comment décrire des UI avec React, nous vous recommandons de lire [Penser en React](/learn/thinking-in-react). + -This section describes the rules you need to follow to write idiomatic React code. Writing idiomatic React code can help you write well organized, safe, and composable applications. These properties make your app more resilient to changes and makes it easier to work with other developers, libraries, and tools. +Cette section décrit les règles que vous devez suivre pour écrire du code React idiomatique. Écrire du code React idiomatique vous aidera à construire des applications bien organisées, fiables et composables. Ces propriétés améliorent la résilience aux chaangements de votre appli, et facilitent son sa maintenance par d'autres développeur·ses et son intégration avec des bibliothèques et outils tiers. -These rules are known as the **Rules of React**. They are rules – and not just guidelines – in the sense that if they are broken, your app likely has bugs. Your code also becomes unidiomatic and harder to understand and reason about. +Ces règles sont connues sous le termes **Règles de React**. Ce sont bien des règles — et pas juste des recommandations — dans le sens où, si vous les enfreignez, votre appli aura sans doute des bugs. Votre code deviendra non-idiomatique et plus difficile à comprendre et à modéliser mentalement. -We strongly recommend using [Strict Mode](/reference/react/StrictMode) alongside React's [ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to help your codebase follow the Rules of React. By following the Rules of React, you'll be able to find and address these bugs and keep your application maintainable. +Nous vous encourageons fortement à utiliser le [mode strict](/reference/react/StrictMode) ainsi que le [plugin ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) de React pour vous aider à produire une base de code qui suive les Règles de React. En suivant les Règles de React, vous détecterez et corrigerez ces bugs et obtiendrez une application plus maintenable. --- -## Components and Hooks must be pure {/*components-and-hooks-must-be-pure*/} +## Les composants et les Hooks doivent être des fonctions pures {/*components-and-hooks-must-be-pure*/} -[Purity in Components and Hooks](/reference/rules/components-and-hooks-must-be-pure) is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code. +[La pureté des Composants et des Hooks](/reference/rules/components-and-hooks-must-be-pure) est une règle clé de React qui rend votre appli prévisible, facile à déboguer, et permet à React d'optimiser votre code. -* [Components must be idempotent](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – React components are assumed to always return the same output with respect to their inputs – props, state, and context. -* [Side effects must run outside of render](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Side effects should not run in render, as React can render components multiple times to create the best possible user experience. -* [Props and state are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – A component’s props and state are immutable snapshots with respect to a single render. Never mutate them directly. -* [Return values and arguments to Hooks are immutable](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Once values are passed to a Hook, you should not modify them. Like props in JSX, values become immutable when passed to a Hook. -* [Values are immutable after being passed to JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Don’t mutate values after they’ve been used in JSX. Move the mutation before the JSX is created. +* [Les composants doivent être idempotents](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – Les composants React sont supposés toujours renvoyer le même résultat pour les mêmes entrées – props, états locaux et contextes. +* [Les effets de bord doivent être exécutés hors du rendu](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Les effets de bord ne doivent pas être exécutés lors du rendu, afin que React puisse effectuer plusieurs fois le rendu de composants afin de créer la meilleure expérience utilisateur. +* [Les props et l'état sont immuables](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – Les props et les états locaux d'un composant sont considérés comme des instantanés immuables au sein d'un même rendu. Ne les modifiez jamais directement. +* [Les valeurs renvoyées par les Hooks et leurs arguments sont immuables](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Une fois que des valeurs sont passées à un Hook, vous ne devriez jamais les modifier. Tout comme les props en JSX, ces valeurs deviennent immuables une fois passées à un Hook. +* [Les valeurs sont immuables une fois passées à JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Ne modifiez pas des valeurs une fois que vous les avez utilisées dans du JSX. Déplacez la mutation en amont, avant que le JSX soit créé. --- -## React calls Components and Hooks {/*react-calls-components-and-hooks*/} +## React appelle les composants et les Hooks {/*react-calls-components-and-hooks*/} -[React is responsible for rendering components and hooks when necessary to optimize the user experience.](/reference/rules/react-calls-components-and-hooks) It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user. +[React s'occupe de réaliser le rendu des composants et des Hooks lorsque c'est nécessaire, afin d'optimiser l'expérience utilisateur](/reference/rules/react-calls-components-and-hooks). C'est une approche déclarative : vous dites à React quel rendu effectuer dans la logique de votre composant, et React déterminera comment réaliser au mieux l'affichage pour l'utilisateur. -* [Never call component functions directly](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Components should only be used in JSX. Don’t call them as regular functions. -* [Never pass around hooks as regular values](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – Hooks should only be called inside of components. Never pass it around as a regular value. +* [N'appelez jamais les fonctions composants directement](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Les composants ne devraient être utilisés que dans du JSX. Ne les appelez pas en tant que fonctions classiques. +* [Ne passez jamais des Hooks comme des valeurs classiques](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – Les Hooks ne devraient être appelés qu'au sein de composants. Ne les passez pas comme des valeurs classiques. --- -## Rules of Hooks {/*rules-of-hooks*/} +## Les règles des Hooks {/*rules-of-hooks*/} -Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called. You need to follow the [Rules of Hooks](/reference/rules/rules-of-hooks) when using them. +Les Hooks sont définis au moyen de fonctions JavaScript, mais représentent un type spécifique de logique d'UI réutilisable, avec des restrictions sur leurs emplacements d'appel. Vous devez suivre les [Règles des Hooks](/reference/rules/rules-of-hooks) lorsque vous les employez. -* [Only call Hooks at the top level](/reference/rules/rules-of-hooks#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, before any early returns. -* [Only call Hooks from React functions](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Don’t call Hooks from regular JavaScript functions. +* [N'appelez des Hooks qu'au niveau racine](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Ne les appelez pas dans des boucles, des conditions ou des fonctions imbriquées. Utilisez plutôt toujours les Hooks au niveau racine de votre fonction React, avant d'éventuels retours anticipés. +* [N'appelez les Hooks que depuis des fonctions React](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – N'appelez pas les Hooks depuis des fonctions JavaScript classiques. diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 85d376953..a401c73c0 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -346,7 +346,7 @@ "path": "/reference/rules", "routes": [ { - "title": "Les composants et les Hooks doivent être purs", + "title": "Les composants et les Hooks doivent être des fonctions pures", "path": "/reference/rules/components-and-hooks-must-be-pure" }, { From 1f071a66d318d5fc98d4365a497a19ebae4ff6b9 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 21 Oct 2024 12:09:16 +0200 Subject: [PATCH 2/4] copy(l10n): rules of hooks --- src/content/reference/rules/rules-of-hooks.md | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md index 43cd78b0b..5f7ed5f37 100644 --- a/src/content/reference/rules/rules-of-hooks.md +++ b/src/content/reference/rules/rules-of-hooks.md @@ -2,54 +2,54 @@ title: Les règles des Hooks --- -{/* FIXME:L10N */} - -Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called. + +Les Hooks sont définis au moyen de fonctions JavaScript, mais représentent un type particulier de logique d'UI réutilisables, avec des restrictions sur leurs emplacements possibles d'appel. + --- -## Only call Hooks at the top level {/*only-call-hooks-at-the-top-level*/} +## N'appelez des Hooks qu'au niveau racine {/*only-call-hooks-at-the-top-level*/} -Functions whose names start with `use` are called [*Hooks*](/reference/react) in React. +Les fonctions dont le nom commence par `use` sont appelées [*Hooks*](/reference/react) en React. -**Don’t call Hooks inside loops, conditions, nested functions, or `try`/`catch`/`finally` blocks.** Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component: +**N'appelez pas de Hooks au sein de boucles, conditions, fonctions imbriquées ou blocks `try`/`catch`/`finally` .** Utilisez plutôt les Hooks systématiquement au niveau racine de votre fonction React, avant tout retour anticipé éventuel *(early return, NdT)*. Vous ne pouvez appelez des Hooks que pendant que React fait le rendu d'une fonction composant : -* ✅ Call them at the top level in the body of a [function component](/learn/your-first-component). -* ✅ Call them at the top level in the body of a [custom Hook](/learn/reusing-logic-with-custom-hooks). +* ✅ Appelez-les à la racine du corps d'une [fonction composant](/learn/your-first-component). +* ✅ Appelez-les à la racine du corps d'un [Hook personnalisé](/learn/reusing-logic-with-custom-hooks). ```js{2-3,8-9} function Counter() { - // ✅ Good: top-level in a function component + // ✅ Correct : niveau racine d’une fonction composant const [count, setCount] = useState(0); // ... } function useWindowWidth() { - // ✅ Good: top-level in a custom Hook + // ✅ Correct : niveau racine d’un Hook personnalisé const [width, setWidth] = useState(window.innerWidth); // ... } ``` -It’s **not** supported to call Hooks (functions starting with `use`) in any other cases, for example: +React **ne permet pas** l'appels de Hooks (les fonctions dont le nom commence par `use`) dans d'autres situations, par exemple : -* 🔴 Do not call Hooks inside conditions or loops. -* 🔴 Do not call Hooks after a conditional `return` statement. -* 🔴 Do not call Hooks in event handlers. -* 🔴 Do not call Hooks in class components. -* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`. -* 🔴 Do not call Hooks inside `try`/`catch`/`finally` blocks. +* 🔴 N'appelez pas de Hooks au sein de conditions ou de boucles. +* 🔴 N'appelez pas de Hooks après une instruction `return` conditionnelle. +* 🔴 N'appelez pas de Hooks au sein de gestionnaires d'événements. +* 🔴 N'appelez pas de Hooks dans des composants à base de classes. +* 🔴 N'appelez pas de Hooks au sein de fonctions passées à `useMemo`, `useReducer` ou `useEffect`. +* 🔴 N'appelez pas de Hooks au sein de blocs `try`/`catch`/`finally`. -If you break these rules, you might see this error. +Si vous enfreignez ces règles, vous verrez peut-être une erreur. ```js{3-4,11-12,20-21} function Bad({ cond }) { if (cond) { - // 🔴 Bad: inside a condition (to fix, move it outside!) + // 🔴 Incorrect : au sein d’une condition (pour corriger ça, sortez-en-le !) const theme = useContext(ThemeContext); } // ... @@ -57,7 +57,7 @@ function Bad({ cond }) { function Bad() { for (let i = 0; i < 10; i++) { - // 🔴 Bad: inside a loop (to fix, move it outside!) + // 🔴 Incorrect : au sein d’une boucle (pour corriger ça, sortez-en-le !) const theme = useContext(ThemeContext); } // ... @@ -67,14 +67,14 @@ function Bad({ cond }) { if (cond) { return; } - // 🔴 Bad: after a conditional return (to fix, move it before the return!) + // 🔴 Incorrect : après un retour anticipé conditionnel (déplacez-le avant le return !) const theme = useContext(ThemeContext); // ... } function Bad() { function handleClick() { - // 🔴 Bad: inside an event handler (to fix, move it outside!) + // 🔴 Incorrect : au sein d’un gestionnaire d’événements (pour corriger ça, sortez-en-le !) const theme = useContext(ThemeContext); } // ... @@ -82,7 +82,7 @@ function Bad() { function Bad() { const style = useMemo(() => { - // 🔴 Bad: inside useMemo (to fix, move it outside!) + // 🔴 Incorrect : au sein d’un useMemo (pour corriger ça, sortez-en-le !) const theme = useContext(ThemeContext); return createStyle(theme); }); @@ -91,7 +91,7 @@ function Bad() { class Bad extends React.Component { render() { - // 🔴 Bad: inside a class component (to fix, write a function component instead of a class!) + // 🔴 Incorrect : au sein d’un composant à base de classe (utilisez plutôt une fonction composant !) useEffect(() => {}) // ... } @@ -99,7 +99,7 @@ class Bad extends React.Component { function Bad() { try { - // 🔴 Bad: inside try/catch/finally block (to fix, move it outside!) + // 🔴 Incorrect : au sein d’un bloc try/catch/finally block (pour corriger ça, sortez-en-le !) const [x, setX] = useState(0); } catch { const [x, setX] = useState(1); @@ -107,31 +107,31 @@ function Bad() { } ``` -You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch these mistakes. +Vous pouvez utiliser le [plugin `eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) pour repérer ces erreurs. -[Custom Hooks](/learn/reusing-logic-with-custom-hooks) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering. +[Les Hooks personnalisés](/learn/reusing-logic-with-custom-hooks) *peuvent* appeler d'autres Hooks (c'est même leur raison d'être). Ça fonctionne parce que les Hooks personnalisés sont eux aussi censés n'être appelés que pendant la phase de rendu d'une fonction composant. --- -## Only call Hooks from React functions {/*only-call-hooks-from-react-functions*/} +## N'appelez des Hooks que depuis des fonctions React {/*only-call-hooks-from-react-functions*/} -Don’t call Hooks from regular JavaScript functions. Instead, you can: +N'appelez pas de Hooks depuis des fonctions JavaScript classiques. Vous devriez plutôt : -✅ Call Hooks from React function components. -✅ Call Hooks from [custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component). +✅ Appeler des Hooks depuis des fonctions composants React. +✅ Appeler des Hooks depuis des [Hooks personnalisés](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component). -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 garantissez que toute la logique à état d'un composant est clairement visible dans son code source. ```js {2,5} function FriendList() { const [onlineStatus, setOnlineStatus] = useOnlineStatus(); // ✅ } -function setOnlineStatus() { // ❌ Not a component or custom Hook! +function setOnlineStatus() { // ❌ Ni un composant ni un Hook personnalisé ! const [onlineStatus, setOnlineStatus] = useOnlineStatus(); } ``` From cae2895da317eb5f4fe46a65d62829e732fafe71 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 21 Oct 2024 15:43:53 +0200 Subject: [PATCH 3/4] copy(l10n): react rules > react calls C/H --- .../rules/react-calls-components-and-hooks.md | 68 +++++++++---------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/src/content/reference/rules/react-calls-components-and-hooks.md b/src/content/reference/rules/react-calls-components-and-hooks.md index 5a0c90bd3..384318a19 100644 --- a/src/content/reference/rules/react-calls-components-and-hooks.md +++ b/src/content/reference/rules/react-calls-components-and-hooks.md @@ -2,87 +2,88 @@ title: React appelle les composants et les Hooks --- -{/* FIXME:L10N */} - -React is responsible for rendering components and Hooks when necessary to optimize the user experience. It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user. + +React s'occupe de réaliser le rendu des composants et des Hooks lorsque c'est nécessaire, afin d'optimiser l'expérience utilisateur. C'est une approche déclarative : vous dites à React quel rendu effectuer dans la logique de votre composant, et React déterminera comment réaliser au mieux l'affichage pour l'utilisateur. + --- -## Never call component functions directly {/*never-call-component-functions-directly*/} -Components should only be used in JSX. Don't call them as regular functions. React should call it. +## N'appelez jamais les fonctions composants directement {/*never-call-component-functions-directly*/} -React must decide when your component function is called [during rendering](/reference/rules/components-and-hooks-must-be-pure#how-does-react-run-your-code). In React, you do this using JSX. +Les composants ne devraient être utilisés que dans du JSX. Ne les appelez pas en tant que fonctions classiques. C'est à React de les appeler. + +C'est à React de décider quand appeler votre fonction composant [lors du rendu](/reference/rules/components-and-hooks-must-be-pure#how-does-react-run-your-code). En React, vous utilisez pour ça la syntaxe JSX. ```js {2} function BlogPost() { - return
; // ✅ Good: Only use components in JSX + return
; // ✅ Correct : composants utilisés seulement par JSX } ``` ```js {2} function BlogPost() { - return {Article()}; // 🔴 Bad: Never call them directly + return {Article()}; // 🔴 Incorrect : ne les appelez jamais directement } ``` -If a component contains Hooks, it's easy to violate the [Rules of Hooks](/reference/rules/rules-of-hooks) when components are called directly in a loop or conditionally. +Si un composant contient des Hooks, il est aisé d'enfreindre les [Règles des Hooks](/reference/rules/rules-of-hooks) lorsque les composants sont appelés directement au sein de boucles ou de conditions. -Letting React orchestrate rendering also allows a number of benefits: +Le fait de laisser React orchestrer le rendu offre de nombreux avantages : -* **Components become more than functions.** React can augment them with features like _local state_ through Hooks that are tied to the component's identity in the tree. -* **Component types participate in reconciliation.** By letting React call your components, you also tell it more about the conceptual structure of your tree. For example, when you move from rendering `` to the `` page, React won’t attempt to re-use them. -* **React can enhance your user experience.** For example, it can let the browser do some work between component calls so that re-rendering a large component tree doesn’t block the main thread. -* **A better debugging story.** If components are first-class citizens that the library is aware of, we can build rich developer tools for introspection in development. -* **More efficient reconciliation.** React can decide exactly which components in the tree need re-rendering and skip over the ones that don't. That makes your app faster and more snappy. +* **Les composants deviennent plus que de simples fonctions.** React peut leur ajouter des fonctionnalités telles que _l'état local_ au moyen de Hooks associés à l'identité du composant dans l'arbre. +* **Les types des composants participent à la réconciliation.** En laissant React appeler vos composants, vous lui en dites plus sur la structure sémantique de votre arbre. Par exemple, lorsque vous passez du rendu d'un `` à celui d'une page ``, React ne risque pas de mélanger leurs données sous-jacentes. +* **React peut améliorer l'expérience utilisateur.** Il peut par exemple laisser le navigateur traiter certaines tâches entre les appels des composants, afin que le rendu d'un énorme arbre de composants ne bloque pas le *thread* principal. +* **Le débogage est facilité.** Si les composants sont des citoyens de plein droit connus de la bibliothèque, nous pouvons construire un outillage développeur·ses avancé pour les examiner lors du développement. +* **La réconciliation est plus efficace.** React peut déterminer précisément quels composants dans l'arbre ont besoin d'un nouveau rendu, ainsi que ceux qui peuvent être laissés tels quels. Ça aide à rendre votre appli plus rapide et réactive. --- -## Never pass around Hooks as regular values {/*never-pass-around-hooks-as-regular-values*/} +## Ne passez jamais des Hooks comme des valeurs classiques {/*never-pass-around-hooks-as-regular-values*/} -Hooks should only be called inside of components or Hooks. Never pass it around as a regular value. +Les Hooks ne devraient être appelés qu'au sein de composants. Évitez de les manipuler ou transmettre comme des valeurs classiques. -Hooks allow you to augment a component with React features. They should always be called as a function, and never passed around as a regular value. This enables _local reasoning_, or the ability for developers to understand everything a component can do by looking at that component in isolation. +Les Hooks vous permettent d'ajouter des fonctionnalités React à un composant. Ils devraient toujours être appelés en tant que fonctions, jamais traités comme des valeurs à transmettre. Ça permet un _raisonnement local_, c'est-à-dire que ça offre la possibilité pour les développeur·ses de comprendre l'entièreté d'un composant grâce à son seul code source. -Breaking this rule will cause React to not automatically optimize your component. +Enfreindre cette règle empêchera React d'optimiser automatiquement votre composant. -### Don't dynamically mutate a Hook {/*dont-dynamically-mutate-a-hook*/} +### Ne modifiez pas dynamiquement un Hook {/*dont-dynamically-mutate-a-hook*/} -Hooks should be as "static" as possible. This means you shouldn't dynamically mutate them. For example, this means you shouldn't write higher order Hooks: +Les Hooks devraient être aussi « statiques » que possible. Ça signifie que vous ne devriez pas les modifier dynamiquement. Vous devriez par exemple éviter d'écrire des Hooks d'ordre supérieur : ```js {2} function ChatInput() { - const useDataWithLogging = withLogging(useData); // 🔴 Bad: don't write higher order Hooks + const useDataWithLogging = withLogging(useData); // 🔴 Déconseillé : évitez les Hooks d’ordre supérieur const data = useDataWithLogging(); } ``` -Hooks should be immutable and not be mutated. Instead of mutating a Hook dynamically, create a static version of the Hook with the desired functionality. +Les Hooks devraient être immuables, et donc non modifiés. Plutôt que de modifier dynamiquement un Hook, créez une version statique du Hook avec la fonctionnalité voulue. ```js {2,6} function ChatInput() { - const data = useDataWithLogging(); // ✅ Good: Create a new version of the Hook + const data = useDataWithLogging(); // ✅ Correct : utilise une nouvelle version du Hook } function useDataWithLogging() { - // ... Create a new version of the Hook and inline the logic here + // ... Crée une nouvelle version du Hook en intégrant directement la logique ici } ``` -### Don't dynamically use Hooks {/*dont-dynamically-use-hooks*/} +### N'utilisez pas dynamiquement les Hooks {/*dont-dynamically-use-hooks*/} -Hooks should also not be dynamically used: for example, instead of doing dependency injection in a component by passing a Hook as a value: +Les Hooks ne devraient par ailluers pas être utilisés dynamique. Disons par exemple que vous recouriez à l'injection de dépendance en passant un Hook à un composant sous forme de valeur : ```js {2} function ChatInput() { - return ); } @@ -255,12 +262,12 @@ function Counter() { const [count, setCount] = useState(0); function handleClick() { - setCount(count + 1); // ✅ Good: use the setter function returned by useState + setCount(count + 1); // ✅ Correct : utilisez la fonction de mise à jour fournie par useState } return ( ); } @@ -268,15 +275,15 @@ function Counter() { --- -## Return values and arguments to Hooks are immutable {/*return-values-and-arguments-to-hooks-are-immutable*/} +## Hooks : les arguments et valeurs renvoyées sont immuables {/*return-values-and-arguments-to-hooks-are-immutable*/} -Once values are passed to a hook, you should not modify them. Like props in JSX, values become immutable when passed to a hook. +Une fois que vous avez passé des valeurs à un Hook, vous ne devriez plus les modifier. Tout comme les props en JSX, ces valeurs deviennent immuables une fois passées à un Hook. ```js {4} function useIconStyle(icon) { const theme = useContext(ThemeContext); if (icon.enabled) { - icon.className = computeStyle(icon, theme); // 🔴 Bad: never mutate hook arguments directly + icon.className = computeStyle(icon, theme); // 🔴 Erroné : ne mutez jamais directement vos arguments } return icon; } @@ -285,7 +292,7 @@ function useIconStyle(icon) { ```js {3} function useIconStyle(icon) { const theme = useContext(ThemeContext); - const newIcon = { ...icon }; // ✅ Good: make a copy instead + const newIcon = { ...icon }; // ✅ Correct : faites plutôt une copie if (icon.enabled) { newIcon.className = computeStyle(icon, theme); } @@ -293,7 +300,7 @@ function useIconStyle(icon) { } ``` -One important principle in React is _local reasoning_: the ability to understand what a component or hook does by looking at its code in isolation. Hooks should be treated like "black boxes" when they are called. For example, a custom hook might have used its arguments as dependencies to memoize values inside it: +Un principe important en React, c'est le _raisonnement local_ : la capacité à comprendre ce que fait un composant ou Hook rien qu'en regardant son propre code, en isolation. Les Hooks devraient être traités comme des « boîtes noires » lorsqu'ils sont appelés. Un Hook personnalisé pourrait par exemple utiliser ses arguments comme dépendances pour mémoïser des valeurs : ```js {4} function useIconStyle(icon) { @@ -309,35 +316,35 @@ function useIconStyle(icon) { } ``` -If you were to mutate the Hooks arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that. +Si vous mutiez les arguments des Hooks, la mémoïsation du Hook personnalisé s'effrondrerait, il est donc important d'éviter ça. ```js {4} -style = useIconStyle(icon); // `style` is memoized based on `icon` -icon.enabled = false; // Bad: 🔴 never mutate hook arguments directly -style = useIconStyle(icon); // previously memoized result is returned +style = useIconStyle(icon); // `style` est mémoïsé sur base de `icon` +icon.enabled = false; // Erroné : 🔴 ne mutez jamais directement les arguments +style = useIconStyle(icon); // la mémoïsation précédente reste utilisée ``` ```js {4} -style = useIconStyle(icon); // `style` is memoized based on `icon` -icon = { ...icon, enabled: false }; // Good: ✅ make a copy instead -style = useIconStyle(icon); // new value of `style` is calculated +style = useIconStyle(icon); // `style` est mémoïsé sur base de `icon` +icon = { ...icon, enabled: false }; // Correct : ✅ faites plutôt une copie +style = useIconStyle(icon); // la nouvelle valeur de `style` est bien calculée ``` -Similarly, it's important to not modify the return values of Hooks, as they may have been memoized. +Pour les mêmes raisons, il est important de ne pas modifier les valeurs renvoyées par les Hooks, puisqu'elles peuvent avoir été mémoïsées. --- -## Values are immutable after being passed to JSX {/*values-are-immutable-after-being-passed-to-jsx*/} +## Les valeurs sont immuables une fois passées à JSX {/*values-are-immutable-after-being-passed-to-jsx*/} -Don't mutate values after they've been used in JSX. Move the mutation before the JSX is created. +Ne mutez pas les valeurs que vous avez passées à JSX. Déplacez la mutation en amont de la création du JSX. -When you use JSX in an expression, React may eagerly evaluate the JSX before the component finishes rendering. This means that mutating values after they've been passed to JSX can lead to outdated UIs, as React won't know to update the component's output. +Lorsque vous utilisez du JSX dans une expression, React évalue le JSX avant que le composant ne termine son rendu. Ça signifie que la mutation ultérieure de valeurs, après qu'elles ont été exploitées par JSX, peut produire des UI obsolètes, et React ne saura pas qu'il doit mettre à jour le résultat du composant. ```js {4} function Page({ colour }) { const styles = { colour, size: "large" }; const header =
; - styles.size = "small"; // 🔴 Bad: styles was already used in the JSX above + styles.size = "small"; // 🔴 Erroné : styles est déjà utilisé par le JSX ci-dessus const footer =