Aprende a compartir estado entre ramas del árbol de componentes usando Context API cuando pasar props por muchos niveles deja de ser sostenible.
Context API resuelve un problema concreto: compartir datos transversales entre muchos componentes sin encadenar props nivel tras nivel.
Ejemplos típicos: usuario autenticado, tema de interfaz, idioma o configuración global de producto.
No es un sustituto universal de todo estado; para estado local de una sección sigue siendo mejor usar useState o props directas.
La clave profesional es usar contexto para datos realmente globales y estables, evitando convertirlo en un cajón de sastre.
Úsalo cuando el dato se necesita en muchas ramas lejanas del árbol.
Si solo dos componentes cercanos comparten un dato, props normales suelen ser más simples.
Cuando empiezas a pasar la misma prop por 4-5 niveles que ni la usan, aparece prop drilling.
Ahí Context mejora legibilidad y reduce acoplamiento entre capas intermedias.
El Provider define el valor compartido; los consumidores lo leen con useContext.
Contexto útil sí, contexto omnipresente no.
Divide contextos por dominio (auth, theme, cart) en lugar de uno gigante con todo.
Memoiza valores complejos si cambian con frecuencia para evitar renders innecesarios en consumidores.
Expón custom hooks (`useAuth`, `useTheme`) para encapsular y tipar mejor el acceso.
Aprende a compartir estado entre ramas del árbol de componentes usando Context API cuando pasar props por muchos niveles deja de ser sostenible.
Código del tema: const { data } = useQuery({ queryKey:["items"] });
Úsalo cuando el dato se necesita en muchas ramas lejanas del árbol.
Si solo dos componentes cercanos comparten un dato, props normales suelen ser más simples.
Cuando empiezas a pasar la misma prop por 4-5 niveles que ni la usan, aparece prop drilling.
Ahí Context mejora legibilidad y reduce acoplamiento entre capas intermedias.
El Provider define el valor compartido; los consumidores lo leen con useContext.
import { createContext, useContext, useState } from 'react';
const AuthContext = createContext(null);
export function AuthProvider({ children }) {
const [user, setUser] = useState(null);
return (
<AuthContext.Provider value={{ user, setUser }}>
{children}
</AuthContext.Provider>
);
}
export function useAuth() {
return useContext(AuthContext);
}Contexto útil sí, contexto omnipresente no.
Divide contextos por dominio (auth, theme, cart) en lugar de uno gigante con todo.
Memoiza valores complejos si cambian con frecuencia para evitar renders innecesarios en consumidores.
Expón custom hooks (`useAuth`, `useTheme`) para encapsular y tipar mejor el acceso.