Comment utiliser useState en React ? Le guide complet
11/12/2024 • Melvynx
useState
est le hook le plus utilisé en React. Il permet de stocker des données qui, quand elles sont modifiées, vont provoquer un nouveau rendu de ton composant. Dans ce guide, je vais t'expliquer en détail comment il fonctionne.
useState
retourne un tableau avec deux éléments :
const Component = () => {
const [count, setCount] = useState(0);
// ^ ^ ^
// | | |
// getter setter valeur initiale
return <div>{count}</div>;
};
count
) : C'est la valeur actuelle du statesetCount
) : C'est la fonction qui permet de modifier le state0
) : C'est la valeur par défaut du stateVoici un exemple simple avec un compteur :
Quand tu modifies un state avec le setter, React va re-rendre ton composant. Un render, c'est quoi exactement ?
Le DOM n'est mis à jour que si le JSX a changé. React est très optimisé pour ça !
Voici un exemple qui montre bien le render :
Tu peux voir que :
C'est très important de comprendre que le state n'est pas modifié immédiatement. React attend la fin du render pour mettre à jour le state.
Regarde cet exemple :
Le compteur n'augmente que de 1 alors qu'on appelle setCount
trois fois !
C'est parce que count
garde la même valeur jusqu'au prochain render.
Pour résoudre ce problème, on peut utiliser la callback syntax du setter.
Le setter de useState peut prendre une fonction en paramètre. Cette fonction reçoit la valeur actuelle du state et doit retourner la nouvelle valeur :
const Component = () => {
const [count, setCount] = useState(0);
const increment = () => {
// ❌ Utilise toujours la même valeur de count
setCount(count + 1);
// ✅ Utilise la valeur la plus récente
setCount((previousCount) => previousCount + 1);
};
return <button onClick={increment}>Increment</button>;
};
Voici l'exemple précédent corrigé avec la callback syntax :
Maintenant le compteur augmente bien de 3 ! La callback reçoit toujours la dernière valeur du state, même si celui-ci n'a pas encore été mis à jour dans le composant.
Cette syntaxe est particulièrement utile quand :
Tu as maintenant une compréhension complète de comment fonctionne useState
:
Tu peux retrouver ma vidéo YouTube sur le sujet :
Si tu veux approfondir tes connaissances React, je te conseille de lire :