Context vous permet de partager une valeur avec un sous-arbre entier sans passer les props à travers chaque niveau (prop drilling). Vous créez un context, enveloppez un sous-arbre dans son Provider, et n'importe quel descendant le lit avec useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Données de faible fréquence, "globales-ish" dont de nombreux composants ont besoin : theme, current user, locale, feature flags.
Quand la value du Provider change, chaque composant qui consomme le context se re-rend — il n'y a aucun moyen de s'abonner à seulement une partie. Deux conséquences pratiques :
// ❌ a NEW object every render → all consumers re-render every time
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize the value so it only changes when it really changes
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
Pour l'état fréquemment modifié ou volumineux, divisez le context en morceaux plus petits, ou utilisez un store (Zustand/Redux) qui prend en charge les abonnements sélectifs. Context est un outil d'injection de dépendances, pas un gestionnaire d'état complet.