Guide Complet des Hooks React : useState et useEffect (React 19)
Apprenez à gérer les états locaux et les effets de bord réseau ou DOM dans vos composants fonctionnels React.
Explications & Fondations Techniques
`useState` déclare une variable d'état réactive. Lorsque la fonction de mise à jour est appelée, React planifie un nouveau rendu du composant avec la valeur fraîche.
`useEffect` synchronise votre composant avec un système externe (API réseau, timers, écouteurs d'événements).
Le tableau de dépendances détermine quand l'effet se déclenche : vide `[]` pour le montage, avec des valeurs `[id]` pour une ré-exécution lors des changements.
La fonction de nettoyage (cleanup function) retournée par `useEffect` évite les fuites de mémoire en annulant abonnements et timers.
Exemple de Code Pratique
Exécuter dans le Playgroundimport React, { useState, useEffect } from "react";
export function Chronometre({ dureeMax = 60 }) {
const [secondes, setSecondes] = useState(0);
const [actif, setActif] = useState(false);
useEffect(() => {
if (!actif) return;
// Démarre l'intervalle
const timer = setInterval(() => {
setSecondes((prev) => {
if (prev >= dureeMax) {
setActif(false);
return prev;
}
return prev + 1;
});
}, 1000);
// Fonction de nettoyage cruciale pour éviter les fuites mémoire
return () => clearInterval(timer);
}, [actif, dureeMax]);
return (
<div className="p-4 rounded-xl border border-cyan-500/30">
<h3 className="text-lg font-bold">Chronomètre : {secondes}s</h3>
<button
onClick={() => setActif(!actif)}
className="mt-2 px-4 py-2 bg-cyan-500 text-black font-bold rounded"
>
{actif ? "Pause" : "Démarrer"}
</button>
</div>
);
}Pièges Fréquents & Mauvaises Pratiques
✗ Omettre des dépendances dans useEffect
useEffect(() => {
console.log(userId);
}, []); // Attention: stale closureuseEffect(() => {
console.log(userId);
}, [userId]);Omettre une variable externe utilisée dans l'effet capture une valeur périmée (stale closure) et empêche la mise à jour.
Questions Fréquentes
Quand faut-il utiliser la forme fonctionnelle setSecondes(prev => prev + 1) ?▾
Utilisez la forme fonctionnelle dès que la nouvelle valeur dépend de la précédente. Cela garantit de toujours travailler avec l'état le plus récent, même dans les callbacks asynchrones.
Maîtrisez React pas à pas
Résolvez des défis interactifs directement dans votre navigateur avec retour immédiat et indices progressifs.