From f334c56b590bce1ca55d2fe708de62dc27797e9f Mon Sep 17 00:00:00 2001 From: nalin8 Date: Thu, 1 Jun 2023 20:43:46 +0200 Subject: [PATCH 1/9] Translation of the 'useState' page --- src/content/reference/react/useState.md | 152 ++++++++++++------------ 1 file changed, 78 insertions(+), 74 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index d23fa489b..f0e6a2566 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -4,7 +4,7 @@ title: useState -`useState` is a React Hook that lets you add a [state variable](/learn/state-a-components-memory) to your component. +`useState` est un Hook React qui vous laisse ajouter une [variable d'état](/learn/state-a-components-memory) (*state, NdT*) dans votre composant. ```js const [state, setState] = useState(initialState); @@ -16,11 +16,11 @@ const [state, setState] = useState(initialState); --- -## Reference {/*reference*/} +## Référence {/*reference*/} ### `useState(initialState)` {/*usestate*/} -Call `useState` at the top level of your component to declare a [state variable.](/learn/state-a-components-memory) +Appelez `useState` à la racine de votre composant pour déclarer une [variable d'état](/learn/state-a-components-memory). ```js import { useState } from 'react'; @@ -32,32 +32,32 @@ function MyComponent() { // ... ``` -The convention is to name state variables like `[something, setSomething]` using [array destructuring.](https://javascript.info/destructuring-assignment) +La convention est de nommer les variables d'états de cette manière : `[something, setSomething]`, en utilisant la [déstructuration positionnelle](https://fr.javascript.info/destructuring-assignment). -[See more examples below.](#usage) +[Voir d’autres exemples ci-dessous](#usage). -#### Parameters {/*parameters*/} +#### Paramètres {/*parameters*/} -* `initialState`: The value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions. This argument is ignored after the initial render. - * If you pass a function as `initialState`, it will be treated as an _initializer function_. It should be pure, should take no arguments, and should return a value of any type. React will call your initializer function when initializing the component, and store its return value as the initial state. [See an example below.](#avoiding-recreating-the-initial-state) +* `initialState`: La valeur initiale de votre état. Ça peut être une valeur de n'importe quel type, mais il existe un comportement spécial pour les fonctions. Cet argument est ignoré après le rendu initial. + * Si vous passez une fonction dans votre `initialState`, elle sera traitée comme une _fonction d'initialisation_ (*initializer function, NdT*). Elle doit être pure, ne doit pas prendre d'argument, et doit retourner une valeur de n'importe quel type. React appellera votre fonction d'initialisation en initialisant le composant, et stockera sa valeur de retour dans votre état initial. [Voir un exemple ci-dessous](#avoiding-recreating-the-initial-state). -#### Returns {/*returns*/} +#### Valeur renvoyée {/*returns*/} -`useState` returns an array with exactly two values: +`useState` retourne un tableau avec exactement deux valeurs : -1. The current state. During the first render, it will match the `initialState` you have passed. -2. The [`set` function](#setstate) that lets you update the state to a different value and trigger a re-render. +1. L'état courant. Pendant le premier rendu, il sera le même que l'`initialState` que vous avez passé en entrée. +2. La [fonction `set`](#setstate). Elle vous permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. -#### Caveats {/*caveats*/} +#### Limitations {/*caveats*/} -* `useState` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. -* In Strict Mode, React will **call your initializer function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your initializer function is pure (as it should be), this should not affect the behavior. The result from one of the calls will be ignored. +* `useState` est un Hook, vous ne pouvez donc l’appeler qu'uniquement **à la racine de votre composant** ou de vos propres Hooks. Vous ne pouvez pas l’appeler à l’intérieur de boucles ou de conditions. Si nécessaire, extrayez un nouveau composant et déplacez l'état dans celui-ci. +* En mode Strict, React appellera votre **fonction d'initialisation** deux fois dans le but de vous aider à [trouver les impuretés accidentelles](#my-initializer-or-updater-function-runs-twice). Ce comportement est uniquement présent en mode développement et n'affecte pas la production. Si votre fonction d'initialisation est pure (ce qui devrait être le cas), ça ne devrait pas affecter le comportement. Le résultat d'un des appels sera ignoré. --- -### `set` functions, like `setSomething(nextState)` {/*setstate*/} +### Les fonctions `set`, comme `setSomething(nextState)` {/*setstate*/} -The `set` function returned by `useState` lets you update the state to a different value and trigger a re-render. You can pass the next state directly, or a function that calculates it from the previous state: +La fonction `set` retournée par `useState` permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. Vous pouvez directement passer le prochain état, ou une fonction qui le calcule à l'aide de l'état précédent : ```js const [name, setName] = useState('Edward'); @@ -68,34 +68,34 @@ function handleClick() { // ... ``` -#### Parameters {/*setstate-parameters*/} +#### Paramètres {/*setstate-parameters*/} -* `nextState`: The value that you want the state to be. It can be a value of any type, but there is a special behavior for functions. - * If you pass a function as `nextState`, it will be treated as an _updater function_. It must be pure, should take the pending state as its only argument, and should return the next state. React will put your updater function in a queue and re-render your component. During the next render, React will calculate the next state by applying all of the queued updaters to the previous state. [See an example below.](#updating-state-based-on-the-previous-state) +* `nextState`: La valeur désirée de l'état. Elle peut être une valeur de n'importe quel type, mais il existe un comportement spécial pour les fonctions. + * Si vous passez une fonction en tant que `nextState`, elle sera traitée comme une _fonction de mise à jour_ (*updater function, NdT*). Elle doit être pure, doit prendre l'état en attente comme seul argument, et doit retourner le prochain état. React mettra votre fonction de mise à jour dans une file et fera un nouveau rendu de votre composant. Pendant le prochain rendu, React va calculer le prochain état en appliquant toutes les fonctions de mises à jour à l'état précédent. [Voir un exemple ci-dessous](#updating-state-based-on-the-previous-state). -#### Returns {/*setstate-returns*/} +#### Valeur renvoyée {/*setstate-returns*/} -`set` functions do not have a return value. +Les fonctions `set` n'ont pas de valeur de retour. -#### Caveats {/*setstate-caveats*/} +#### Limitations {/*setstate-caveats*/} -* The `set` function **only updates the state variable for the *next* render**. If you read the state variable after calling the `set` function, [you will still get the old value](#ive-updated-the-state-but-logging-gives-me-the-old-value) that was on the screen before your call. +* La fonction `set` **ne met à jour que les variables d'état pour le *prochain* rendu**. Si vous lisez la variable d'état après avoir appelé la fonction `set`, [vous obtiendrez la même ancienne valeur](#ive-updated-the-state-but-logging-gives-me-the-old-value) qui était sur votre écran avant l'appel. -* If the new value you provide is identical to the current `state`, as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison, React will **skip re-rendering the component and its children.** This is an optimization. Although in some cases React may still need to call your component before skipping the children, it shouldn't affect your code. +* Si la nouvelle valeur que vous donnez est identique au `state` actuel, en comparant au moyen de [`Object.is`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is), React **ne fera pas un nouveau rendu de ce composant et de ses enfants**. Il s'agit d'une optimisation. Même si, dans certains cas, React a tout de même besoin d'appeler votre composant sans faire de rendu de ses enfants, ça ne devrait pas affecter votre code. -* React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushSync) +* React [met à jour les états par lots](/learn/queueing-a-series-of-state-updates). Il met à jour l'écran après que tous les gestionnaires d'évènements aient été lancés et qu'ils aient appelés leurs fonctions `set`. Ça évite des rendu inutiles pour un unique évènement. Dans de rares cas où vous avez besoin de forcer React à mettre à jour l'écran plus tôt, par exemple pour accéder au DOM, vous pouvez utiliser [`flushSync`](/reference/react-dom/flushSync). -* Calling the `set` function *during rendering* is only allowed from within the currently rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to **store information from the previous renders**. [See an example below.](#storing-information-from-previous-renders) +* Appeler la fonction `set` *pendant le rendu* est autorisé seulement dans le composant en train d'être rendu. React ignorera son retour et essayera immédiatement de faire un nouveau rendu avec le nouvel état. Ce modèle est rarement nécessaire, mais vous pouvez l'utiliser pour **stocker des informations des précédents rendus**. [Voir un exemple ci-dessous](#storing-information-from-previous-renders). -* In Strict Mode, React will **call your updater function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your updater function is pure (as it should be), this should not affect the behavior. The result from one of the calls will be ignored. +* En mode Strict, React **appellera votre fonction d'initialisation deux fois** dans le but de vous aider à [trouver les impuretés accidentelles](#my-initializer-or-updater-function-runs-twice). Ce comportement est uniquement présent en mode développement et n'affecte pas la production. Si votre fonction de mise à jour est pure (ce qui devrait être le cas), ça ne devrait pas affecter le comportement. Le résultat d'un des appels sera ignoré. --- ## Usage {/*usage*/} -### Adding state to a component {/*adding-state-to-a-component*/} +### Ajouter un état à un composant {/*adding-state-to-a-component*/} -Call `useState` at the top level of your component to declare one or more [state variables.](/learn/state-a-components-memory) +Appelez `useState` à la racine de votre composant pour déclarer une ou plusieurs [variables d'état](/learn/state-a-components-memory). ```js [[1, 4, "age"], [2, 4, "setAge"], [3, 4, "42"], [1, 5, "name"], [2, 5, "setName"], [3, 5, "'Taylor'"]] import { useState } from 'react'; @@ -106,14 +106,17 @@ function MyComponent() { // ... ``` -The convention is to name state variables like `[something, setSomething]` using [array destructuring.](https://javascript.info/destructuring-assignment) +La convention est de nommer les variables d'états de cette manière : `[something, setSomething]`, en utilisant la [déstructuration positionnelle](https://fr.javascript.info/destructuring-assignment). -`useState` returns an array with exactly two items: +`useState` retourne un tableau avec exactement deux valeurs : -1. The current state of this state variable, initially set to the initial state you provided. -2. The `set` function that lets you change it to any other value in response to interaction. +1. L'état courant. Pendant le premier rendu, il sera le même que l'`initialState` que vous avez passé en entrée. +2. La [fonction `set`](#setstate). Elle vous permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. -To update what’s on the screen, call the `set` function with some next state: +1. L'état courant de cette variable d'état, initialement le même que l'état initial que vous avez passé en entrée. +2. La fonction `set` qui vous permet de le changer avec n'importe quelle valeur lors d'une interaction. + +Pour mettre à jour ce qu'il y a sur l'écran, appelez la fonction `set` avec le prochain autre état : ```js [[2, 2, "setName"]] function handleClick() { @@ -121,28 +124,28 @@ function handleClick() { } ``` -React will store the next state, render your component again with the new values, and update the UI. +React stockera ce prochain état, fera un nouveau rendu de votre composant avec les nouvelles valeurs, et mettra à jour l'interface utilisateur *(UI, NdT)* -Calling the `set` function [**does not** change the current state in the already executing code](#ive-updated-the-state-but-logging-gives-me-the-old-value): +Appeler la fonction `set` [**ne change pas** l'état actuel dans le code en train d'être exécuté](#ive-updated-the-state-but-logging-gives-me-the-old-value) : ```js {3} function handleClick() { setName('Robin'); - console.log(name); // Still "Taylor"! + console.log(name); // Toujours "Taylor" ! } ``` -It only affects what `useState` will return starting from the *next* render. +Elle n'affecte que ce que `useState` va retourner à partir du *prochain* rendu. - + -#### Counter (number) {/*counter-number*/} +#### Compteur (nombre) {/*counter-number*/} -In this example, the `count` state variable holds a number. Clicking the button increments it. +Dans cet exemple, la variable d'état `count` contient un nombre. Elle est incrémentée en cliquant sur un bouton. @@ -158,7 +161,7 @@ export default function Counter() { return ( ); } @@ -168,9 +171,9 @@ export default function Counter() { -#### Text field (string) {/*text-field-string*/} +#### Champ de saisie (chaîne de caractères) {/*text-field-string*/} -In this example, the `text` state variable holds a string. When you type, `handleChange` reads the latest input value from the browser input DOM element, and calls `setText` to update the state. This allows you to display the current `text` below. +Dans cet exemple, la variable d'état `text` contient une chaîne de caractères. Lorsque vous tapez, `handleChange` lit la dernière valeur entrée dans l'élément de champ de saisie du DOM, et appelle `setText` pour mettre à jour l'état. Ça vous permet d'afficher le `text` courant ci-dessous. @@ -178,7 +181,7 @@ In this example, the `text` state variable holds a string. When you type, `handl import { useState } from 'react'; export default function MyInput() { - const [text, setText] = useState('hello'); + const [text, setText] = useState('bonjour'); function handleChange(e) { setText(e.target.value); @@ -187,9 +190,9 @@ export default function MyInput() { return ( <> -

You typed: {text}

- ); @@ -200,9 +203,9 @@ export default function MyInput() { -#### Checkbox (boolean) {/*checkbox-boolean*/} +#### Case à cocher (booléan) {/*checkbox-boolean*/} -In this example, the `liked` state variable holds a boolean. When you click the input, `setLiked` updates the `liked` state variable with whether the browser checkbox input is checked. The `liked` variable is used to render the text below the checkbox. +Dans cet exemple, la variable d'état `liked` contient un booléan. Lorsque vous cliquez sur la case, `setLiked` met à jour la variable d'état `liked` selon si la case est cochée ou non. La variable `liked` est utilisée pour effectuer le rendu du texte sous la case à cocher. @@ -224,9 +227,9 @@ export default function MyCheckbox() { checked={liked} onChange={handleChange} /> - I liked this + J'ai aimé -

You {liked ? 'liked' : 'did not like'} this.

+

Vous {liked ? 'avez' : 'n\'avez pas'} aimé.

); } @@ -236,9 +239,9 @@ export default function MyCheckbox() { -#### Form (two variables) {/*form-two-variables*/} +#### Formulaire (deux variables) {/*form-two-variables*/} -You can declare more than one state variable in the same component. Each state variable is completely independent. +Vous pouvez déclarer plus d'une variable d'état dans le même composant. Chaque variable d'état est complètement indépendante. @@ -256,9 +259,9 @@ export default function Form() { onChange={e => setName(e.target.value)} /> -

Hello, {name}. You are {age}.

+

Bonjour, {name}. Vous avez {age} ans.

); } @@ -276,9 +279,9 @@ button { display: block; margin-top: 10px; } --- -### Updating state based on the previous state {/*updating-state-based-on-the-previous-state*/} +### Mettre à jour l'état selon son état précédent {/*updating-state-based-on-the-previous-state*/} -Suppose the `age` is `42`. This handler calls `setAge(age + 1)` three times: +Supposons que `age` vaut `42`. Ce gestionnaire appelle `setAge(age + 1)` trois fois : ```js function handleClick() { @@ -288,9 +291,9 @@ function handleClick() { } ``` -However, after one click, `age` will only be `43` rather than `45`! This is because calling the `set` function [does not update](/learn/state-as-a-snapshot) the `age` state variable in the already running code. So each `setAge(age + 1)` call becomes `setAge(43)`. +Cependant, après un click, `age` ne va valoir que `43`, plutôt que `45` ! C'est parce qu'appeler la fonction `set` [ne met pas à jour](/learn/state-as-a-snapshot) la variable d'état `age` dans le code en cours d'exécution. Donc, chaque appel à `setAge(age + 1)` devient `setAge(43)`. -To solve this problem, **you may pass an *updater function*** to `setAge` instead of the next state: +Pour résoudre ce problème, **vous devez passer une *fonction de mise à jour*** à `setAge` au lieu du prochain état : ```js [[1, 2, "a", 0], [2, 2, "a + 1"], [1, 3, "a", 0], [2, 3, "a + 1"], [1, 4, "a", 0], [2, 4, "a + 1"]] function handleClick() { @@ -300,31 +303,32 @@ function handleClick() { } ``` -Here, `a => a + 1` is your updater function. It takes the pending state and calculates the next state from it. +Ici, `a => a + 1` est votre fonction de mise à jour. Elle prend l'état en attente et calcule à partir de celui-ci le prochain état. -React puts your updater functions in a [queue.](/learn/queueing-a-series-of-state-updates) Then, during the next render, it will call them in the same order: +React met vos fonctions de mise à jour dans une [file](/learn/queueing-a-series-of-state-updates). Ensuite, pendant le prochain rendu, il va les appeler dans le même ordre : -1. `a => a + 1` will receive `42` as the pending state and return `43` as the next state. -1. `a => a + 1` will receive `43` as the pending state and return `44` as the next state. -1. `a => a + 1` will receive `44` as the pending state and return `45` as the next state. +1. `a => a + 1` recevra un état en attente valant `42` et va retourner un prochain état valant `43`. +1. `a => a + 1` recevra un état en attente valant `43` et va retourner un prochain état valant `44`. +1. `a => a + 1` recevra un état en attente valant `44` et va retourner un prochain état valant `45`. -There are no other queued updates, so React will store `45` as the current state in the end. +Il n'y a pas d'autres mises à jour en file, React stockera donc à la fin `45` comme étant l'état courant. -By convention, it's common to name the pending state argument for the first letter of the state variable name, like `a` for `age`. However, you may also call it like `prevAge` or something else that you find clearer. +Par convention, il est commun de nommer l'argument de l'état en attente selon la première lettre du nom de la variable d'état, comme `a` pour `age`. Cependant, vous pouvez également le nommer `prevAge`, ou quelque chose d'autre que vous trouvez plus clair. -React may [call your updaters twice](#my-initializer-or-updater-function-runs-twice) in development to verify that they are [pure.](/learn/keeping-components-pure) +En développement, React pourra [appeler deux fois vos mises à jour](#my-initializer-or-updater-function-runs-twice) pour vérifier si elles sont [pures](/learn/keeping-components-pure). -#### Is using an updater always preferred? {/*is-using-an-updater-always-preferred*/} +#### Est-il toujours préférable d'utiliser une mise à jour ? {/*is-using-an-updater-always-preferred*/} + +Vous pourrez peut-être entendre des recommandations vous disant de toujours écrire votre code de cette manière, si l'état que vous mettez à jour est calculé depuis l'état précédent : `setAge(a => a + 1)`. Il n'y a aucun mal à le faire, mais ce n'est pas toujours nécessaire. -You might hear a recommendation to always write code like `setAge(a => a + 1)` if the state you're setting is calculated from the previous state. There is no harm in it, but it is also not always necessary. -In most cases, there is no difference between these two approaches. React always makes sure that for intentional user actions, like clicks, the `age` state variable would be updated before the next click. This means there is no risk of a click handler seeing a "stale" `age` at the beginning of the event handler. +Dans la plupart des cas, il n'y a aucune différence entre ces deux approches. React vérifiera toujours, pour les actions intentionnelles des utilisateurs, que l'état `age` soit mis à jour avant le prochain click. Cela signifie qu'il n'y a aucun risque à ce qu'un gestionnaire de click voit un `age` "obsolète" au début de la gestion des évènements. -However, if you do multiple updates within the same event, updaters can be helpful. They're also helpful if accessing the state variable itself is inconvenient (you might run into this when optimizing re-renders). +Cependant, si vous opérez plusieurs mises à jour dans le même évènement, les mises à jours peuvent être utiles. Elles sont également utiles s'il n'est pas pratique d'accèder à la variable d'état elle-même (vous pourrez rencontrer ce cas en optimisant les rendus). -If you prefer consistency over slightly more verbose syntax, it's reasonable to always write an updater if the state you're setting is calculated from the previous state. If it's calculated from the previous state of some *other* state variable, you might want to combine them into one object and [use a reducer.](/learn/extracting-state-logic-into-a-reducer) +Si vous préfèrez la consistance plutôt qu'une syntaxe un peu moins verbeuse, il est raisonnable de toujours écrire une mise à jour si l'état que vous mettez à jour est calculé à partir de l'état précédent. S'il est calculé depuis l'état précédent d'une *autre* variable d'état, vous pourrez peut-être les combiner en une seul objet et [utiliser un reducer.](/learn/extracting-state-logic-into-a-reducer) From 3fcd894ac59a4ddf675c0d1a67db6125f7f9883f Mon Sep 17 00:00:00 2001 From: nalin8 Date: Thu, 1 Jun 2023 20:46:12 +0200 Subject: [PATCH 2/9] fix: remove incorrect translation --- src/content/reference/react/useState.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index f0e6a2566..89670ab7e 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -110,9 +110,6 @@ La convention est de nommer les variables d'états de cette manière : `[somethi `useState` retourne un tableau avec exactement deux valeurs : -1. L'état courant. Pendant le premier rendu, il sera le même que l'`initialState` que vous avez passé en entrée. -2. La [fonction `set`](#setstate). Elle vous permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. - 1. L'état courant de cette variable d'état, initialement le même que l'état initial que vous avez passé en entrée. 2. La fonction `set` qui vous permet de le changer avec n'importe quelle valeur lors d'une interaction. @@ -323,7 +320,6 @@ En développement, React pourra [appeler deux fois vos mises à jour](#my-initia Vous pourrez peut-être entendre des recommandations vous disant de toujours écrire votre code de cette manière, si l'état que vous mettez à jour est calculé depuis l'état précédent : `setAge(a => a + 1)`. Il n'y a aucun mal à le faire, mais ce n'est pas toujours nécessaire. - Dans la plupart des cas, il n'y a aucune différence entre ces deux approches. React vérifiera toujours, pour les actions intentionnelles des utilisateurs, que l'état `age` soit mis à jour avant le prochain click. Cela signifie qu'il n'y a aucun risque à ce qu'un gestionnaire de click voit un `age` "obsolète" au début de la gestion des évènements. Cependant, si vous opérez plusieurs mises à jour dans le même évènement, les mises à jours peuvent être utiles. Elles sont également utiles s'il n'est pas pratique d'accèder à la variable d'état elle-même (vous pourrez rencontrer ce cas en optimisant les rendus). From 943a0ad05209a8b8322a3a3b741679cb95e43403 Mon Sep 17 00:00:00 2001 From: nalin8 Date: Thu, 1 Jun 2023 20:58:54 +0200 Subject: [PATCH 3/9] =?UTF-8?q?fix:=20bool=C3=A9an=20=3D>=20bool=C3=A9en?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/useState.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 89670ab7e..071f6127b 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -200,9 +200,9 @@ export default function MyInput() { -#### Case à cocher (booléan) {/*checkbox-boolean*/} +#### Case à cocher (booléen) {/*checkbox-boolean*/} -Dans cet exemple, la variable d'état `liked` contient un booléan. Lorsque vous cliquez sur la case, `setLiked` met à jour la variable d'état `liked` selon si la case est cochée ou non. La variable `liked` est utilisée pour effectuer le rendu du texte sous la case à cocher. +Dans cet exemple, la variable d'état `liked` contient un booléen. Lorsque vous cliquez sur la case, `setLiked` met à jour la variable d'état `liked` selon si la case est cochée ou non. La variable `liked` est utilisée pour effectuer le rendu du texte sous la case à cocher. From 45c96e4d75f8475c0605d6714e554239dabd18b3 Mon Sep 17 00:00:00 2001 From: nalin8 Date: Sat, 3 Jun 2023 16:25:54 +0200 Subject: [PATCH 4/9] fix: change multiple translations --- src/content/reference/react/useState.md | 40 ++++++++++++------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 071f6127b..b1c32b05a 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -27,7 +27,7 @@ import { useState } from 'react'; function MyComponent() { const [age, setAge] = useState(28); - const [name, setName] = useState('Taylor'); + const [name, setName] = useState('Clara'); const [todos, setTodos] = useState(() => createTodos()); // ... ``` @@ -46,7 +46,7 @@ La convention est de nommer les variables d'états de cette manière : `[somethi `useState` retourne un tableau avec exactement deux valeurs : 1. L'état courant. Pendant le premier rendu, il sera le même que l'`initialState` que vous avez passé en entrée. -2. La [fonction `set`](#setstate). Elle vous permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. +2. La [fonction de mise à jour](#setstate). Elle vous permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. #### Limitations {/*caveats*/} @@ -55,15 +55,15 @@ La convention est de nommer les variables d'états de cette manière : `[somethi --- -### Les fonctions `set`, comme `setSomething(nextState)` {/*setstate*/} +### Les fonctions de mise à jour, comme `setSomething(nextState)` {/*setstate*/} -La fonction `set` retournée par `useState` permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. Vous pouvez directement passer le prochain état, ou une fonction qui le calcule à l'aide de l'état précédent : +La fonction de mise à jour retournée par `useState` permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. Vous pouvez directement passer le prochain état, ou une fonction qui le calcule à l'aide de l'état précédent : ```js const [name, setName] = useState('Edward'); function handleClick() { - setName('Taylor'); + setName('Clara'); setAge(a => a + 1); // ... ``` @@ -71,21 +71,21 @@ function handleClick() { #### Paramètres {/*setstate-parameters*/} * `nextState`: La valeur désirée de l'état. Elle peut être une valeur de n'importe quel type, mais il existe un comportement spécial pour les fonctions. - * Si vous passez une fonction en tant que `nextState`, elle sera traitée comme une _fonction de mise à jour_ (*updater function, NdT*). Elle doit être pure, doit prendre l'état en attente comme seul argument, et doit retourner le prochain état. React mettra votre fonction de mise à jour dans une file et fera un nouveau rendu de votre composant. Pendant le prochain rendu, React va calculer le prochain état en appliquant toutes les fonctions de mises à jour à l'état précédent. [Voir un exemple ci-dessous](#updating-state-based-on-the-previous-state). + * Si vous passez une fonction en tant que `nextState`, elle sera traitée comme une _fonction de mise à jour_ (*updater function, NdT*). Elle doit être pure, doit prendre l'état en attente comme seul argument, et doit retourner le prochain état. React mettra votre fonction de mise à jour dans une file d'attente et fera un nouveau rendu de votre composant. Pendant le prochain rendu, React va calculer le prochain état en appliquant toutes les fonctions de mises à jour à l'état précédent. [Voir un exemple ci-dessous](#updating-state-based-on-the-previous-state). #### Valeur renvoyée {/*setstate-returns*/} -Les fonctions `set` n'ont pas de valeur de retour. +Les fonctions de mise à jour n'ont pas de valeur de retour. #### Limitations {/*setstate-caveats*/} -* La fonction `set` **ne met à jour que les variables d'état pour le *prochain* rendu**. Si vous lisez la variable d'état après avoir appelé la fonction `set`, [vous obtiendrez la même ancienne valeur](#ive-updated-the-state-but-logging-gives-me-the-old-value) qui était sur votre écran avant l'appel. +* La fonction de mise à jour **ne met à jour que les variables d'état pour le *prochain* rendu**. Si vous lisez la variable d'état après avoir appelé la fonction de mise à jour, [vous obtiendrez la même ancienne valeur](#ive-updated-the-state-but-logging-gives-me-the-old-value) qui était sur votre écran avant l'appel. * Si la nouvelle valeur que vous donnez est identique au `state` actuel, en comparant au moyen de [`Object.is`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is), React **ne fera pas un nouveau rendu de ce composant et de ses enfants**. Il s'agit d'une optimisation. Même si, dans certains cas, React a tout de même besoin d'appeler votre composant sans faire de rendu de ses enfants, ça ne devrait pas affecter votre code. -* React [met à jour les états par lots](/learn/queueing-a-series-of-state-updates). Il met à jour l'écran après que tous les gestionnaires d'évènements aient été lancés et qu'ils aient appelés leurs fonctions `set`. Ça évite des rendu inutiles pour un unique évènement. Dans de rares cas où vous avez besoin de forcer React à mettre à jour l'écran plus tôt, par exemple pour accéder au DOM, vous pouvez utiliser [`flushSync`](/reference/react-dom/flushSync). +* React [met à jour les états par lots](/learn/queueing-a-series-of-state-updates). Il met à jour l'écran après que tous les gestionnaires d'évènements aient été lancés et qu'ils aient appelé leurs fonctions de mise à jour. Ça évite des rendu inutiles pour un unique évènement. Dans de rares cas où vous avez besoin de forcer React à mettre à jour l'écran plus tôt, par exemple pour accéder au DOM, vous pouvez utiliser [`flushSync`](/reference/react-dom/flushSync). -* Appeler la fonction `set` *pendant le rendu* est autorisé seulement dans le composant en train d'être rendu. React ignorera son retour et essayera immédiatement de faire un nouveau rendu avec le nouvel état. Ce modèle est rarement nécessaire, mais vous pouvez l'utiliser pour **stocker des informations des précédents rendus**. [Voir un exemple ci-dessous](#storing-information-from-previous-renders). +* Appeler la fonction de mise à jour *pendant le rendu* est autorisé seulement dans le composant en train d'être rendu. React ignorera son retour et essayera immédiatement de faire un nouveau rendu avec le nouvel état. Ce modèle est rarement nécessaire, mais vous pouvez l'utiliser pour **stocker des informations des précédents rendus**. [Voir un exemple ci-dessous](#storing-information-from-previous-renders). * En mode Strict, React **appellera votre fonction d'initialisation deux fois** dans le but de vous aider à [trouver les impuretés accidentelles](#my-initializer-or-updater-function-runs-twice). Ce comportement est uniquement présent en mode développement et n'affecte pas la production. Si votre fonction de mise à jour est pure (ce qui devrait être le cas), ça ne devrait pas affecter le comportement. Le résultat d'un des appels sera ignoré. @@ -97,12 +97,12 @@ Les fonctions `set` n'ont pas de valeur de retour. Appelez `useState` à la racine de votre composant pour déclarer une ou plusieurs [variables d'état](/learn/state-a-components-memory). -```js [[1, 4, "age"], [2, 4, "setAge"], [3, 4, "42"], [1, 5, "name"], [2, 5, "setName"], [3, 5, "'Taylor'"]] +```js [[1, 4, "age"], [2, 4, "setAge"], [3, 4, "42"], [1, 5, "name"], [2, 5, "setName"], [3, 5, "'Clara'"]] import { useState } from 'react'; function MyComponent() { const [age, setAge] = useState(42); - const [name, setName] = useState('Taylor'); + const [name, setName] = useState('Clara'); // ... ``` @@ -111,9 +111,9 @@ La convention est de nommer les variables d'états de cette manière : `[somethi `useState` retourne un tableau avec exactement deux valeurs : 1. L'état courant de cette variable d'état, initialement le même que l'état initial que vous avez passé en entrée. -2. La fonction `set` qui vous permet de le changer avec n'importe quelle valeur lors d'une interaction. +2. La fonction de mise à jour qui vous permet de le changer avec n'importe quelle valeur lors d'une interaction. -Pour mettre à jour ce qu'il y a sur l'écran, appelez la fonction `set` avec le prochain autre état : +Pour mettre à jour ce qu'il y a sur l'écran, appelez la fonction de mise à jour avec le prochain autre état : ```js [[2, 2, "setName"]] function handleClick() { @@ -125,12 +125,12 @@ React stockera ce prochain état, fera un nouveau rendu de votre composant avec -Appeler la fonction `set` [**ne change pas** l'état actuel dans le code en train d'être exécuté](#ive-updated-the-state-but-logging-gives-me-the-old-value) : +Appeler la fonction de mise à jour [**ne change pas** l'état actuel dans le code en train d'être exécuté](#ive-updated-the-state-but-logging-gives-me-the-old-value) : ```js {3} function handleClick() { setName('Robin'); - console.log(name); // Toujours "Taylor" ! + console.log(name); // Toujours "Clara" ! } ``` @@ -246,7 +246,7 @@ Vous pouvez déclarer plus d'une variable d'état dans le même composant. Chaqu import { useState } from 'react'; export default function Form() { - const [name, setName] = useState('Taylor'); + const [name, setName] = useState('Clara'); const [age, setAge] = useState(42); return ( @@ -288,7 +288,7 @@ function handleClick() { } ``` -Cependant, après un click, `age` ne va valoir que `43`, plutôt que `45` ! C'est parce qu'appeler la fonction `set` [ne met pas à jour](/learn/state-as-a-snapshot) la variable d'état `age` dans le code en cours d'exécution. Donc, chaque appel à `setAge(age + 1)` devient `setAge(43)`. +Cependant, après un click, `age` ne va valoir que `43`, plutôt que `45` ! C'est parce qu'appeler la fonction de mise à jour [ne met pas à jour](/learn/state-as-a-snapshot) la variable d'état `age` dans le code en cours d'exécution. Donc, chaque appel à `setAge(age + 1)` devient `setAge(43)`. Pour résoudre ce problème, **vous devez passer une *fonction de mise à jour*** à `setAge` au lieu du prochain état : @@ -302,13 +302,13 @@ function handleClick() { Ici, `a => a + 1` est votre fonction de mise à jour. Elle prend l'état en attente et calcule à partir de celui-ci le prochain état. -React met vos fonctions de mise à jour dans une [file](/learn/queueing-a-series-of-state-updates). Ensuite, pendant le prochain rendu, il va les appeler dans le même ordre : +React met vos fonctions de mise à jour dans une [file d'attente](/learn/queueing-a-series-of-state-updates). Ensuite, pendant le prochain rendu, il va les appeler dans le même ordre : 1. `a => a + 1` recevra un état en attente valant `42` et va retourner un prochain état valant `43`. 1. `a => a + 1` recevra un état en attente valant `43` et va retourner un prochain état valant `44`. 1. `a => a + 1` recevra un état en attente valant `44` et va retourner un prochain état valant `45`. -Il n'y a pas d'autres mises à jour en file, React stockera donc à la fin `45` comme étant l'état courant. +Il n'y a pas d'autres mises à jour en file d'attente, React stockera donc à la fin `45` comme étant l'état courant. Par convention, il est commun de nommer l'argument de l'état en attente selon la première lettre du nom de la variable d'état, comme `a` pour `age`. Cependant, vous pouvez également le nommer `prevAge`, ou quelque chose d'autre que vous trouvez plus clair. From c9d331443d419708496e60a9474975ef5a6cc0d5 Mon Sep 17 00:00:00 2001 From: nalin8 Date: Mon, 5 Jun 2023 22:27:39 +0200 Subject: [PATCH 5/9] feat: continue the translation --- src/content/reference/react/useState.md | 78 ++++++++++++------------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index b1c32b05a..e7e853162 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -328,11 +328,11 @@ Si vous préfèrez la consistance plutôt qu'une syntaxe un peu moins verbeuse, - + -#### Passing the updater function {/*passing-the-updater-function*/} +#### Passer la fonction de mise à jour {/*passing-the-updater-function*/} -This example passes the updater function, so the "+3" button works. +Cet exemple passe la fonction de mise à jour, donc le bouton "+3" fonctionne. @@ -348,7 +348,7 @@ export default function Counter() { return ( <> -

