React hooks : le modèle mental
Les questions React tournent rarement autour de l'API : elles vérifient que tu comprends le cycle de rendu et la source de vérité de l'état.
À retenir
- Un rendu = une fonction pure de l'état et des props.
- useState : état local, mise à jour asynchrone et par lot.
- useEffect : synchronisation avec l'extérieur, pas « faire des choses après le rendu ».
- useMemo / useCallback : optimisation, jamais par défaut.
- Les clés de liste doivent être stables et uniques.
useEffect : le piège classique
Un effet sert à synchroniser avec un système externe (réseau, abonnement, DOM). Calculer une valeur dérivée dans un effet crée un rendu inutile : calcule-la directement pendant le rendu.
// ❌
useEffect(() => setTotal(items.length), [items]);
// ✅
const total = items.length;Remontée d'état
Quand deux composants ont besoin de la même donnée, on la remonte au parent commun. Sinon, on passe par un contexte ou un store.
Performance
Mesure d'abord. Les vraies causes de lenteur sont les listes non virtualisées, les re-rendus de gros arbres et les calculs lourds dans le rendu — rarement l'absence de useCallback.
Pièges fréquents
- Muter l'état au lieu de créer un nouvel objet.
- Utiliser l'index comme clé dans une liste réordonnable.
- Oublier la fonction de nettoyage d'un effet.
Questions que le recruteur peut poser
- Quand utiliserais-tu useMemo ?
- Pourquoi ce composant se re-rend-il ?
- Comment éviterais-tu un appel réseau en double ?
À réviser ensuitePerformance web : les leviers qui comptent →