Context ti consente di condividere un valore con un intero subtree senza passare props attraverso ogni livello (prop drilling). Crei un context, avvolgi un subtree nel suo Provider, e qualsiasi descendant lo legge con useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Dati a bassa frequenza, "globali-ish" di cui molti componenti hanno bisogno: theme, utente corrente, locale, feature flag.
Quando il value del Provider cambia, ogni componente che consuma il context esegue il re-render — non c'è modo di sottoscriversi solo a una parte. Due conseguenze pratiche:
// ❌ 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}>
Per state che cambiano frequentemente o di grandi dimensioni, dividi il context in pezzi più piccoli, oppure usa uno store (Zustand/Redux) che supporta sottoscrizioni selettive. Context è uno strumento di dependency-injection, non un vero gestore di stato.