À quoi sert la directive useState?

useState est un hook React qui permet d'ajouter un état aux composants fonctionnels. Il retourne un tableau avec deux éléments : la valeur actuelle de l'état et une fonction pour la mettre à jour. Lorsqu'on appelle la fonction de mise à jour, le composant se re-renderise avec la nouvelle valeur.

Exemple d'utilisation :

import { useState } from 'react';

function Counter() {
  // 'count' est l'état actuel, 'setCount' est la fonction pour le mettre à jour
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Compteur : {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Augmenter
      </button>
    </div>
  );
}

Caractéristiques principales :

• Ajoute un état : Permet d'utiliser l'état dans des composants fonctionnels, auparavant uniquement dans des classes.
• Fonction de mise à jour : Retourne une fonction spéciale pour modifier l'état.
• Re-render : Modifier l'état via la fonction de mise à jour provoque un re-render du composant.
• Primitifs et objets : Peut stocker tout type de données : nombres, chaînes, booléens, objets, tableaux.
• Initialisation paresseuse : La valeur initiale peut être une fonction qui s'exécute uniquement lors du premier rendu, utile pour des calculs coûteux.

const [data, setData] = useState(() => {
  // Calculs coûteux effectués une seule fois
  const initialData = someExpensiveCalculation();
  return initialData;
});