useState |
Utilise l'état |
|---|---|
| React | |
Syntaxe
| const [state, setState] = useState(initialState) |
Description
useState est un crochet React vous permettant d'ajouter une variable d'état à votre composante.
Référence
| useState(initialState) |
Appelez useState au niveau supérieur de votre composante pour déclarer une variable d'état.
- import { useState } from 'react';
-
- function MyComponent() {
- const [age, setAge] = useState(28);
- const [name, setName] = useState('Taylor');
- const [todos, setTodos] = useState(() => createTodos());
- // ...
La convention consiste à nommer les variables d'état comme [quelque chose, setSomething] en utilisant la déstructuration de tableau.
Paramètres
| Nom | Description |
|---|---|
| initialState | La valeur initiale souhaitée pour l'état. Il peut s'agir d'une valeur de n'importe quel type, mais les fonctions ont un comportement particulier. Cet argument est ignoré après le rendu initial. Si vous passez une fonction comme initialState, elle sera traitée comme une fonction d'initialisation. Elle doit être pure, ne prendre aucun argument et renvoyer une valeur de n'importe quel type. React appellera votre fonction d'initialisation lors de l'initialisation de la composante et entreposera sa valeur de retour comme état initial. |
Renvoie
useState renvoie un tableau contenant exactement deux valeurs :
- L'état actuel. Lors du premier rendu, il correspondra à l'état initialState que vous avez transmis.
- La fonction set permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu.
Avertissements
- useState est un crochet; vous ne pouvez donc l'appeler qu'au niveau supérieur de votre composante ou de vos propres crochets. Vous ne pouvez pas l'appeler à l'intérieur de boucles ou de conditions. Si nécessaire, extrayez une nouvelle composante et déplacez-y l'état.
- En mode strict, React appellera votre fonction d'initialisation deux fois afin de vous aider à détecter les impuretés accidentelles. Ce comportement est réservé au développement et n'affecte pas la production. Si votre fonction d'initialisation est pure (comme elle devrait l'être), cela ne devrait pas affecter le comportement. Le résultat de l'un des appels sera ignoré.
Fonctions set, comme setSomething(nextState)
La fonction set renvoyée par useState vous permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. Vous pouvez passer directement l'état suivant ou une fonction le calculant à partir de l'état précédent :
- const [name, setName] = useState('Edward');
-
- function handleClick() {
- setName('Taylor');
- setAge(a => a + 1);
- // ...
Paramètres
| Nom | Description |
|---|---|
| nextState | La valeur que vous souhaitez attribuer à l'état. Il peut s'agir d'une valeur de n'importe quel type, mais les fonctions ont un comportement spécifique. Si vous passez une fonction comme nextState, elle sera traitée comme une fonction de mise à jour. Elle doit être pure, prendre l'état en attente comme seul paramètre et renvoyer l'état suivant. React placera votre fonction de mise à jour dans une file d'attente et effectuera un nouveau rendu de votre composante. Lors du rendu suivant, React calculera l'état suivant en appliquant tous les programmes de mise à jour en file d'attente à l'état précédent. |
Retours
Les fonctions set n'ont pas de valeur de retour.
Mises en garde
La fonction set ne met à jour la variable d'état que pour le prochain rendu. Si vous lisez la variable d'état après avoir appelé la fonction set, vous obtiendrez toujours l'ancienne valeur affichée à l'écran avant votre appel.
Si la nouvelle valeur fournie est identique à l'état actuel, tel que déterminé par une comparaison Object.is, React ignorera le nouveau rendu de la composante et de ses enfants. Il s'agit d'une optimisation. Bien que, dans certains cas, React puisse avoir besoin d'appeler votre composante avant d'ignorer les enfants, cela ne devrait pas affecter votre code.
React effectue les mises à jour d'état par lots. Il met à jour l'écran une fois que tous les gestionnaires d'événements ont été exécutés et ont appelé leurs fonctions set. Cela évite les rendus multiples lors d'un même événement. Dans les rares cas où vous devez forcer React à mettre à jour l'écran plus tôt, par exemple pour accéder au DOM, vous pouvez utiliser flushSync.
La fonction set possède une identité stable ; vous la verrez donc souvent omise des dépendances d'effets, mais son inclusion ne déclenchera pas l'effet. Si le linter vous permet d'omettre une dépendance sans erreur, vous pouvez le faire en toute sécurité. En savoir plus sur la suppression des dépendances d'effet.
L'appel de la fonction set pendant le rendu n'est autorisé que depuis la composante en cours de rendu. React ignorera sa sortie et tentera immédiatement de la restituer avec le nouvel état. Ce modèle est rarement nécessaire, mais vous pouvez l'utiliser pour stocker les informations des rendus précédents.
En mode strict, React appellera votre fonction de mise à jour deux fois afin de vous aider à détecter les impuretés accidentelles. Ce comportement est réservé au développement et n'affecte pas la production. Si votre fonction de mise à jour est pure (comme elle devrait l'être), cela ne devrait pas affecter le comportement. Le résultat de l'un des appels sera ignoré.
Utilisation
Ajout d'un état à une composante
Appelez useState au niveau supérieur de votre composante pour déclarer une ou plusieurs variables d'état.
- import { useState } from 'react';
-
- function MyComponent() {
- const [age, setAge] = useState(42);
- const [name, setName] = useState('Taylor');
- // ...
La convention consiste à nommer les variables d'état comme [quelque chose, setQuelque chose] en utilisant la déstructuration de tableau.
useState renvoie un tableau contenant exactement deux éléments :
- L'état actuel de cette variable d'état, initialement défini sur l'état initial que vous avez fourni.
- La fonction set qui vous permet de la modifier en fonction de l'interaction.
- Pour mettre à jour l'affichage, appelez la fonction set avec un état suivant :
- function handleClick() {
- setName('Robin');
- }
React enregistre l'état suivant, restitue votre composante avec les nouvelles valeurs et met à jour l'interface utilisateur.
Piège
L'appel de la fonction set ne modifie pas l'état actuel du code en cours d'exécution :
Cela affecte uniquement ce que useState renverra à partir du prochain rendu.