Your age: {age}

+

Votre âge : {age}

+ }}>Ajouter ) } @@ -746,7 +746,7 @@ function Task({ todo, onChange, onDelete }) { }); }} /> ); @@ -755,7 +755,7 @@ function Task({ todo, onChange, onDelete }) { <> {todo.title} ); @@ -774,7 +774,7 @@ function Task({ todo, onChange, onDelete }) { /> {todoContent} ); @@ -791,9 +791,9 @@ ul, li { margin: 0; padding: 0; } -#### Writing concise update logic with Immer {/*writing-concise-update-logic-with-immer*/} +#### Écrire la logique d'une mise à jour de manière concise avec Immer {/*writing-concise-update-logic-with-immer*/} -If updating arrays and objects without mutation feels tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer) to reduce repetitive code. Immer lets you write concise code as if you were mutating objects, but under the hood it performs immutable updates: +Si le fait de mettre à jour des tableaux et des objets sans mutation vous paraît fastidieux, vous pouvez utiliser une librairie pour réduire le code répétitif, comme [Immer](https://github.com/immerjs/use-immer). Immer vous permet d'écrire du code concis comme si vous étiez en train de muter des objets, mais, en réalité, il réalise des mises à jour immutables : @@ -822,8 +822,8 @@ export default function BucketList() { return ( <> -

