Utilisation du crochet

d'état
Les crochets sont un nouvel ajout dans React 16.8. Ils vous
permettent d'utiliser l'état et d'autres fonctionnalités de React
sans écrire de classe.
La page d'introduction a utilisé cet exemple pour se familiariser avec les crochets :
import React, { useState } from 'react';

function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

Nous allons commencer à en apprendre davantage sur Hooks en comparant ce code à un

exemple de classe équivalent.

Exemple de classe équivalente

Si vous avez déjà utilisé des classes dans React, ce code devrait vous sembler familier :
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
 );
}
}

L'état commence par { count: 0 }, et nous incrémentons state.countlorsque l'utilisateur

clique sur un bouton en appelant this.setState(). Nous utiliserons des extraits de cette
classe tout au long de la page.
Noter
Vous vous demandez peut-être pourquoi nous utilisons un compteur ici au lieu d'un
exemple plus réaliste. C'est pour nous aider à nous concentrer sur l'API pendant que nous
faisons encore nos premiers pas avec Hooks.

Crochets et composants fonctionnels

Pour rappel, les composants de fonction dans React ressemblent à ceci :
const Example = (props) => {
// You can use Hooks here!
return <div />;
}

ou ca:
function Example(props) {
// You can use Hooks here!
return <div />;
}

Vous les connaissiez peut-être auparavant sous le nom de « composants sans état ». Nous
introduisons maintenant la possibilité d'utiliser l'état React à partir de ceux-ci, nous
préférons donc le nom "composants de fonction".
Les crochets ne fonctionnent pas à l'intérieur des classes. Mais vous pouvez les utiliser au
lieu d'écrire des classes.

Qu'est-ce qu'un crochet ?

Notre nouvel exemple commence par importer le useStateHook depuis React :
import React, { useState } from 'react';
function Example() {
// ...
}

Qu'est-ce qu'un crochet ? Un Hook est une fonction spéciale qui vous permet de « vous
connecter » aux fonctionnalités de React. Par exemple, useStateest un Hook qui vous
permet d'ajouter l'état React aux composants de la fonction. Nous apprendrons d'autres
crochets plus tard.
Quand utiliserais-je un Hook ? Si vous écrivez un composant de fonction et réalisez que
vous devez lui ajouter un état, vous deviez auparavant le convertir en classe. Vous pouvez
maintenant utiliser un crochet à l'intérieur du composant de fonction existant. Nous allons
le faire tout de suite !
Noter:
Il existe des règles spéciales sur les endroits où vous pouvez et ne pouvez pas utiliser les
crochets dans un composant. Nous les apprendrons dans Rules of Hooks .

Déclarer une variable d'état

Dans une classe, nous initialisons l' countétat à 0en définissant this.stateto { count: 0 }dans
le constructeur :
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 }; }

Dans un composant de fonction, nous n'avons pas de this, nous ne pouvons donc ni
assigner ni lire this.state. Au lieu de cela, nous appelons le useStateHook directement à
l'intérieur de notre composant :
import React, { useState } from 'react';

function Example() {
// Declare a new state variable, which we'll call "count"

const [count, setCount] = useState(0);

A quoi sert l'appel useState? Il déclare une "variable d'état". Notre variable est
appelée countmais nous pourrions l'appeler n'importe quoi d'autre, comme banana. C'est
une façon de "préserver" certaines valeurs entre les appels de fonction - useStatec'est une
nouvelle façon d'utiliser exactement les mêmes capacités que celles this.statefournies dans
une classe. Normalement, les variables "disparaissent" lorsque la fonction se termine mais
les variables d'état sont conservées par React.
A quoi passe-t-on useStatecomme argument ? Le seul argument du useState()crochet
est l'état initial. Contrairement aux classes, l'état n'a pas besoin d'être un objet. Nous
pouvons garder un nombre ou une chaîne si c'est tout ce dont nous avons besoin. Dans
notre exemple, nous voulons juste un nombre pour combien de fois l'utilisateur a cliqué,
alors passez 0comme état initial pour notre variable. (Si nous voulions stocker deux valeurs
différentes dans state, nous appellerions useState()deux fois.)
Qu'est-ce que le useStateretour? Il renvoie une paire de valeurs : l'état actuel et une
fonction qui le met à jour. C'est pourquoi nous écrivons const [count, setCount] =
useState(). Ceci est similaire à this.state.countet this.setStatedans une classe, sauf que vous
les obtenez par paire. Si vous n'êtes pas familier avec la syntaxe que nous avons utilisée,
nous y reviendrons en bas de cette page .
Maintenant que nous savons ce que useStatefait le crochet, notre exemple devrait avoir plus
de sens :
import React, { useState } from 'react';

function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);

Nous déclarons une variable d'état appelée count, et la définissons sur 0. React se
souviendra de sa valeur actuelle entre les rendus et fournira la plus récente à notre
fonction. Si nous voulons mettre à jour le courant count, nous pouvons appeler setCount.
Noter
Vous vous demandez peut-être : pourquoi n'est-il useStatepas nommé à la createStateplace
?
"Créer" ne serait pas tout à fait précis car l'état n'est créé que la première fois que notre
composant est rendu. Lors des prochains rendus, useStatenous donne l'état actuel. Sinon,
ce ne serait pas du tout "l'état" ! Il y a aussi une raison pour laquelle les noms de Hook
commencent toujours par use. Nous apprendrons pourquoi plus tard dans les règles des
crochets .

