El contexto te permite compartir un valor con todo un subárbol sin pasar props por cada nivel (prop drilling). Creas un contexto, envuelves un subárbol en su Provider, y cualquier descendiente lo lee con useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Datos "casi globales" que cambian con poca frecuencia y que muchos componentes necesitan: tema, usuario actual, idioma (locale), feature flags.
Cuando el value del Provider cambia, todos los componentes que consumen el contexto se vuelven a renderizar; no hay forma de suscribirse solo a una parte de él. Dos consecuencias prácticas:
// ❌ 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 estado que cambia con frecuencia o que es grande, divide el contexto en piezas más pequeñas, o usa un store (Zustand/Redux) que admita suscripciones selectivas. El contexto es una herramienta de inyección de dependencias, no un gestor de estado completo.