Retour • 11/12/2024

Comment utiliser useState en React ? Le guide complet

Écris par Melvyn Malherbe le 11/12/2024

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.

La syntaxe de useState

useState retourne un tableau avec deux éléments :

const Component = () => {
  const [count, setCount] = useState(0);
  //     ^      ^           ^
  //     |      |           |
  // getter  setter    valeur initiale
  
  return <div>{count}</div>;
};

1. Le getter (count) : C'est la valeur actuelle du state
2. Le setter (setCount) : C'est la fonction qui permet de modifier le state
3. La valeur initiale (0) : C'est la valeur par défaut du state

Voici un exemple simple avec un compteur :

Le state provoque un render

Quand tu modifies un state avec le setter, React va re-rendre ton composant. Un render, c'est quoi exactement ?

1. React exécute ton composant
2. Il compare le nouveau JSX avec l'ancien
3. Il met à jour le DOM si nécessaire

Voici un exemple qui montre bien le render :

Tu peux voir que :

• Quand tu cliques sur "Increment", le composant est re-rendu car la valeur change
• Quand tu cliques sur "Same Value", le composant n'est pas re-rendu car la valeur est la même

Le state est modifié après le render

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 :

Pour résoudre ce problème, on peut utiliser la callback syntax du setter.

La callback syntax pour résoudre ce problème

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 :

Cette syntaxe est particulièrement utile quand :

• Tu as besoin de la valeur précédente pour calculer la nouvelle
• Tu fais plusieurs setState à la suite
• Tu as une closure qui capture une ancienne valeur du state

Conclusion

Tu as maintenant une compréhension complète de comment fonctionne useState :

• Sa syntaxe avec getter et setter
• Comment il provoque des renders
• Pourquoi le state est modifié après le render
• Comment utiliser la callback syntax pour des mises à jour consécutives

Tu peux retrouver ma vidéo YouTube sur le sujet :

Si tu veux approfondir tes connaissances React, je te conseille de lire :

• Quand utiliser useEffect
• Comment utiliser useRef
• Les formulaires en React