State

Le State (État)

Le state est la mémoire locale d'un composant. Contrairement aux props, il peut changer dans le temps. Chaque mise à jour du state déclenche un re-render du composant.

useState — déclaration

import { useState } from 'react';

function Compteur() {
  const [count, setCount] = useState(0); // valeur initiale = 0

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

Mise à jour fonctionnelle

Quand le nouvel état dépend de l'ancien, toujours utiliser la forme fonctionnelle :

// ❌ Peut être stale dans certains cas
setCount(count + 1);

// ✅ Toujours sûr
setCount(prev => prev + 1);

State avec objets

const [user, setUser] = useState({ nom: "Hugo", age: 25 });

// ✅ Toujours créer un nouvel objet (immuabilité)
setUser(prev => ({ ...prev, age: 26 }));

Plusieurs états

const [nom, setNom] = useState("");
const [email, setEmail] = useState("");
const [loading, setLoading] = useState(false);

State vs Props