Context permite que você compartilhe um valor com uma subárvore inteira sem passar props em cada nível (prop drilling). Você cria um context, envolve uma subárvore em seu Provider, e qualquer descendente o lê com useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Dados de baixa frequência, "globais-ish" que muitos componentes precisam: tema, usuário atual, locale, feature flags.
Quando o value do Provider muda, todo componente que consome o context re-renderiza — não há forma de se inscrever em apenas uma parte dele. Duas consequências práticas:
// ❌ 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}>
Para state frequentemente alterado ou grande, divida o context em partes menores ou use uma store (Zustand/Redux) que suporte subscrições seletivas. Context é uma ferramenta de dependency-injection, não um gerenciador de estado completo.