Skip to main content

useState

useState

Permet d'ajouter un état local à un composant fonctionnel.

Syntaxe

const [state, setState] = useState(valeurInitiale);

Exemples

// Booléen
const [isOpen, setIsOpen] = useState(false);

// Tableau
const [items, setItems] = useState([]);
const addItem = (item) => setItems(prev => [...prev, item]);
const removeItem = (id) => setItems(prev => prev.filter(i => i.id !== id));

// Objet
const [form, setForm] = useState({ email: "", password: "" });
const handleChange = (e) => {
  setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));
};

Initialisation paresseuse (lazy initialization)

Si le calcul de la valeur initiale est coûteux, passer une fonction pour ne l'exécuter qu'une fois :

// ❌ Calculé à chaque render
const [data, setData] = useState(computeExpensiveValue());

// ✅ Calculé une seule fois
const [data, setData] = useState(() => computeExpensiveValue());

Règles importantes

  • Ne jamais muter le state directement — toujours créer une nouvelle valeur
  • Les mises à jour de state sont asynchrones (batchées)
  • Utiliser la forme fonctionnelle quand le nouvel état dépend du précédent
Back to top