État de lecture
Quand on veut afficher le décompte courant dans une classe, on lit this.state.count:
<p>You clicked {this.state.count} times</p>

Dans une fonction, on peut utiliser countdirectement :

<p>You clicked {count} times</p>

Mise à jour de l'état

Dans une classe, nous devons appeler this.setState()pour mettre à jour l' countétat :
<button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me
</button>

Dans une fonction, nous avons déjà setCountet countcomme variables donc nous n'avons
pas besoin de this:
<button onClick={() => setCount(count + 1)}> Click me
</button>

résumé
Récapitulons maintenant ce que nous avons appris ligne par ligne et vérifions notre
compréhension.
1: import React, { useState } from 'react'; 2:
3: function Example() {
4: const [count, setCount] = useState(0); 5:
6: return (
7: <div>
8: <p>You clicked {count} times</p>
9: <button onClick={() => setCount(count + 1)}>10: Click me
11: </button>
12: </div>
13: );
14: }
 • Ligne 1 : Nous importons le useStateHook depuis React. Cela nous permet de conserver
l'état local dans un composant de fonction.
• Ligne 4 : A l'intérieur du Examplecomposant, nous déclarons une nouvelle variable d'état en
appelant le useStateHook. Il renvoie une paire de valeurs, auxquelles nous donnons des
noms. Nous appelons notre variable countcar elle contient le nombre de clics sur le
bouton. Nous l'initialisons à zéro en le passant 0comme seul useStateargument. Le
deuxième élément renvoyé est lui-même une fonction. Cela nous permet de mettre à jour
le countdonc nous allons le nommer setCount.
• Ligne 9 : Lorsque l'utilisateur clique, nous appelons setCountavec une nouvelle
valeur. React restituera alors le Examplecomposant en lui transmettant la
nouvelle countvaleur.
Cela peut sembler beaucoup à encaisser au début. Ne vous précipitez pas ! Si vous êtes
perdu dans l'explication, regardez à nouveau le code ci-dessus et essayez de le lire de haut
en bas. Nous vous promettons qu'une fois que vous aurez essayé d'"oublier" comment
l'état fonctionne dans les classes et que vous regarderez ce code avec un œil neuf, cela
aura du sens.
Astuce : que signifient les crochets ?
Vous avez peut-être remarqué les crochets lorsque nous déclarons une variable d'état :
const [count, setCount] = useState(0);

Les noms à gauche ne font pas partie de l'API React. Vous pouvez nommer vos propres
variables d'état :
const [fruit, setFruit] = useState('banana');

Cette syntaxe JavaScript est appelée « déstructuration de tableau » . Cela signifie que nous
créons deux nouvelles variables fruitet setFruit, où fruitest défini sur la première valeur
renvoyée par useState, et setFruitest la seconde. Il est équivalent à ce code :
var fruitStateVariable = useState('banana'); // Returns a pair
var fruit = fruitStateVariable[0]; // First item in a pair
var setFruit = fruitStateVariable[1]; // Second item in a pair

Lorsque nous déclarons une variable d'état avec useState, elle renvoie une paire - un
tableau avec deux éléments. Le premier élément est la valeur actuelle et le second est une
fonction qui nous permet de la mettre à jour. Utiliser [0]et [1]y accéder est un peu
déroutant car ils ont une signification spécifique. C'est pourquoi nous utilisons plutôt la
déstructuration de tableau.
Noter
Vous pourriez être curieux de savoir comment React sait à quel
composant useStatecorrespond puisque nous ne transmettons rien comme thisretour à
React. Nous répondrons à cette question et à bien d'autres dans la section FAQ.

Astuce : Utilisation de plusieurs variables d'état

Déclarer des variables d'état comme une paire de [something, setSomething]est également
pratique car cela nous permet de donner des noms différents à différentes variables d'état
si nous voulons en utiliser plusieurs :
function ExampleWithManyStates() {
// Declare multiple state variables!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

Dans le composant ci-dessus, nous avons age, fruit, et todoscomme variables locales, et
nous pouvons les mettre à jour individuellement :
function handleOrangeClick() {
// Similar to this.setState({ fruit: 'orange' })
setFruit('orange');
}

Vous n'avez pas besoin d' utiliser de nombreuses variables d'état. Les variables d'état
peuvent très bien contenir des objets et des tableaux, vous pouvez donc toujours
regrouper des données associées. Cependant, contrairement this.setStateà une classe, la
mise à jour d'une variable d'état la remplace toujours au lieu de la fusionner.
Nous fournissons plus de recommandations sur le fractionnement des variables d'état
indépendantes dans la FAQ .

Prochaines étapes
Sur cette page, nous avons découvert l'un des crochets fournis par React,
appelé useState. Nous allons aussi parfois l'appeler le "State Hook". Cela nous permet
d'ajouter un état local aux composants de la fonction React - ce que nous avons fait pour
la toute première fois !
Nous en avons également appris un peu plus sur ce que sont les crochets. Les hooks sont
des fonctions qui vous permettent de « vous connecter » aux fonctionnalités de React à
partir des composants fonctionnels. Leurs noms commencent toujours par use, et il y a plus
de crochets que nous n'avons pas encore vus.
Continuons maintenant en apprenant le Hook suivant : useEffect. Il vous permet
d'effectuer des effets secondaires dans les composants et est similaire aux méthodes de
cycle de vie dans les classes.