Art Bucket List

-

My list of art to see:

+

Bucket List Art

+

Ma liste d'œuvre d'arts à voir :

From 5cfc822a24e9eb67219cdb2ffffa9cbd48b71951 Mon Sep 17 00:00:00 2001 From: nalin8 Date: Tue, 6 Jun 2023 00:29:59 +0200 Subject: [PATCH 6/9] feat: continue the translation to line 1999 --- src/content/reference/react/useState.md | 98 ++++++++++++------------- 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index e7e853162..d24f0fa6d 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -882,9 +882,9 @@ function ItemList({ artworks, onToggle }) { --- -### Avoiding recreating the initial state {/*avoiding-recreating-the-initial-state*/} +### Éviter de récréer l'état initial {/*avoiding-recreating-the-initial-state*/} -React saves the initial state once and ignores it on the next renders. +React sauvegarde l'état initial et l'ignore pendant le prochain rendu. ```js function TodoList() { @@ -892,9 +892,9 @@ function TodoList() { // ... ``` -Although the result of `createInitialTodos()` is only used for the initial render, you're still calling this function on every render. This can be wasteful if it's creating large arrays or performing expensive calculations. +Même si le résultat de `createInitialTodos()` est utilisé seulement pour le rendu initial, vous appelez tout de même cette fonction à chaque rendu. Ça peut gâcher les performances de votre application si vous créez de grands tableaux ou si vous lancez des calculs coûteux. -To solve this, you may **pass it as an _initializer_ function** to `useState` instead: +Pour résoudre cette problématique, vous pouvez à la place **passer une fonction _d'initialisation_** à `useState` : ```js function TodoList() { @@ -902,15 +902,15 @@ function TodoList() { // ... ``` -Notice that you’re passing `createInitialTodos`, which is the *function itself*, and not `createInitialTodos()`, which is the result of calling it. If you pass a function to `useState`, React will only call it during initialization. +Notez que vous passez `createInitialTodos`, qui est la *fonction elle-même*, et non pas `createInitialTodos()`, qui est le résultat de l'appel. Si vous passez une fonction à `useState`, React ne l'appelera que pendant l'initialisation. -React may [call your initializers twice](#my-initializer-or-updater-function-runs-twice) in development to verify that they are [pure.](/learn/keeping-components-pure) +React pourrait [appeler vos fonctions d'initialisations deux fois](#my-initializer-or-updater-function-runs-twice) afin de vérifier qu'elles soient [pures.](/learn/keeping-components-pure) - + -#### Passing the initializer function {/*passing-the-initializer-function*/} +#### Passer la fonction d'initialisation {/*passing-the-initializer-function*/} -This example passes the initializer function, so the `createInitialTodos` function only runs during initialization. It does not run when component re-renders, such as when you type into the input. +Cet exemple passe la fonction d'initialisation pour que la fonction `createInitialTodos` ne soit lancée que pendant l'initialisation. Elle ne se lance pas quand le composant effectue un nouveau rendu, comme lorsque vous tapez dans le champ de saisie. @@ -944,7 +944,7 @@ export default function TodoList() { id: todos.length, text: text }, ...todos]); - }}>Add + }}>Ajouter
    {todos.map(item => (
  • @@ -961,9 +961,9 @@ export default function TodoList() { -#### Passing the initial state directly {/*passing-the-initial-state-directly*/} +#### Directement passer l'état initial {/*passing-the-initial-state-directly*/} -This example **does not** pass the initializer function, so the `createInitialTodos` function runs on every render, such as when you type into the input. There is no observable difference in behavior, but this code is less efficient. +Cet exemple **ne passe pas** la fonction d'initialisation, donc la fonction `createInitialTodos` se lance à chaque rendu, comme lorsque vous tapez dans le champ de saisie. Il n'y a pas de différence de comportement remarquable, mais le code est moins efficace. @@ -997,7 +997,7 @@ export default function TodoList() { id: todos.length, text: text }, ...todos]); - }}>Add + }}>Ajouter
      {todos.map(item => (
    • @@ -1018,13 +1018,13 @@ export default function TodoList() { --- -### Resetting state with a key {/*resetting-state-with-a-key*/} +### Réinitialiser l'état avec une clé {/*resetting-state-with-a-key*/} -You'll often encounter the `key` attribute when [rendering lists.](/learn/rendering-lists) However, it also serves another purpose. +Vous pourriez parfois rencontrer un attribut `key` lors du [rendu de listes](/learn/rendering-lists). Cependant, il sert à autre chose. -You can **reset a component's state by passing a different `key` to a component.** In this example, the Reset button changes the `version` state variable, which we pass as a `key` to the `Form`. When the `key` changes, React re-creates the `Form` component (and all of its children) from scratch, so its state gets reset. +Vous pouvez **réinitialiser l'état d'un composant en lui passant une `key` différente**. Dans cet exemple, le bouton Réinitialiser change la variable d'état `version`, laquelle étant passée dans une `key` à `Form`. Quand la `key` change, React re-crée le composant `Form` (et tous ses enfants) depuis le début, donc son état est réinitialisé. -Read [preserving and resetting state](/learn/preserving-and-resetting-state) to learn more. +Lire [préserver et réinitialiser l'état](/learn/preserving-and-resetting-state) pour en savoir plus. @@ -1040,14 +1040,14 @@ export default function App() { return ( <> - +
      ); } function Form() { - const [name, setName] = useState('Taylor'); + const [name, setName] = useState('Clara'); return ( <> @@ -1055,7 +1055,7 @@ function Form() { value={name} onChange={e => setName(e.target.value)} /> -

      Hello, {name}.

      +

      Bonjour, {name}.

      ); } @@ -1069,19 +1069,19 @@ button { display: block; margin-bottom: 20px; } --- -### Storing information from previous renders {/*storing-information-from-previous-renders*/} +### Stocker les informations des rendus précédents {/*storing-information-from-previous-renders*/} -Usually, you will update state in event handlers. However, in rare cases you might want to adjust state in response to rendering -- for example, you might want to change a state variable when a prop changes. +La plupart du temps, vous mettrez à jour les états dans des gestionnaires d'évènements. Cependant, dans de rares cas, vous pourriez peut-être vouloir ajouter l'état en fonction du rendu -- par exemple, vous pourriez peut-être vouloir changer une variable d'état quand une propriété change. -In most cases, you don't need this: +Dans la plupart des cas, vous n'avez pas besoin de ça : -* **If the value you need can be computed entirely from the current props or other state, [remove that redundant state altogether.](/learn/choosing-the-state-structure#avoid-redundant-state)** If you're worried about recomputing too often, the [`useMemo` Hook](/reference/react/useMemo) can help. -* If you want to reset the entire component tree's state, [pass a different `key` to your component.](#resetting-state-with-a-key) -* If you can, update all the relevant state in the event handlers. +* **Si la valeur dont vous avez besoin peut être totalement calculée à partir des propriétés actuelles ou d'un autre état, [supprimez complètement ces états redondants](/learn/choosing-the-state-structure#avoid-redundant-state)**. Si effectuer de nouveaux calculs trop fréquemment vous dérange, le [Hook `useMemo`](/reference/react/useMemo) peut vous aider. +* Si vous voulez réinitialiser l'entièreté de l'arbre d'un composant, [passez une `key` différente à votre composant](#resetting-state-with-a-key). +* Si vous le pouvez, mettez à jour tous les états correspondants dans des gestionnaires d'évènements. -In the rare case that none of these apply, there is a pattern you can use to update state based on the values that have been rendered so far, by calling a `set` function while your component is rendering. +Dans de rares autres cas, il existe un modèle que vous pouvez utiliser pour mettre à jour un état selon les états qui ont été rendus jusqu'ici, en appelant une fonction de mise à jour pendant que votre composant est en cours du rendu. -Here's an example. This `CountLabel` component displays the `count` prop passed to it: +Voici un exemple. Ce composant `CountLabel` affiche une propriété `count` qui lui est passé : ```js CountLabel.js export default function CountLabel({ count }) { @@ -1089,7 +1089,7 @@ export default function CountLabel({ count }) { } ``` -Say you want to show whether the counter has *increased or decreased* since the last change. The `count` prop doesn't tell you this -- you need to keep track of its previous value. Add the `prevCount` state variable to track it. Add another state variable called `trend` to hold whether the count has increased or decreased. Compare `prevCount` with `count`, and if they're not equal, update both `prevCount` and `trend`. Now you can show both the current count prop and *how it has changed since the last render*. +Mettons que vous vouliez montrer si le compteur a *augmenté ou diminué* depuis le dernier changement. La propriété `count` ne vous permet pas de savoir ceci -- vous avez besoin de garder une trace de sa dernière valeur. Ajoutez la variable d'état `prevCount` afin de garder une trace de sa dernière valeur. Ajoutez une autre variable d'état appelée `trend` qui permet de savoir si le compteur a augmenté ou diminué. Comparez `prevCount` avec `count`, et s'ils ne sont pas égaux, mettez à jour `prevCount` et `trend`. Vous pouvez maintenant montrer la propriété du compteur courante et *comment elle a changé depuis le dernier rendu*. @@ -1102,10 +1102,10 @@ export default function App() { return ( <> @@ -1121,12 +1121,12 @@ export default function CountLabel({ count }) { const [trend, setTrend] = useState(null); if (prevCount !== count) { setPrevCount(count); - setTrend(count > prevCount ? 'increasing' : 'decreasing'); + setTrend(count > prevCount ? 'augmenté' : 'diminué'); } return ( <>

      {count}

      - {trend &&

      The count is {trend}

      } + {trend &&

      Le compteur a {trend}

      } ); } @@ -1138,34 +1138,34 @@ button { margin-bottom: 10px; }       -Note that if you call a `set` function while rendering, it must be inside a condition like `prevCount !== count`, and there must be a call like `setPrevCount(count)` inside of the condition. Otherwise, your component would re-render in a loop until it crashes. Also, you can only update the state of the *currently rendering* component like this. Calling the `set` function of *another* component during rendering is an error. Finally, your `set` call should still [update state without mutation](#updating-objects-and-arrays-in-state) -- this doesn't mean you can break other rules of [pure functions.](/learn/keeping-components-pure) +Notez que si vous appelez une fonction de mise à jour pendant le rendu, elle doit être dans une condition, comme `prevCount !== count`, et il doit y avoir un appel dans la condition, comme `setPrevCount(count)`. Sinon, votre composant effectuera des rendus en boucle jusqu'à crash. De plus, vous pouvez seulement mettre à jour l'état du composant *en cours de rendu* de cette manière. Appeler la fonction de mise à jour d'un *autre* composant pendant le rendu est une erreur. Finalement, votre appel de mise à jour devrait toujours [mettre à jour l'état sans mutation](#updating-objects-and-arrays-in-state) -- cela ne veut pas dire que vous pouvez enfreindre les autres règles des [fonctions pures](/learn/keeping-components-pure). -This pattern can be hard to understand and is usually best avoided. However, it's better than updating state in an effect. When you call the `set` function during render, React will re-render that component immediately after your component exits with a `return` statement, and before rendering the children. This way, children don't need to render twice. The rest of your component function will still execute (and the result will be thrown away). If your condition is below all the Hook calls, you may add an early `return;` to restart rendering earlier. +Cette méthode peut être difficile à comprendre et est la plupart du temps à éviter. Cependant, c'est toujours mieux que de mettre à jour un état dans un effet. Lorsque vous appelez une fonction de mise à jour pendant le rendu, React va effectuer un autre rendu de ce composant immédiatement après que votre composant se soit terminé grâce à un `return`, et avant d'effectuer un rendu de ses enfants. De cette manière, les enfants n'ont pas besoin d'effectuer deux rendus. Le reste de votre composant va toujours s'effectuer (et le résultat va être jeté). Si votre composant est en-dessous de tous les appels à des Hook, vous devez ajouter un `return;` en avance pour redémarrer plus tôt le rendu. --- -## Troubleshooting {/*troubleshooting*/} +## Dépannage {/*troubleshooting*/} -### I've updated the state, but logging gives me the old value {/*ive-updated-the-state-but-logging-gives-me-the-old-value*/} +### J'ai mis à jour l'état, mais le logging m'affiche toujours l'ancienne valeur {/*ive-updated-the-state-but-logging-gives-me-the-old-value*/} -Calling the `set` function **does not change state in the running code**: +Appeler la fonction de mise à jour **ne change pas l'état dans le code en cours de lancement** : ```js {4,5,8} function handleClick() { console.log(count); // 0 - setCount(count + 1); // Request a re-render with 1 - console.log(count); // Still 0! + setCount(count + 1); // Demander un nouveau rendu avec 1 + console.log(count); // Toujours 0 ! setTimeout(() => { - console.log(count); // Also 0! + console.log(count); // Encore 0 ! }, 5000); } ``` -This is because [states behaves like a snapshot.](/learn/state-as-a-snapshot) Updating state requests another render with the new state value, but does not affect the `count` JavaScript variable in your already-running event handler. +C'est parce que l'[état se comporte comme une snapshot](/learn/state-as-a-snapshot). Mettre à jour l'état déclenche un autre rendu avec la nouvelle variable d'état, mais cela n'affecte pas la variable JavaScript `count` dans le gestionnaire d'évènements en train de s'exécuter. -If you need to use the next state, you can save it in a variable before passing it to the `set` function: +Si vous avez besoin du prochain état, vous pouvez le sauvegarder dans une variable avant de le passer dans la fonction de mise à jour : ```js const nextCount = count + 1; @@ -1177,19 +1177,19 @@ console.log(nextCount); // 1 --- -### I've updated the state, but the screen doesn't update {/*ive-updated-the-state-but-the-screen-doesnt-update*/} +### J'ai mis à jour l'état, mais l'écran ne se met pas à jour {/*ive-updated-the-state-but-the-screen-doesnt-update*/} -React will **ignore your update if the next state is equal to the previous state,** as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. This usually happens when you change an object or an array in state directly: +React va **ignorer votre mise à jour si le prochain état est égal à l'état précédent**, en comparant au moyen de [`Object.is`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Ça arrive la plupart du temps lorsque vous changez un objet ou un tableau directement dans l'état : ```js -obj.x = 10; // 🚩 Wrong: mutating existing object -setObj(obj); // 🚩 Doesn't do anything +obj.x = 10; // 🚩 Faux : mutation d'un objet existant +setObj(obj); // 🚩 Ne fait rien ``` -You mutated an existing `obj` object and passed it back to `setObj`, so React ignored the update. To fix this, you need to ensure that you're always [_replacing_ objects and arrays in state instead of _mutating_ them](#updating-objects-and-arrays-in-state): +Vous avez muté un objet `obj` existant et vous l'avez re-passé à `setObj`, donc React ignore la mise à jour. Pour résoudre cela, vous devez vous assurer que vous [_remplacez toujours les objets et les tableaux dans l'état plutôt que les _muter_](#updating-objects-and-arrays-in-state) : ```js -// ✅ Correct: creating a new object +// ✅ Correct : créer un nouvel objet setObj({ ...obj, x: 10 From d5924d79c2bb3411cfebb653b8334a810354b98b Mon Sep 17 00:00:00 2001 From: nalin8 Date: Wed, 7 Jun 2023 20:00:16 +0200 Subject: [PATCH 7/9] feat: end translation --- src/content/reference/react/useState.md | 71 ++++++++++++------------- 1 file changed, 35 insertions(+), 36 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index d24f0fa6d..325e72dcd 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -121,7 +121,7 @@ function handleClick() { } ``` -React stockera ce prochain état, fera un nouveau rendu de votre composant avec les nouvelles valeurs, et mettra à jour l'interface utilisateur *(UI, NdT)* +React stockera ce prochain état, fera un nouveau rendu de votre composant avec les nouvelles valeurs, et mettra à jour l'interface utilisateur *(UI, NdT)*. @@ -637,9 +637,9 @@ import TaskList from './TaskList.js'; let nextId = 3; const initialTodos = [ - { id: 0, title: 'Buy milk', done: true }, - { id: 1, title: 'Eat tacos', done: false }, - { id: 2, title: 'Brew tea', done: false }, + { id: 0, title: 'Acheter du lait', done: true }, + { id: 1, title: 'Manger des tacos', done: false }, + { id: 2, title: 'Faire infuser du thé', done: false }, ]; export default function TaskApp() { @@ -695,7 +695,7 @@ export default function AddTodo({ onAddTodo }) { return ( <> setTitle(e.target.value)} /> @@ -822,8 +822,8 @@ export default function BucketList() { return ( <> -

      Bucket List Art

      -

      Ma liste d'œuvre d'arts à voir :

      +

      Liste d'Art

      +

      Ma liste d'œuvres d'art à voir :

      @@ -922,7 +922,7 @@ function createInitialTodos() { for (let i = 0; i < 50; i++) { initialTodos.push({ id: i, - text: 'Item ' + (i + 1) + text: 'Objet ' + (i + 1) }); } return initialTodos; @@ -975,7 +975,7 @@ function createInitialTodos() { for (let i = 0; i < 50; i++) { initialTodos.push({ id: i, - text: 'Item ' + (i + 1) + text: 'Objet ' + (i + 1) }); } return initialTodos; @@ -1079,7 +1079,7 @@ Dans la plupart des cas, vous n'avez pas besoin de ça : * Si vous voulez réinitialiser l'entièreté de l'arbre d'un composant, [passez une `key` différente à votre composant](#resetting-state-with-a-key). * Si vous le pouvez, mettez à jour tous les états correspondants dans des gestionnaires d'évènements. -Dans de rares autres cas, il existe un modèle que vous pouvez utiliser pour mettre à jour un état selon les états qui ont été rendus jusqu'ici, en appelant une fonction de mise à jour pendant que votre composant est en cours du rendu. +Dans de rares autres cas, il existe un modèle que vous pouvez utiliser pour mettre à jour un état selon les états qui ont été rendus jusqu'ici, en appelant une fonction de mise à jour pendant que votre composant est en cours de rendu. Voici un exemple. Ce composant `CountLabel` affiche une propriété `count` qui lui est passé : @@ -1089,7 +1089,7 @@ export default function CountLabel({ count }) { } ``` -Mettons que vous vouliez montrer si le compteur a *augmenté ou diminué* depuis le dernier changement. La propriété `count` ne vous permet pas de savoir ceci -- vous avez besoin de garder une trace de sa dernière valeur. Ajoutez la variable d'état `prevCount` afin de garder une trace de sa dernière valeur. Ajoutez une autre variable d'état appelée `trend` qui permet de savoir si le compteur a augmenté ou diminué. Comparez `prevCount` avec `count`, et s'ils ne sont pas égaux, mettez à jour `prevCount` et `trend`. Vous pouvez maintenant montrer la propriété du compteur courante et *comment elle a changé depuis le dernier rendu*. +Mettons que vous vouliez montrer si le compteur a *augmenté ou diminué* depuis le dernier changement. La propriété `count` ne vous permet pas de savoir ça -- vous avez besoin de garder une trace de sa dernière valeur. Ajoutez la variable d'état `prevCount` afin de garder une trace de sa dernière valeur. Ajoutez une autre variable d'état appelée `trend` qui permet de savoir si le compteur a augmenté ou diminué. Comparez `prevCount` avec `count`, et, s'ils ne sont pas égaux, mettez à jour `prevCount` et `trend`. Vous pouvez maintenant montrer la propriété du compteur courante et *comment elle a changé depuis le dernier rendu*. @@ -1138,7 +1138,7 @@ button { margin-bottom: 10px; } -Notez que si vous appelez une fonction de mise à jour pendant le rendu, elle doit être dans une condition, comme `prevCount !== count`, et il doit y avoir un appel dans la condition, comme `setPrevCount(count)`. Sinon, votre composant effectuera des rendus en boucle jusqu'à crash. De plus, vous pouvez seulement mettre à jour l'état du composant *en cours de rendu* de cette manière. Appeler la fonction de mise à jour d'un *autre* composant pendant le rendu est une erreur. Finalement, votre appel de mise à jour devrait toujours [mettre à jour l'état sans mutation](#updating-objects-and-arrays-in-state) -- cela ne veut pas dire que vous pouvez enfreindre les autres règles des [fonctions pures](/learn/keeping-components-pure). +Notez que si vous appelez une fonction de mise à jour pendant le rendu, elle doit être dans une condition, telle que `prevCount !== count`, et il doit y avoir un appel dans la condition, tel que `setPrevCount(count)`. Sinon, votre composant effectuera des rendus en boucle jusqu'à crash. De plus, vous pouvez seulement mettre à jour l'état du composant *en cours de rendu* de cette manière. Appeler la fonction de mise à jour d'un *autre* composant pendant le rendu est une erreur. Finalement, votre appel de mise à jour devrait toujours [mettre à jour l'état sans mutation](#updating-objects-and-arrays-in-state) -- cela ne veut pas dire que vous pouvez enfreindre les autres règles des [fonctions pures](/learn/keeping-components-pure). Cette méthode peut être difficile à comprendre et est la plupart du temps à éviter. Cependant, c'est toujours mieux que de mettre à jour un état dans un effet. Lorsque vous appelez une fonction de mise à jour pendant le rendu, React va effectuer un autre rendu de ce composant immédiatement après que votre composant se soit terminé grâce à un `return`, et avant d'effectuer un rendu de ses enfants. De cette manière, les enfants n'ont pas besoin d'effectuer deux rendus. Le reste de votre composant va toujours s'effectuer (et le résultat va être jeté). Si votre composant est en-dessous de tous les appels à des Hook, vous devez ajouter un `return;` en avance pour redémarrer plus tôt le rendu. @@ -1186,7 +1186,7 @@ obj.x = 10; // 🚩 Faux : mutation d'un objet existant setObj(obj); // 🚩 Ne fait rien ``` -Vous avez muté un objet `obj` existant et vous l'avez re-passé à `setObj`, donc React ignore la mise à jour. Pour résoudre cela, vous devez vous assurer que vous [_remplacez toujours les objets et les tableaux dans l'état plutôt que les _muter_](#updating-objects-and-arrays-in-state) : +Vous avez muté un objet `obj` existant et vous l'avez re-passé à `setObj`, donc React ignore la mise à jour. Pour résoudre cela, vous devez vous assurer que vous [remplacez toujours les objets et les tableaux dans l'état plutôt que les _muter_](#updating-objects-and-arrays-in-state) : ```js // ✅ Correct : créer un nouvel objet @@ -1198,78 +1198,77 @@ setObj({ --- -### I'm getting an error: "Too many re-renders" {/*im-getting-an-error-too-many-re-renders*/} +### J'ai une erreur : "Too many re-renders" {/*im-getting-an-error-too-many-re-renders*/} -You might get an error that says: `Too many re-renders. React limits the number of renders to prevent an infinite loop.` Typically, this means that you're unconditionally setting state *during render*, so your component enters a loop: render, set state (which causes a render), render, set state (which causes a render), and so on. Very often, this is caused by a mistake in specifying an event handler: +Vous pourriez peut-être avoir une erreur disant : `Too many re-renders. React limits the number of renders to prevent an infinite loop`. La plupart du temps, cela signifie que vous mettez à jour un état de manière non conditionnelle *pendant le rendu*, donc votre composant rentre dans une boucle : rendu, mise à jour de l'état (qui cause un rendu), rendu, mise à jour de l'état (qui cause un rendu), etc. Peu souvent, c'est causé par une erreur en spécifiant le gestionnaire d'évènement : ```js {1-2} -// 🚩 Wrong: calls the handler during render +// 🚩 Faux : appelle le gestionnaire pendant le rendu return -// ✅ Correct: passes down the event handler +// ✅ Correct : passe le gestionnaire d'évènement return -// ✅ Correct: passes down an inline function +// ✅ Correct : passe une fonction en ligne return ``` -If you can't find the cause of this error, click on the arrow next to the error in the console and look through the JavaScript stack to find the specific `set` function call responsible for the error. +Si vous n'arrivez pas à trouver le cause de cette erreur, cliquez, dans la console, sur la flèche à côté de l'erreur, et regardez dans votre pile JavaScript afin de trouver la fonction de mise à jour responsable de cette erreur. --- -### My initializer or updater function runs twice {/*my-initializer-or-updater-function-runs-twice*/} +### Ma fonction d'initialisation ou ma fonction de mise à jour se lance deux fois {/*my-initializer-or-updater-function-runs-twice*/} -In [Strict Mode](/reference/react/StrictMode), React will call some of your functions twice instead of once: +En [mode Strict](/reference/react/StrictMode), React va appeler certaines de vos fonctions deux fois plutôt qu'une : ```js {2,5-6,11-12} function TodoList() { - // This component function will run twice for every render. + // La fonction de ce composant va se lancer deux fois pendant le rendu. const [todos, setTodos] = useState(() => { - // This initializer function will run twice during initialization. + // Cette fonction d'initialisation va se lancer deux fois pendant le rendu. return createTodos(); }); function handleClick() { setTodos(prevTodos => { - // This updater function will run twice for every click. + // Cette fonction de mise à jour va se lancer deux fois à chaque click. return [...prevTodos, createTodo()]; }); } // ... ``` -This is expected and shouldn't break your code. +C'est voulu, et ça ne devrait pas casser votre code. -This **development-only** behavior helps you [keep components pure.](/learn/keeping-components-pure) React uses the result of one of the calls, and ignores the result of the other call. As long as your component, initializer, and updater functions are pure, this shouldn't affect your logic. However, if they are accidentally impure, this helps you notice the mistakes. +Ce comportement, **uniquement présent en développement**, vous aide à [garder vos composants purs](/learn/keeping-components-pure). React utilise le résultat d'un des appels, et ignore le résultat de l'autre. Tant que vos composants, vos fonctions d'initialisation, et vos fonctions de mise à jour sont pures, ça ne devrait pas affecter votre logique. Cependant, si elles sont accidentellement impures, ça vous aide à remarquer vos erreurs. -For example, this impure updater function mutates an array in state: +Par exemple, cette fonction de mise à jour impure mute un tableau dans un état : ```js {2,3} setTodos(prevTodos => { - // 🚩 Mistake: mutating state + // 🚩 Erreur : muter un état prevTodos.push(createTodo()); }); ``` - -Because React calls your updater function twice, you'll see the todo was added twice, so you'll know that there is a mistake. In this example, you can fix the mistake by [replacing the array instead of mutating it](#updating-objects-and-arrays-in-state): +Comme React a appelé votre fonction de mise à jour à deux reprises, vous verrez que le `todo` a été appelé deux fois, et vous saurez qu'il y a une erreur. Dans cet exemple, vous pouvez résoudre l'erreur en [remplaçant le tableau, plutôt que de le muter](#updating-objects-and-arrays-in-state) : ```js {2,3} setTodos(prevTodos => { - // ✅ Correct: replacing with new state + // ✅ Correct : remplacer avec le nouvel état return [...prevTodos, createTodo()]; }); ``` -Now that this updater function is pure, calling it an extra time doesn't make a difference in behavior. This is why React calling it twice helps you find mistakes. **Only component, initializer, and updater functions need to be pure.** Event handlers don't need to be pure, so React will never call your event handlers twice. +Maintenant que cette fonction de mise à jour est pure, l'appeler une autre fois ne fait aucune différence de comportement. C'est pour cette raison que l'appel à deux reprises de React vous aide à trouver des erreurs. **Seulement les composants, les fonctions d'initialisation et les fonctions de mise à jour doivent être pures**. Les gestionnaires d'évènements n'ont pas besoin d'être purs, donc React ne les appellera jamais deux fois. -Read [keeping components pure](/learn/keeping-components-pure) to learn more. +Lire [garder les composants purs](/learn/keeping-components-pure) pour en savoir plus. --- -### I'm trying to set state to a function, but it gets called instead {/*im-trying-to-set-state-to-a-function-but-it-gets-called-instead*/} +### J'essaye de mettre à jour un état avec une fonction, mais elle est appelée à la place {/*im-trying-to-set-state-to-a-function-but-it-gets-called-instead*/} -You can't put a function into state like this: +Vous ne pouvez pas mettre une fonction dans un état comme ceci : ```js const [fn, setFn] = useState(someFunction); @@ -1279,7 +1278,7 @@ function handleClick() { } ``` -Because you're passing a function, React assumes that `someFunction` is an [initializer function](#avoiding-recreating-the-initial-state), and that `someOtherFunction` is an [updater function](#updating-state-based-on-the-previous-state), so it tries to call them and store the result. To actually *store* a function, you have to put `() =>` before them in both cases. Then React will store the functions you pass. +Comme vous passez une fonction, React part de principe que `someFunction` est une [fonction d'initialisation](#avoiding-recreating-the-initial-state), et que `someOtherFunction` est une [fonction de mise à jour](#updating-state-based-on-the-previous-state), et donc essaye de les appeler et de stocker leurs résultats. Pour réellement *stocker* une fonction, dans les deux cas, vous devez placer en amont `() =>`. Dans ce cas, React stockera les fonctions que vous passez. ```js {1,4} const [fn, setFn] = useState(() => someFunction); From 41c6916c0c0c1c4c93a70d728de88d4340ded874 Mon Sep 17 00:00:00 2001 From: Nina Alin <56309556+nina-alin@users.noreply.github.com> Date: Mon, 31 Jul 2023 09:28:04 +0200 Subject: [PATCH 8/9] Apply suggestions from code review Co-authored-by: Christophe Porteneuve --- src/content/reference/react/useState.md | 210 ++++++++++++------------ 1 file changed, 105 insertions(+), 105 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 325e72dcd..8ca91417b 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -4,7 +4,7 @@ title: useState -`useState` est un Hook React qui vous laisse ajouter une [variable d'état](/learn/state-a-components-memory) (*state, NdT*) dans votre composant. +`useState` est un Hook React qui vous permet d'ajouter une [variable d'état](/learn/state-a-components-memory) dans votre composant. ```js const [state, setState] = useState(initialState); @@ -39,25 +39,25 @@ La convention est de nommer les variables d'états de cette manière : `[somethi #### Paramètres {/*parameters*/} * `initialState`: La valeur initiale de votre état. Ça peut être une valeur de n'importe quel type, mais il existe un comportement spécial pour les fonctions. Cet argument est ignoré après le rendu initial. - * Si vous passez une fonction dans votre `initialState`, elle sera traitée comme une _fonction d'initialisation_ (*initializer function, NdT*). Elle doit être pure, ne doit pas prendre d'argument, et doit retourner une valeur de n'importe quel type. React appellera votre fonction d'initialisation en initialisant le composant, et stockera sa valeur de retour dans votre état initial. [Voir un exemple ci-dessous](#avoiding-recreating-the-initial-state). + * Si vous passez une fonction comme `initialState`, elle sera traitée comme une _fonction d'initialisation_. Elle doit être pure, ne doit pas prendre d'argument, et doit retourner une valeur qui peut être de n'importe quel type. React appellera votre fonction d'initialisation en initialisant le composant, et stockera sa valeur de retour dans votre état initial. [Voir un exemple ci-dessous](#avoiding-recreating-the-initial-state). #### Valeur renvoyée {/*returns*/} `useState` retourne un tableau avec exactement deux valeurs : -1. L'état courant. Pendant le premier rendu, il sera le même que l'`initialState` que vous avez passé en entrée. +1. L'état courant. Lors du premier rendu, ce sera l'`initialState` que vous avez passé en argument. 2. La [fonction de mise à jour](#setstate). Elle vous permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. #### Limitations {/*caveats*/} -* `useState` est un Hook, vous ne pouvez donc l’appeler qu'uniquement **à la racine de votre composant** ou de vos propres Hooks. Vous ne pouvez pas l’appeler à l’intérieur de boucles ou de conditions. Si nécessaire, extrayez un nouveau composant et déplacez l'état dans celui-ci. -* En mode Strict, React appellera votre **fonction d'initialisation** deux fois dans le but de vous aider à [trouver les impuretés accidentelles](#my-initializer-or-updater-function-runs-twice). Ce comportement est uniquement présent en mode développement et n'affecte pas la production. Si votre fonction d'initialisation est pure (ce qui devrait être le cas), ça ne devrait pas affecter le comportement. Le résultat d'un des appels sera ignoré. +* `useState` est un Hook, vous ne pouvez donc l’appeler qu'**à la racine de votre composant** ou de vos propres Hooks. Vous ne pouvez pas l’appeler à l’intérieur de boucles ou de conditions. Si nécessaire, extrayez un nouveau composant et déplacez l'état dans celui-ci. +* En mode strict, React **appellera votre fonction d'initialisation deux fois** afin de vous aider à [détecter des impuretés accidentelles](#my-initializer-or-updater-function-runs-twice). Ce comportement est uniquement présent en mode développement et n'affecte pas la production. Si votre fonction d'initialisation est pure (ce qui devrait être le cas), ça ne devrait pas affecter le comportement. Le résultat d'un des appels sera ignoré. --- ### Les fonctions de mise à jour, comme `setSomething(nextState)` {/*setstate*/} -La fonction de mise à jour retournée par `useState` permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. Vous pouvez directement passer le prochain état, ou une fonction qui le calcule à l'aide de l'état précédent : +La fonction de mise à jour renvoyée par `useState` permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. Vous pouvez passer le prochain état directement, ou passer une fonction qui le calcule sur base de l'état précédent : ```js const [name, setName] = useState('Edward'); @@ -70,12 +70,12 @@ function handleClick() { #### Paramètres {/*setstate-parameters*/} -* `nextState`: La valeur désirée de l'état. Elle peut être une valeur de n'importe quel type, mais il existe un comportement spécial pour les fonctions. - * Si vous passez une fonction en tant que `nextState`, elle sera traitée comme une _fonction de mise à jour_ (*updater function, NdT*). Elle doit être pure, doit prendre l'état en attente comme seul argument, et doit retourner le prochain état. React mettra votre fonction de mise à jour dans une file d'attente et fera un nouveau rendu de votre composant. Pendant le prochain rendu, React va calculer le prochain état en appliquant toutes les fonctions de mises à jour à l'état précédent. [Voir un exemple ci-dessous](#updating-state-based-on-the-previous-state). +* `nextState`: La valeur désirée de l'état. Elle peut être de n'importe quel type, mais les fonctions reçoivent un traitement spécifique. + * Si vous passez une fonction en tant que `nextState`, elle sera traitée comme une _fonction de mise à jour_. Elle doit être pure, doit prendre l'état en attente comme unique argument, et doit retourner le prochain état. React placera votre fonction de mise à jour dans une file d'attente et fera un nouveau rendu de votre composant. Pendant ce prochain rendu, React calculera le prochain état en appliquant toutes les fonctions de mise à jour l'une après l'autre, en commençant avec l'état précédent. [Voir un exemple ci-dessous](#updating-state-based-on-the-previous-state). #### Valeur renvoyée {/*setstate-returns*/} -Les fonctions de mise à jour n'ont pas de valeur de retour. +Les fonctions de mise à jour (celles renvoyées par `useState`) n'ont pas de valeur de retour. #### Limitations {/*setstate-caveats*/} @@ -83,15 +83,15 @@ Les fonctions de mise à jour n'ont pas de valeur de retour. * Si la nouvelle valeur que vous donnez est identique au `state` actuel, en comparant au moyen de [`Object.is`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is), React **ne fera pas un nouveau rendu de ce composant et de ses enfants**. Il s'agit d'une optimisation. Même si, dans certains cas, React a tout de même besoin d'appeler votre composant sans faire de rendu de ses enfants, ça ne devrait pas affecter votre code. -* React [met à jour les états par lots](/learn/queueing-a-series-of-state-updates). Il met à jour l'écran après que tous les gestionnaires d'évènements aient été lancés et qu'ils aient appelé leurs fonctions de mise à jour. Ça évite des rendu inutiles pour un unique évènement. Dans de rares cas où vous avez besoin de forcer React à mettre à jour l'écran plus tôt, par exemple pour accéder au DOM, vous pouvez utiliser [`flushSync`](/reference/react-dom/flushSync). +* React [met à jour les états par lots](/learn/queueing-a-series-of-state-updates). Il met à jour l'écran **après que tous les gestionnaires d'évènements ont été lancés** et qu'ils auront appelé leurs fonctions de mise à jour. Ça évite des rendus inutiles suite à un unique évènement. Dans les rares cas où vous auriez besoin de forcer React à mettre à jour l'écran plus tôt, par exemple pour accéder au DOM, vous pouvez utiliser [`flushSync`](/reference/react-dom/flushSync). -* Appeler la fonction de mise à jour *pendant le rendu* est autorisé seulement dans le composant en train d'être rendu. React ignorera son retour et essayera immédiatement de faire un nouveau rendu avec le nouvel état. Ce modèle est rarement nécessaire, mais vous pouvez l'utiliser pour **stocker des informations des précédents rendus**. [Voir un exemple ci-dessous](#storing-information-from-previous-renders). +* Il est possible d'appeler la fonction de mise à jour *pendant le rendu*, mais uniquement au sein du composant en cours de rendu. React ignorera le JSX résultat pour refaire immédiatement un rendu avec le nouvel état. Cette approche est rarement nécessaire, mais vous pouvez l'utiliser pour **stocker des informations des précédents rendus**. [Voir un exemple ci-dessous](#storing-information-from-previous-renders). -* En mode Strict, React **appellera votre fonction d'initialisation deux fois** dans le but de vous aider à [trouver les impuretés accidentelles](#my-initializer-or-updater-function-runs-twice). Ce comportement est uniquement présent en mode développement et n'affecte pas la production. Si votre fonction de mise à jour est pure (ce qui devrait être le cas), ça ne devrait pas affecter le comportement. Le résultat d'un des appels sera ignoré. +* En mode strict, React **appellera votre fonction d'initialisation deux fois** afin de vous aider à [détecter des impuretés accidentelles](#my-initializer-or-updater-function-runs-twice). Ce comportement est spécifique au mode développement et n'affecte pas la production. Si votre fonction de mise à jour est pure (ce qui devrait être le cas), ça ne devrait pas affecter le comportement. Le résultat d'un des appels sera ignoré. --- -## Usage {/*usage*/} +## Utilisation {/*usage*/} ### Ajouter un état à un composant {/*adding-state-to-a-component*/} @@ -106,14 +106,14 @@ function MyComponent() { // ... ``` -La convention est de nommer les variables d'états de cette manière : `[something, setSomething]`, en utilisant la [déstructuration positionnelle](https://fr.javascript.info/destructuring-assignment). +Par convention, on nomme les variables d'état comme suit : `[something, setSomething]`, en utilisant la [déstructuration positionnelle](https://fr.javascript.info/destructuring-assignment). -`useState` retourne un tableau avec exactement deux valeurs : +`useState` renvoie un tableau avec exactement deux valeurs : 1. L'état courant de cette variable d'état, initialement le même que l'état initial que vous avez passé en entrée. -2. La fonction de mise à jour qui vous permet de le changer avec n'importe quelle valeur lors d'une interaction. +2. La fonction de mise à jour qui vous permet d'en modifier la valeur lors d'une interaction. -Pour mettre à jour ce qu'il y a sur l'écran, appelez la fonction de mise à jour avec le prochain autre état : +Pour mettre à jour l'affichage, appelez la fonction de mise à jour avec le prochain état : ```js [[2, 2, "setName"]] function handleClick() { @@ -121,7 +121,7 @@ function handleClick() { } ``` -React stockera ce prochain état, fera un nouveau rendu de votre composant avec les nouvelles valeurs, et mettra à jour l'interface utilisateur *(UI, NdT)*. +React stockera ce prochain état, fera un nouveau rendu de votre composant avec les nouvelles valeurs, et mettra à jour l'interface utilisateur *(UI pour User Interface, NdT)*. @@ -134,11 +134,11 @@ function handleClick() { } ``` -Elle n'affecte que ce que `useState` va retourner à partir du *prochain* rendu. +Elle n'affecte que ce que `useState` renverra à partir du *prochain* rendu. - + #### Compteur (nombre) {/*counter-number*/} @@ -170,7 +170,7 @@ export default function Counter() { #### Champ de saisie (chaîne de caractères) {/*text-field-string*/} -Dans cet exemple, la variable d'état `text` contient une chaîne de caractères. Lorsque vous tapez, `handleChange` lit la dernière valeur entrée dans l'élément de champ de saisie du DOM, et appelle `setText` pour mettre à jour l'état. Ça vous permet d'afficher le `text` courant ci-dessous. +Dans cet exemple, la variable d'état `text` contient une chaîne de caractères. Lors de la frappe, `handleChange` lit la dernière valeur du champ de saisie dans le DOM, et appelle `setText` pour mettre à jour l'état. Ça vous permet d'afficher le `text` courant en dessous. @@ -187,7 +187,7 @@ export default function MyInput() { return ( <> -

      Vous avez tapé : {text}

      +

      Vous avez saisi : {text}

      @@ -202,7 +202,7 @@ export default function MyInput() { #### Case à cocher (booléen) {/*checkbox-boolean*/} -Dans cet exemple, la variable d'état `liked` contient un booléen. Lorsque vous cliquez sur la case, `setLiked` met à jour la variable d'état `liked` selon si la case est cochée ou non. La variable `liked` est utilisée pour effectuer le rendu du texte sous la case à cocher. +Dans cet exemple, la variable d'état `liked` contient un booléen. Lorsque vous cliquez sur la case, `setLiked` met à jour la variable d'état `liked` selon que la case est cochée ou non. La variable `liked` est utilisée dans le rendu du texte sous la case à cocher. @@ -224,9 +224,9 @@ export default function MyCheckbox() { checked={liked} onChange={handleChange} /> - J'ai aimé + J’ai aimé -

      Vous {liked ? 'avez' : 'n\'avez pas'} aimé.

      +

      Vous {liked ? 'avez' : 'n’avez pas'} aimé.

      ); } @@ -276,9 +276,9 @@ button { display: block; margin-top: 10px; } --- -### Mettre à jour l'état selon son état précédent {/*updating-state-based-on-the-previous-state*/} +### Mettre à jour l'état sur base de l'état précédent {/*updating-state-based-on-the-previous-state*/} -Supposons que `age` vaut `42`. Ce gestionnaire appelle `setAge(age + 1)` trois fois : +Supposons que `age` vaille `42`. Ce gestionnaire appelle `setAge(age + 1)` trois fois : ```js function handleClick() { @@ -304,27 +304,27 @@ Ici, `a => a + 1` est votre fonction de mise à jour. Elle prend l' a + 1` recevra un état en attente valant `42` et va retourner un prochain état valant `43`. -1. `a => a + 1` recevra un état en attente valant `43` et va retourner un prochain état valant `44`. -1. `a => a + 1` recevra un état en attente valant `44` et va retourner un prochain état valant `45`. +1. `a => a + 1` recevra un état en attente à `42` et renverra `43` comme prochain état. +1. `a => a + 1` recevra un état en attente à `43` et renverra `44` comme prochain état. +1. `a => a + 1` recevra un état en attente à `44` et renverra `45` comme prochain état. -Il n'y a pas d'autres mises à jour en file d'attente, React stockera donc à la fin `45` comme étant l'état courant. +Il n'y a pas d'autres mises à jour en file d'attente, React stockera donc au final `45` comme état courant. -Par convention, il est commun de nommer l'argument de l'état en attente selon la première lettre du nom de la variable d'état, comme `a` pour `age`. Cependant, vous pouvez également le nommer `prevAge`, ou quelque chose d'autre que vous trouvez plus clair. +La convention veut qu'on nomme l'argument de l'état en attente selon la première lettre du nom de la variable d'état, comme `a` pour `age`. Cependant, vous pouvez tout aussi bien le nommer `prevAge`, ou quelque chose d'autre que vous trouveriez plus explicite. -En développement, React pourra [appeler deux fois vos mises à jour](#my-initializer-or-updater-function-runs-twice) pour vérifier si elles sont [pures](/learn/keeping-components-pure). +En développement, React pourra [appeler vos mises à jour deux fois](#my-initializer-or-updater-function-runs-twice) pour vérifier qu'elles sont [pures](/learn/keeping-components-pure). -#### Est-il toujours préférable d'utiliser une mise à jour ? {/*is-using-an-updater-always-preferred*/} +#### Est-il toujours préférable d'utiliser une fonction de mise à jour ? {/*is-using-an-updater-always-preferred*/} -Vous pourrez peut-être entendre des recommandations vous disant de toujours écrire votre code de cette manière, si l'état que vous mettez à jour est calculé depuis l'état précédent : `setAge(a => a + 1)`. Il n'y a aucun mal à le faire, mais ce n'est pas toujours nécessaire. +Certains vous recommandront peut-être de toujours écrire votre code de cette manière, si l'état que vous mettez à jour est calculé depuis l'état précédent : `setAge(a => a + 1)`. Il n'y a aucun mal à ça, mais ce n'est pas toujours nécessaire. -Dans la plupart des cas, il n'y a aucune différence entre ces deux approches. React vérifiera toujours, pour les actions intentionnelles des utilisateurs, que l'état `age` soit mis à jour avant le prochain click. Cela signifie qu'il n'y a aucun risque à ce qu'un gestionnaire de click voit un `age` "obsolète" au début de la gestion des évènements. +Dans la plupart des cas, il n'y a aucune différence entre ces deux approches. React s'assurera toujours, pour les actions intentionnelles des utilisateurs, que l'état `age` sera à jour pour le prochain click. Il n'y a donc aucun risque qu'un gestionnaire de clic voie un `age` "obsolète" au début d'un écouteur d'évènement. -Cependant, si vous opérez plusieurs mises à jour dans le même évènement, les mises à jours peuvent être utiles. Elles sont également utiles s'il n'est pas pratique d'accèder à la variable d'état elle-même (vous pourrez rencontrer ce cas en optimisant les rendus). +Cependant, si vous effectuez plusieurs mises à jour pour le même évènement, les fonctions de mises à jours peuvent être utiles. Elles sont également utiles s'il n'est pas pratique d'accéder à la variable d'état elle-même (vous pourrez rencontrer ce cas lorsque vous cherchez à optimiser les rendus). -Si vous préfèrez la consistance plutôt qu'une syntaxe un peu moins verbeuse, il est raisonnable de toujours écrire une mise à jour si l'état que vous mettez à jour est calculé à partir de l'état précédent. S'il est calculé depuis l'état précédent d'une *autre* variable d'état, vous pourrez peut-être les combiner en une seul objet et [utiliser un reducer.](/learn/extracting-state-logic-into-a-reducer) +Si vous souhaitez rester cohérent·e dans le style employé, au prix d'une syntaxe légèrement plus verbeuse, vous pouvez choisir de toujours recourir à une fonction de mise à jour lorsque l'état que vous mettez à jour est calculé à partir de l'état précédent. S'il est calculé depuis l'état précédent d'une *autre* variable d'état, vous pourrez peut-être les combiner en un seul objet et [utiliser un réducteur](/learn/extracting-state-logic-into-a-reducer). @@ -332,7 +332,7 @@ Si vous préfèrez la consistance plutôt qu'une syntaxe un peu moins verbeuse, #### Passer la fonction de mise à jour {/*passing-the-updater-function*/} -Cet exemple passe la fonction de mise à jour, donc le bouton "+3" fonctionne. +Cet exemple passe la fonction de mise à jour, du coup le bouton "+3" fonctionne. @@ -373,7 +373,7 @@ h1 { display: block; margin: 10px; } #### Passer directement le prochain état {/*passing-the-next-state-directly*/} -Cet exemple **ne passe pas** la fonction de mise à jour, donc le bouton "+3" **ne fonctionne pas comme prévu**. +Cet exemple **ne passe pas** la fonction de mise à jour, résultat le bouton "+3" **ne fonctionne pas comme prévu**. @@ -418,10 +418,10 @@ h1 { display: block; margin: 10px; } ### Mettre à jour des objets et des tableaux dans un état {/*updating-objects-and-arrays-in-state*/} -Vous pouvez insérer des objets et des tableaux dans un état. En React, un état est considéré comme en lecture seule, **vous devez donc *replacer* vos objets existants plutôt que les *muter***. Par exemple, si vous avez un objet `form` dans un état, ne le mutez pas : +Vous pouvez utiliser des objets et des tableaux dans un état. En React, un état est considéré comme en lecture seule, **vous devez donc *remplacer* vos objets existants plutôt que les *modifier***. Par exemple, si vous avez un objet `form` dans un état, ne le modifiez pas : ```js -// 🚩 Ne mutez pas un objet dans un état comme ceci : +// 🚩 Ne modifiez pas un objet dans un état comme ceci : form.firstName = 'Clara'; ``` @@ -435,13 +435,13 @@ setForm({ }); ``` -Lire [mettre à jour des objets dans un état](/learn/updating-objects-in-state) et [mettre à jour des tableaux dans un état](/learn/updating-arrays-in-state) pour en savoir plus. +Consultez [Mettre à jour les objets d'un état](/learn/updating-objects-in-state) et [Mettre à jour les tableaux d'un état](/learn/updating-arrays-in-state) pour en savoir plus. #### Formulaire (objet) {/*form-object*/} -Dans cet exemple, la variable d'état `form` contient un objet. Chaque champ de saisie possède un gestionnaire de changement qui appelle `setForm` avec le prochain état du formulaire tout entier. La syntaxe de décomposition `{...form}` permet de s'assurer que l'état de l'objet est remplacé, plutôt que muté. +Dans cet exemple, la variable d'état `form` contient un objet. Chaque champ de saisie possède un gestionnaire de changement qui appelle `setForm` avec le prochain état du formulaire tout entier. La syntaxe de *spread* `{...form}` permet de s'assurer que l'état de l'objet est remplacé, plutôt que modifié. @@ -514,7 +514,7 @@ input { margin-left: 5px; } #### Formulaire (objet imbriqué) {/*form-nested-object*/} -Dans cet exemple, l'état est imbriqué (*nested, NdT*). Lorsque vous mettez à jour un état imbriqué, vous avez besoin de créer une copie de l'objet que vous mettez à jour, ainsi que de tous les objets hiérarchiquement plus hauts le "contenant". Lire [mettre à jour un objet imbriqué](/learn/updating-objects-in-state#updating-a-nested-object) pour en savoir plus. +Dans cet exemple, l'état est constitué d'objets imbriqués. Lorsque vous mettez à jour un état imbriqué, vous devez créer une copie de l'objet que vous mettez à jour, ainsi que de tous les objets « conteneurs ». Consultez [Mettre à jour un objet imbriqué](/learn/updating-objects-in-state#updating-a-nested-object) pour en savoir plus. @@ -603,7 +603,7 @@ export default function Form() { {' par '} {person.name}
      - (basé à {person.artwork.city}) + (situé à {person.artwork.city})

      @@ -695,7 +695,7 @@ export default function AddTodo({ onAddTodo }) { return ( <> setTitle(e.target.value)} /> @@ -755,7 +755,7 @@ function Task({ todo, onChange, onDelete }) { <> {todo.title} ); @@ -791,9 +791,9 @@ ul, li { margin: 0; padding: 0; } -#### Écrire la logique d'une mise à jour de manière concise avec Immer {/*writing-concise-update-logic-with-immer*/} +#### Du code de mise à jour plus concis grâce à Immer {/*writing-concise-update-logic-with-immer*/} -Si le fait de mettre à jour des tableaux et des objets sans mutation vous paraît fastidieux, vous pouvez utiliser une librairie pour réduire le code répétitif, comme [Immer](https://github.com/immerjs/use-immer). Immer vous permet d'écrire du code concis comme si vous étiez en train de muter des objets, mais, en réalité, il réalise des mises à jour immutables : +Si le fait de mettre à jour des tableaux et des objets en préservant l'immutabilité vous paraît fastidieux, vous pouvez utiliser une bibliothèque pour réduire le code répétitif, comme [Immer](https://github.com/immerjs/use-immer). Immer vous permet d'écrire du code concis comme si vous modifiiez les objets, mais en pratique il préserve l'immutabilité : @@ -822,7 +822,7 @@ export default function BucketList() { return ( <> -

      Liste d'Art

      +

      Art à voir

      Ma liste d'œuvres d'art à voir :

      + #### Passer la fonction d'initialisation {/*passing-the-initializer-function*/} -Cet exemple passe la fonction d'initialisation pour que la fonction `createInitialTodos` ne soit lancée que pendant l'initialisation. Elle ne se lance pas quand le composant effectue un nouveau rendu, comme lorsque vous tapez dans le champ de saisie. +Cet exemple passe la fonction `createInitialTodos` en tant que fonction d'initialisation, afin qu'elle ne soit lancée que lors de l'initialisation. Elle n'est pas lancée quand le composant effectue un nouveau rendu, par exemple lorsque vous tapez dans le champ de saisie. @@ -922,7 +922,7 @@ function createInitialTodos() { for (let i = 0; i < 50; i++) { initialTodos.push({ id: i, - text: 'Objet ' + (i + 1) + text: 'Élément ' + (i + 1) }); } return initialTodos; @@ -961,9 +961,9 @@ export default function TodoList() { -#### Directement passer l'état initial {/*passing-the-initial-state-directly*/} +#### Passer directement l'état initial {/*passing-the-initial-state-directly*/} -Cet exemple **ne passe pas** la fonction d'initialisation, donc la fonction `createInitialTodos` se lance à chaque rendu, comme lorsque vous tapez dans le champ de saisie. Il n'y a pas de différence de comportement remarquable, mais le code est moins efficace. +Cet exemple **ne passe pas** de fonction d'initialisation, de sorte que `createInitialTodos` est appelée à chaque rendu, y compris lorsque vous tapez dans le champ de saisie. Il n'y a pas de différence perceptible de comportement, mais le code est moins efficace. @@ -975,7 +975,7 @@ function createInitialTodos() { for (let i = 0; i < 50; i++) { initialTodos.push({ id: i, - text: 'Objet ' + (i + 1) + text: 'Élément ' + (i + 1) }); } return initialTodos; @@ -1020,11 +1020,11 @@ export default function TodoList() { ### Réinitialiser l'état avec une clé {/*resetting-state-with-a-key*/} -Vous pourriez parfois rencontrer un attribut `key` lors du [rendu de listes](/learn/rendering-lists). Cependant, il sert à autre chose. +Vous rencontrerez souvent la *prop* `key` dans des [rendus de listes](/learn/rendering-lists). Sachez qu'elle a une autre utilité. -Vous pouvez **réinitialiser l'état d'un composant en lui passant une `key` différente**. Dans cet exemple, le bouton Réinitialiser change la variable d'état `version`, laquelle étant passée dans une `key` à `Form`. Quand la `key` change, React re-crée le composant `Form` (et tous ses enfants) depuis le début, donc son état est réinitialisé. +Vous pouvez **réinitialiser l'état d'un composant en lui passant une `key` différente**. Dans cet exemple, le bouton Réinitialiser change la variable d'état `version`, laquelle est passée comme `key` au `Form`. Quand la `key` change, React recrée le composant `Form` (et tous ses enfants) à partir de zéro, ce qui réinitialise son état. -Lire [préserver et réinitialiser l'état](/learn/preserving-and-resetting-state) pour en savoir plus. +Consultez [Préserver et réinitialiser l'état](/learn/preserving-and-resetting-state) pour en savoir plus. @@ -1071,17 +1071,17 @@ button { display: block; margin-bottom: 20px; } ### Stocker les informations des rendus précédents {/*storing-information-from-previous-renders*/} -La plupart du temps, vous mettrez à jour les états dans des gestionnaires d'évènements. Cependant, dans de rares cas, vous pourriez peut-être vouloir ajouter l'état en fonction du rendu -- par exemple, vous pourriez peut-être vouloir changer une variable d'état quand une propriété change. +La plupart du temps, vous mettrez à jour les états dans des gestionnaires d'évènements. Cependant, dans de rares cas, vous pourriez vouloir ajuster l'état en fonction du rendu -- par exemple, pour modifier une variable d'état quand une propriété change. -Dans la plupart des cas, vous n'avez pas besoin de ça : +Dans la plupart des cas, vous n'en avez en réalité pas besoin : -* **Si la valeur dont vous avez besoin peut être totalement calculée à partir des propriétés actuelles ou d'un autre état, [supprimez complètement ces états redondants](/learn/choosing-the-state-structure#avoid-redundant-state)**. Si effectuer de nouveaux calculs trop fréquemment vous dérange, le [Hook `useMemo`](/reference/react/useMemo) peut vous aider. -* Si vous voulez réinitialiser l'entièreté de l'arbre d'un composant, [passez une `key` différente à votre composant](#resetting-state-with-a-key). -* Si vous le pouvez, mettez à jour tous les états correspondants dans des gestionnaires d'évènements. +* **Si la valeur dont vous avez besoin peut être totalement calculée à partir des propriétés actuelles ou d'un autre état, [supprimez carrément cette variable d'état redondante](/learn/choosing-the-state-structure#avoid-redundant-state)**. Si vous craignez d'effectuer alors de nouveaux calculs trop fréquemment, le [Hook `useMemo`](/reference/react/useMemo) peut vous aider. +* Si vous voulez réinitialiser l'intégralité des états du composant et de ses enfants, [passez une `key` différente à votre composant](#resetting-state-with-a-key). +* Si vous le pouvez, mettez à jour tous les états pertinents dans des gestionnaires d'évènements. -Dans de rares autres cas, il existe un modèle que vous pouvez utiliser pour mettre à jour un état selon les états qui ont été rendus jusqu'ici, en appelant une fonction de mise à jour pendant que votre composant est en cours de rendu. +Dans de rares autres cas, il existe une approche que vous pouvez utiliser pour mettre à jour un état sur la base des valeurs actuelles du rendu : appelez sa fonction de mise à jour pendant le rendu de votre composant. -Voici un exemple. Ce composant `CountLabel` affiche une propriété `count` qui lui est passé : +Voici un exemple. Ce composant `CountLabel` affiche une prop `count` qui lui est passée : ```js CountLabel.js export default function CountLabel({ count }) { @@ -1089,7 +1089,7 @@ export default function CountLabel({ count }) { } ``` -Mettons que vous vouliez montrer si le compteur a *augmenté ou diminué* depuis le dernier changement. La propriété `count` ne vous permet pas de savoir ça -- vous avez besoin de garder une trace de sa dernière valeur. Ajoutez la variable d'état `prevCount` afin de garder une trace de sa dernière valeur. Ajoutez une autre variable d'état appelée `trend` qui permet de savoir si le compteur a augmenté ou diminué. Comparez `prevCount` avec `count`, et, s'ils ne sont pas égaux, mettez à jour `prevCount` et `trend`. Vous pouvez maintenant montrer la propriété du compteur courante et *comment elle a changé depuis le dernier rendu*. +Mettons que vous vouliez indiquer si le compteur a *augmenté ou diminué* depuis le dernier changement. La prop `count` ne vous permet pas de le savoir -- vous avez besoin de garder trace de sa dernière valeur. Ajoutez la variable d'état `prevCount` pour y parvenir. Puis ajoutez une autre variable d'état appelée `trend` qui permet de savoir si le compteur a augmenté ou diminué. Comparez `prevCount` avec `count`, et, s'ils ne sont pas égaux, mettez à jour `prevCount` et `trend`. Vous pouvez maintenant afficher tant la prop du compteur courant que *la façon dont elle a changé depuis le dernier rendu*. @@ -1138,23 +1138,23 @@ button { margin-bottom: 10px; } -Notez que si vous appelez une fonction de mise à jour pendant le rendu, elle doit être dans une condition, telle que `prevCount !== count`, et il doit y avoir un appel dans la condition, tel que `setPrevCount(count)`. Sinon, votre composant effectuera des rendus en boucle jusqu'à crash. De plus, vous pouvez seulement mettre à jour l'état du composant *en cours de rendu* de cette manière. Appeler la fonction de mise à jour d'un *autre* composant pendant le rendu est une erreur. Finalement, votre appel de mise à jour devrait toujours [mettre à jour l'état sans mutation](#updating-objects-and-arrays-in-state) -- cela ne veut pas dire que vous pouvez enfreindre les autres règles des [fonctions pures](/learn/keeping-components-pure). +Notez que si vous appelez une fonction de mise à jour pendant le rendu, elle doit être assujettie à une condition, telle que `prevCount !== count`, laquelle contrôle l'appel, tel que `setPrevCount(count)`. À défaut, votre composant effectuera des rendus en boucle jusqu'à cause un plantage. De plus, vous ne pouvez mettre ainsi à jour que l'état du composant *en cours de rendu*. Appeler une fonction de mise à jour issue d'un *autre* composant pendant le rendu entraîne une erreur. Pour finir, votre appel de mise à jour devrait toujours [mettre à jour l'état sans le modifier](#updating-objects-and-arrays-in-state) -- appeler depuis le rendu ne vous autorise pas à enfreindre les règles des [fonctions pures](/learn/keeping-components-pure). -Cette méthode peut être difficile à comprendre et est la plupart du temps à éviter. Cependant, c'est toujours mieux que de mettre à jour un état dans un effet. Lorsque vous appelez une fonction de mise à jour pendant le rendu, React va effectuer un autre rendu de ce composant immédiatement après que votre composant se soit terminé grâce à un `return`, et avant d'effectuer un rendu de ses enfants. De cette manière, les enfants n'ont pas besoin d'effectuer deux rendus. Le reste de votre composant va toujours s'effectuer (et le résultat va être jeté). Si votre composant est en-dessous de tous les appels à des Hook, vous devez ajouter un `return;` en avance pour redémarrer plus tôt le rendu. +Cette approche peut être délicate à bien comprendre : la plupart du temps, vous devriez l'éviter. Cependant, c'est toujours mieux que de mettre à jour un état au sein d'un effet. Lorsque vous appelez une fonction de mise à jour pendant le rendu, React effectuera un nouveau rendu de ce composant immédiatement après que votre fonction composant a terminé avec un `return`, avant d'effectuer le rendu de ses enfants. Grâce à ça, les enfants n'auront pas besoin d'effectuer deux rendus. Le reste de votre fonction composant s'exécutera toujours (et le résultat sera jeté). Si votre condition se situe en dessous de tous les appels à des Hooks, vous pouvez même y ajouter un `return;` anticipé pour déclencher le nouveau rendu plus tôt. --- ## Dépannage {/*troubleshooting*/} -### J'ai mis à jour l'état, mais le logging m'affiche toujours l'ancienne valeur {/*ive-updated-the-state-but-logging-gives-me-the-old-value*/} +### J'ai mis à jour l'état, mais je vois toujours l'ancienne valeur {/*ive-updated-the-state-but-logging-gives-me-the-old-value*/} -Appeler la fonction de mise à jour **ne change pas l'état dans le code en cours de lancement** : +Appeler la fonction de mise à jour **ne modifie pas l'état dans le code en cours d"exécution** : ```js {4,5,8} function handleClick() { console.log(count); // 0 - setCount(count + 1); // Demander un nouveau rendu avec 1 + setCount(count + 1); // Demande un nouveau rendu avec 1 console.log(count); // Toujours 0 ! setTimeout(() => { @@ -1163,7 +1163,7 @@ function handleClick() { } ``` -C'est parce que l'[état se comporte comme une snapshot](/learn/state-as-a-snapshot). Mettre à jour l'état déclenche un autre rendu avec la nouvelle variable d'état, mais cela n'affecte pas la variable JavaScript `count` dans le gestionnaire d'évènements en train de s'exécuter. +C'est parce que l'[état se comporte comme un instantané](/learn/state-as-a-snapshot). Mettre à jour l'état planifie un autre rendu avec la nouvelle valeur d'état, mais n'affecte pas la variable JavaScript `count` dans le gestionnaire d'évènements en train de s'exécuter. Si vous avez besoin du prochain état, vous pouvez le sauvegarder dans une variable avant de le passer dans la fonction de mise à jour : @@ -1177,19 +1177,19 @@ console.log(nextCount); // 1 --- -### J'ai mis à jour l'état, mais l'écran ne se met pas à jour {/*ive-updated-the-state-but-the-screen-doesnt-update*/} +### J'ai mis à jour l'état, mais l'affichage ne se met pas à jour {/*ive-updated-the-state-but-the-screen-doesnt-update*/} -React va **ignorer votre mise à jour si le prochain état est égal à l'état précédent**, en comparant au moyen de [`Object.is`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Ça arrive la plupart du temps lorsque vous changez un objet ou un tableau directement dans l'état : +React **ignorera votre mise à jour si le prochain état est égal à l'état précédent**, en comparant au moyen de [`Object.is`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Ça arrive généralement lorsque vous modifiez directement un objet ou un tableau dans l'état : ```js -obj.x = 10; // 🚩 Faux : mutation d'un objet existant +obj.x = 10; // 🚩 Erroné : mutation d’un objet existant setObj(obj); // 🚩 Ne fait rien ``` -Vous avez muté un objet `obj` existant et vous l'avez re-passé à `setObj`, donc React ignore la mise à jour. Pour résoudre cela, vous devez vous assurer que vous [remplacez toujours les objets et les tableaux dans l'état plutôt que les _muter_](#updating-objects-and-arrays-in-state) : +Vous avez modifié un objet `obj` existant et vous l'avez passé à `setObj`, donc React ignore la mise à jour (c'est la même référence, le même objet en mémoire). Pour corriger ça, vous devez vous assurer de [toujours _remplacer_ les objets et les tableaux de l'état plutôt que les _modifier_](#updating-objects-and-arrays-in-state) : ```js -// ✅ Correct : créer un nouvel objet +// ✅ Correct : création d’un nouvel objet setObj({ ...obj, x: 10 @@ -1200,39 +1200,39 @@ setObj({ ### J'ai une erreur : "Too many re-renders" {/*im-getting-an-error-too-many-re-renders*/} -Vous pourriez peut-être avoir une erreur disant : `Too many re-renders. React limits the number of renders to prevent an infinite loop`. La plupart du temps, cela signifie que vous mettez à jour un état de manière non conditionnelle *pendant le rendu*, donc votre composant rentre dans une boucle : rendu, mise à jour de l'état (qui cause un rendu), rendu, mise à jour de l'état (qui cause un rendu), etc. Peu souvent, c'est causé par une erreur en spécifiant le gestionnaire d'évènement : +Vous verrez peut-être une erreur disant : `Too many re-renders. React limits the number of renders to prevent an infinite loop` _(« Trop re rendus successifs. React limite le nombre de rendus pour éviter une boucle infinie », NdT)_. Ça signifie le plus souvent que vous mettez à jour un état de manière inconditionnelle *pendant le rendu*, de sorte que votre composant entre dans une boucle : rendu, mise à jour de l'état (qui déclenche un rendu), rendu, mise à jour de l'état (qui entraîne un rendu), etc. Le plus souvent, ça vient d'une erreur classique de fourniture d'un gestionnaire d'évènement : ```js {1-2} -// 🚩 Faux : appelle le gestionnaire pendant le rendu +// 🚩 Erroné : appelle le gestionnaire pendant le rendu return -// ✅ Correct : passe le gestionnaire d'évènement +// ✅ Correct : passe le gestionnaire d’évènement return -// ✅ Correct : passe une fonction en ligne +// ✅ Correct : passe une fonction créée à la volée return ``` -Si vous n'arrivez pas à trouver le cause de cette erreur, cliquez, dans la console, sur la flèche à côté de l'erreur, et regardez dans votre pile JavaScript afin de trouver la fonction de mise à jour responsable de cette erreur. +Si vous n'arrivez pas à trouver le cause de cette erreur, cliquez dans la console sur la flèche à côté de l'erreur, et examinez votre pile d'appels JavaScript afin d'y repérer la fonction de mise à jour responsable de l'erreur. --- -### Ma fonction d'initialisation ou ma fonction de mise à jour se lance deux fois {/*my-initializer-or-updater-function-runs-twice*/} +### Ma fonction d'initialisation ou ma fonction de mise à jour est exécutée deux fois {/*my-initializer-or-updater-function-runs-twice*/} -En [mode Strict](/reference/react/StrictMode), React va appeler certaines de vos fonctions deux fois plutôt qu'une : +En [mode strict](/reference/react/StrictMode), React appellera certaines de vos fonctions plutôt deux fois qu'une : ```js {2,5-6,11-12} function TodoList() { - // La fonction de ce composant va se lancer deux fois pendant le rendu. + // Cette fonction composant sera appelée deux fois par rendu. const [todos, setTodos] = useState(() => { - // Cette fonction d'initialisation va se lancer deux fois pendant le rendu. + // Cette fonction d'initialisation sera appelée deux fois par rendu. return createTodos(); }); function handleClick() { setTodos(prevTodos => { - // Cette fonction de mise à jour va se lancer deux fois à chaque click. + // Cette fonction de mise à jour sera appelée deux fois par clic. return [...prevTodos, createTodo()]; }); } @@ -1241,32 +1241,32 @@ function TodoList() { C'est voulu, et ça ne devrait pas casser votre code. -Ce comportement, **uniquement présent en développement**, vous aide à [garder vos composants purs](/learn/keeping-components-pure). React utilise le résultat d'un des appels, et ignore le résultat de l'autre. Tant que vos composants, vos fonctions d'initialisation, et vos fonctions de mise à jour sont pures, ça ne devrait pas affecter votre logique. Cependant, si elles sont accidentellement impures, ça vous aide à remarquer vos erreurs. +Ce comportement, **uniquement présent en développement**, vous aide à [garder vos composants purs](/learn/keeping-components-pure). React utilise le résultat d'un des appels et ignore le résultat de l'autre. Tant que vos composants, vos fonctions d'initialisation, et vos fonctions de mise à jour sont pures, ça ne devrait pas affecter le comportement. Cependant, si elles sont accidentellement impures, ça vous aide à détecter le problème. -Par exemple, cette fonction de mise à jour impure mute un tableau dans un état : +Par exemple, cette fonction de mise à jour impure modifie directement un tableau dans un état : ```js {2,3} setTodos(prevTodos => { - // 🚩 Erreur : muter un état + // 🚩 Erreur : modification en place de l'état prevTodos.push(createTodo()); }); ``` -Comme React a appelé votre fonction de mise à jour à deux reprises, vous verrez que le `todo` a été appelé deux fois, et vous saurez qu'il y a une erreur. Dans cet exemple, vous pouvez résoudre l'erreur en [remplaçant le tableau, plutôt que de le muter](#updating-objects-and-arrays-in-state) : +Comme React a appelé votre fonction de mise à jour à deux reprises, vous verrez que la tâche a été ajoutée deux fois, et vous saurez qu'il y a une erreur. Dans cet exemple, vous pouvez corriger l'erreur en [remplaçant le tableau, plutôt que de le modifier](#updating-objects-and-arrays-in-state) : ```js {2,3} setTodos(prevTodos => { - // ✅ Correct : remplacer avec le nouvel état + // ✅ Correct : remplacement par un nouvel état return [...prevTodos, createTodo()]; }); ``` -Maintenant que cette fonction de mise à jour est pure, l'appeler une autre fois ne fait aucune différence de comportement. C'est pour cette raison que l'appel à deux reprises de React vous aide à trouver des erreurs. **Seulement les composants, les fonctions d'initialisation et les fonctions de mise à jour doivent être pures**. Les gestionnaires d'évènements n'ont pas besoin d'être purs, donc React ne les appellera jamais deux fois. +Maintenant que cette fonction de mise à jour est pure, l'appeler une fois de plus n'entraîne aucune différence de comportement. C'est en cela que le double appel par React vous aide à détecter les problèmes. **Seuls les composants, les fonctions d'initialisation et les fonctions de mise à jour doivent être purs**. Les gestionnaires d'évènements n'ont pas besoin d'être purs, aussi React ne les appellera jamais deux fois. -Lire [garder les composants purs](/learn/keeping-components-pure) pour en savoir plus. +Consultez [Garder les composants purs](/learn/keeping-components-pure) pour en savoir plus. --- -### J'essaye de mettre à jour un état avec une fonction, mais elle est appelée à la place {/*im-trying-to-set-state-to-a-function-but-it-gets-called-instead*/} +### J'essaie de placer une fonction dans un état, mais elle est appelée directement {/*im-trying-to-set-state-to-a-function-but-it-gets-called-instead*/} Vous ne pouvez pas mettre une fonction dans un état comme ceci : @@ -1278,7 +1278,7 @@ function handleClick() { } ``` -Comme vous passez une fonction, React part de principe que `someFunction` est une [fonction d'initialisation](#avoiding-recreating-the-initial-state), et que `someOtherFunction` est une [fonction de mise à jour](#updating-state-based-on-the-previous-state), et donc essaye de les appeler et de stocker leurs résultats. Pour réellement *stocker* une fonction, dans les deux cas, vous devez placer en amont `() =>`. Dans ce cas, React stockera les fonctions que vous passez. +Comme vous passez une fonction, React part du principe que `someFunction` est une [fonction d'initialisation](#avoiding-recreating-the-initial-state), et que `someOtherFunction` est une [fonction de mise à jour](#updating-state-based-on-the-previous-state) ; il va donc les appeler pour stocker leurs résultats. Afin de *stocker* effectivement une fonction, dans les deux cas vous devrez la préfixer par `() =>`. Dans ce cas, React stockera les fonctions que vous passez. ```js {1,4} const [fn, setFn] = useState(() => someFunction); From decf8c888c7a265e2b897e3a8332fa5e4e316423 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 31 Jul 2023 21:29:40 +0200 Subject: [PATCH 9/9] copy(useState): final review pass --- src/content/reference/react/useState.md | 126 ++++++++++++------------ 1 file changed, 63 insertions(+), 63 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index 8ca91417b..a8605a806 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -4,7 +4,7 @@ title: useState -`useState` est un Hook React qui vous permet d'ajouter une [variable d'état](/learn/state-a-components-memory) dans votre composant. +`useState` est un Hook React qui ajoute une [variable d'état](/learn/state-a-components-memory) dans votre composant. ```js const [state, setState] = useState(initialState); @@ -32,7 +32,7 @@ function MyComponent() { // ... ``` -La convention est de nommer les variables d'états de cette manière : `[something, setSomething]`, en utilisant la [déstructuration positionnelle](https://fr.javascript.info/destructuring-assignment). +La convention est de nommer les variables d'états de cette manière : `[something, setSomething]`, en utilisant la [déstructuration positionnelle](https://fr.javascript.info/destructuring-assignment). [Voir d’autres exemples ci-dessous](#usage). @@ -43,7 +43,7 @@ La convention est de nommer les variables d'états de cette manière : `[somethi #### Valeur renvoyée {/*returns*/} -`useState` retourne un tableau avec exactement deux valeurs : +`useState` retourne un tableau avec exactement deux valeurs : 1. L'état courant. Lors du premier rendu, ce sera l'`initialState` que vous avez passé en argument. 2. La [fonction de mise à jour](#setstate). Elle vous permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. @@ -57,7 +57,7 @@ La convention est de nommer les variables d'états de cette manière : `[somethi ### Les fonctions de mise à jour, comme `setSomething(nextState)` {/*setstate*/} -La fonction de mise à jour renvoyée par `useState` permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. Vous pouvez passer le prochain état directement, ou passer une fonction qui le calcule sur base de l'état précédent : +La fonction de mise à jour renvoyée par `useState` permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. Vous pouvez passer le prochain état directement, ou passer une fonction qui le calcule sur base de l'état précédent : ```js const [name, setName] = useState('Edward'); @@ -83,7 +83,7 @@ Les fonctions de mise à jour (celles renvoyées par `useState`) n'ont pas de va * Si la nouvelle valeur que vous donnez est identique au `state` actuel, en comparant au moyen de [`Object.is`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is), React **ne fera pas un nouveau rendu de ce composant et de ses enfants**. Il s'agit d'une optimisation. Même si, dans certains cas, React a tout de même besoin d'appeler votre composant sans faire de rendu de ses enfants, ça ne devrait pas affecter votre code. -* React [met à jour les états par lots](/learn/queueing-a-series-of-state-updates). Il met à jour l'écran **après que tous les gestionnaires d'évènements ont été lancés** et qu'ils auront appelé leurs fonctions de mise à jour. Ça évite des rendus inutiles suite à un unique évènement. Dans les rares cas où vous auriez besoin de forcer React à mettre à jour l'écran plus tôt, par exemple pour accéder au DOM, vous pouvez utiliser [`flushSync`](/reference/react-dom/flushSync). +* React [met à jour les états par lots](/learn/queueing-a-series-of-state-updates). Il met à jour l'écran **après que tous les gestionnaires d'événements ont été lancés** et qu'ils auront appelé leurs fonctions de mise à jour. Ça évite des rendus inutiles suite à un unique événement. Dans les rares cas où vous auriez besoin de forcer React à mettre à jour l'écran plus tôt, par exemple pour accéder au DOM, vous pouvez utiliser [`flushSync`](/reference/react-dom/flushSync). * Il est possible d'appeler la fonction de mise à jour *pendant le rendu*, mais uniquement au sein du composant en cours de rendu. React ignorera le JSX résultat pour refaire immédiatement un rendu avec le nouvel état. Cette approche est rarement nécessaire, mais vous pouvez l'utiliser pour **stocker des informations des précédents rendus**. [Voir un exemple ci-dessous](#storing-information-from-previous-renders). @@ -108,12 +108,12 @@ function MyComponent() { Par convention, on nomme les variables d'état comme suit : `[something, setSomething]`, en utilisant la [déstructuration positionnelle](https://fr.javascript.info/destructuring-assignment). -`useState` renvoie un tableau avec exactement deux valeurs : +`useState` renvoie un tableau avec exactement deux valeurs : 1. L'état courant de cette variable d'état, initialement le même que l'état initial que vous avez passé en entrée. 2. La fonction de mise à jour qui vous permet d'en modifier la valeur lors d'une interaction. -Pour mettre à jour l'affichage, appelez la fonction de mise à jour avec le prochain état : +Pour mettre à jour l'affichage, appelez la fonction de mise à jour avec le prochain état : ```js [[2, 2, "setName"]] function handleClick() { @@ -125,12 +125,12 @@ React stockera ce prochain état, fera un nouveau rendu de votre composant avec -Appeler la fonction de mise à jour [**ne change pas** l'état actuel dans le code en train d'être exécuté](#ive-updated-the-state-but-logging-gives-me-the-old-value) : +Appeler la fonction de mise à jour [**ne change pas** l'état actuel dans le code en train d'être exécuté](#ive-updated-the-state-but-logging-gives-me-the-old-value) : ```js {3} function handleClick() { setName('Robin'); - console.log(name); // Toujours "Clara" ! + console.log(name); // Toujours "Clara" ! } ``` @@ -238,7 +238,7 @@ export default function MyCheckbox() { #### Formulaire (deux variables) {/*form-two-variables*/} -Vous pouvez déclarer plus d'une variable d'état dans le même composant. Chaque variable d'état est complètement indépendante. +Vous pouvez déclarer plus d'une variable d'état dans le même composant. Chaque variable d'état est complètement indépendante des autres. @@ -278,7 +278,7 @@ button { display: block; margin-top: 10px; } ### Mettre à jour l'état sur base de l'état précédent {/*updating-state-based-on-the-previous-state*/} -Supposons que `age` vaille `42`. Ce gestionnaire appelle `setAge(age + 1)` trois fois : +Supposons que `age` vaille `42`. Ce gestionnaire appelle `setAge(age + 1)` trois fois : ```js function handleClick() { @@ -288,9 +288,9 @@ function handleClick() { } ``` -Cependant, après un click, `age` ne va valoir que `43`, plutôt que `45` ! C'est parce qu'appeler la fonction de mise à jour [ne met pas à jour](/learn/state-as-a-snapshot) la variable d'état `age` dans le code en cours d'exécution. Donc, chaque appel à `setAge(age + 1)` devient `setAge(43)`. +Cependant, après un click, `age` ne va valoir que `43`, plutôt que `45` ! C'est parce qu'appeler la fonction de mise à jour [ne met pas à jour](/learn/state-as-a-snapshot) la variable d'état `age` dans le code en cours d'exécution. Donc, chaque appel à `setAge(age + 1)` devient `setAge(43)`. -Pour résoudre ce problème, **vous devez passer une *fonction de mise à jour*** à `setAge` au lieu du prochain état : +Pour résoudre ce problème, **vous devez passer une *fonction de mise à jour*** à `setAge` au lieu du prochain état : ```js [[1, 2, "a", 0], [2, 2, "a + 1"], [1, 3, "a", 0], [2, 3, "a + 1"], [1, 4, "a", 0], [2, 4, "a + 1"]] function handleClick() { @@ -302,7 +302,7 @@ function handleClick() { Ici, `a => a + 1` est votre fonction de mise à jour. Elle prend l'état en attente et calcule à partir de celui-ci le prochain état. -React met vos fonctions de mise à jour dans une [file d'attente](/learn/queueing-a-series-of-state-updates). Ensuite, pendant le prochain rendu, il va les appeler dans le même ordre : +React met vos fonctions de mise à jour dans une [file d'attente](/learn/queueing-a-series-of-state-updates). Ensuite, pendant le prochain rendu, il va les appeler dans le même ordre : 1. `a => a + 1` recevra un état en attente à `42` et renverra `43` comme prochain état. 1. `a => a + 1` recevra un état en attente à `43` et renverra `44` comme prochain état. @@ -316,13 +316,13 @@ En développement, React pourra [appeler vos mises à jour deux fois](#my-initia -#### Est-il toujours préférable d'utiliser une fonction de mise à jour ? {/*is-using-an-updater-always-preferred*/} +#### Est-il toujours préférable d'utiliser une fonction de mise à jour ? {/*is-using-an-updater-always-preferred*/} -Certains vous recommandront peut-être de toujours écrire votre code de cette manière, si l'état que vous mettez à jour est calculé depuis l'état précédent : `setAge(a => a + 1)`. Il n'y a aucun mal à ça, mais ce n'est pas toujours nécessaire. +Certains vous recommandront peut-être de toujours écrire votre code de cette manière, si l'état que vous mettez à jour est calculé depuis l'état précédent : `setAge(a => a + 1)`. Il n'y a aucun mal à ça, mais ce n'est pas toujours nécessaire. -Dans la plupart des cas, il n'y a aucune différence entre ces deux approches. React s'assurera toujours, pour les actions intentionnelles des utilisateurs, que l'état `age` sera à jour pour le prochain click. Il n'y a donc aucun risque qu'un gestionnaire de clic voie un `age` "obsolète" au début d'un écouteur d'évènement. +Dans la plupart des cas, il n'y a aucune différence entre ces deux approches. React s'assurera toujours, pour les actions intentionnelles des utilisateurs, que l'état `age` sera à jour pour le prochain click. Il n'y a donc aucun risque qu'un gestionnaire de clic voie un `age` "obsolète" au début d'un écouteur d'événement. -Cependant, si vous effectuez plusieurs mises à jour pour le même évènement, les fonctions de mises à jours peuvent être utiles. Elles sont également utiles s'il n'est pas pratique d'accéder à la variable d'état elle-même (vous pourrez rencontrer ce cas lorsque vous cherchez à optimiser les rendus). +Cependant, si vous effectuez plusieurs mises à jour pour le même événement, les fonctions de mises à jours peuvent être utiles. Elles sont également utiles s'il n'est pas pratique d'accéder à la variable d'état elle-même (vous pourrez rencontrer ce cas lorsque vous cherchez à optimiser les rendus). Si vous souhaitez rester cohérent·e dans le style employé, au prix d'une syntaxe légèrement plus verbeuse, vous pouvez choisir de toujours recourir à une fonction de mise à jour lorsque l'état que vous mettez à jour est calculé à partir de l'état précédent. S'il est calculé depuis l'état précédent d'une *autre* variable d'état, vous pourrez peut-être les combiner en un seul objet et [utiliser un réducteur](/learn/extracting-state-logic-into-a-reducer). @@ -348,7 +348,7 @@ export default function Counter() { return ( <> -

      Votre âge : {age}

      +

      Votre âge : {age}

      -// ✅ Correct : passe le gestionnaire d’évènement +// ✅ Correct : passe le gestionnaire d’événement return -// ✅ Correct : passe une fonction créée à la volée +// ✅ Correct : passe une fonction créée à la volée return ``` @@ -1217,9 +1217,9 @@ Si vous n'arrivez pas à trouver le cause de cette erreur, cliquez dans la conso --- -### Ma fonction d'initialisation ou ma fonction de mise à jour est exécutée deux fois {/*my-initializer-or-updater-function-runs-twice*/} +### Ma fonction d'initialisation (ou de mise à jour) est exécutée deux fois {/*my-initializer-or-updater-function-runs-twice*/} -En [mode strict](/reference/react/StrictMode), React appellera certaines de vos fonctions plutôt deux fois qu'une : +En [mode strict](/reference/react/StrictMode), React appellera certaines de vos fonctions plutôt deux fois qu'une : ```js {2,5-6,11-12} function TodoList() { @@ -1241,26 +1241,26 @@ function TodoList() { C'est voulu, et ça ne devrait pas casser votre code. -Ce comportement, **uniquement présent en développement**, vous aide à [garder vos composants purs](/learn/keeping-components-pure). React utilise le résultat d'un des appels et ignore le résultat de l'autre. Tant que vos composants, vos fonctions d'initialisation, et vos fonctions de mise à jour sont pures, ça ne devrait pas affecter le comportement. Cependant, si elles sont accidentellement impures, ça vous aide à détecter le problème. +Ce comportement, **uniquement présent en développement**, vous aide à [garder vos composants purs](/learn/keeping-components-pure). React utilise le résultat d'un des appels et ignore le résultat de l'autre. Tant que vos composants, vos fonctions d'initialisation, et vos fonctions de mise à jour sont pures, ça ne devrait pas affecter le comportement. Cependant, si elles sont accidentellement impures, ça vous aide à détecter le problème. -Par exemple, cette fonction de mise à jour impure modifie directement un tableau dans un état : +Par exemple, cette fonction de mise à jour impure modifie directement un tableau dans un état : ```js {2,3} setTodos(prevTodos => { - // 🚩 Erreur : modification en place de l'état + // 🚩 Erreur : modification en place de l'état prevTodos.push(createTodo()); }); ``` -Comme React a appelé votre fonction de mise à jour à deux reprises, vous verrez que la tâche a été ajoutée deux fois, et vous saurez qu'il y a une erreur. Dans cet exemple, vous pouvez corriger l'erreur en [remplaçant le tableau, plutôt que de le modifier](#updating-objects-and-arrays-in-state) : +Comme React a appelé votre fonction de mise à jour à deux reprises, vous verrez que la tâche a été ajoutée deux fois, et vous saurez qu'il y a une erreur. Dans cet exemple, vous pouvez corriger l'erreur en [remplaçant le tableau, plutôt que de le modifier](#updating-objects-and-arrays-in-state) : ```js {2,3} setTodos(prevTodos => { - // ✅ Correct : remplacement par un nouvel état + // ✅ Correct : remplacement par un nouvel état return [...prevTodos, createTodo()]; }); ``` -Maintenant que cette fonction de mise à jour est pure, l'appeler une fois de plus n'entraîne aucune différence de comportement. C'est en cela que le double appel par React vous aide à détecter les problèmes. **Seuls les composants, les fonctions d'initialisation et les fonctions de mise à jour doivent être purs**. Les gestionnaires d'évènements n'ont pas besoin d'être purs, aussi React ne les appellera jamais deux fois. +Maintenant que cette fonction de mise à jour est pure, l'appeler une fois de plus n'entraîne aucune différence de comportement. C'est en cela que le double appel par React vous aide à détecter les problèmes. **Seuls les composants, les fonctions d'initialisation et les fonctions de mise à jour doivent être purs**. Les gestionnaires d'événements n'ont pas besoin d'être purs, aussi React ne les appellera jamais deux fois. Consultez [Garder les composants purs](/learn/keeping-components-pure) pour en savoir plus. @@ -1268,7 +1268,7 @@ Consultez [Garder les composants purs](/learn/keeping-components-pure) pour en s ### J'essaie de placer une fonction dans un état, mais elle est appelée directement {/*im-trying-to-set-state-to-a-function-but-it-gets-called-instead*/} -Vous ne pouvez pas mettre une fonction dans un état comme ceci : +Vous ne pouvez pas mettre une fonction dans un état comme ceci : ```js const [fn, setFn] = useState(someFunction);