React
Explica cómo diseñar providers de contexto con responsabilidades claras, valores estables y alcance reducido para evitar acoplamiento y renders innecesarios.
Context transporta un valor hacia descendientes sin pasar props por cada nivel. Cada consumidor se actualiza cuando cambia el valor observado.
const AuthContext = createContext<AuthContextValue | null>(null);Un hook de acceso centraliza validación:
function useAuth() {
const value = useContext(AuthContext);
if (!value) throw new Error("useAuth requiere AuthProvider");
return value;
}Un solo contexto enorme provoca actualizaciones amplias. Divide valores con ritmos de cambio diferentes:
<AuthContext value={{ user, logout }}>El objeto se crea en cada render. Esto no siempre es un problema, pero en árboles grandes puede justificar separar providers o estabilizar valores después de medir.
Antes de usar Context, revisa si children, slots o props directas mantienen dependencias más claras.
Datos remotos con caché, revalidación y deduplicación suelen pertenecer a una herramienta de server state, no a Context manual.
Context resuelve distribución, no arquitectura completa de estado. Diseña providers por responsabilidad y frecuencia de cambio.
Un provider debería representar una dependencia o dominio reconocible:
ThemeProvider → preferencia visual
SessionProvider → identidad actual
CartProvider → estado de carritoUn AppContext con usuario, tema, notificaciones, carrito y modales mezcla ritmos de cambio y obliga a consumidores a depender de una superficie enorme.
No todo provider pertenece al root:
function CheckoutRoute() {
return (
<CheckoutProvider>
<CheckoutPage />
</CheckoutProvider>
);
}Colocarlo cerca de la feature:
Un provider global es apropiado cuando su valor realmente pertenece a toda la aplicación, como locale o sesión.
const CartStateContext = createContext<CartState | null>(null);
const CartDispatchContext = createContext<React.Dispatch<CartAction> | null>(null);dispatch suele conservar identidad. Un botón que solo despacha puede consumir acciones sin volver a renderizar por cada cambio de items.
Esto no crea selectores para partes arbitrarias del state; los consumidores del contexto de datos siguen actualizándose cuando cambia su value.
const value = { user, logout };El objeto cambia por referencia cada vez que el provider renderiza. Antes de memoizar, pregunta:
logout cambia de identidad?const value = useMemo(() => ({ user, logout }), [user, logout]);Memoizar conserva referencia, pero no corrige un provider demasiado amplio ni evita cambios cuando una dependencia real cambia.
La API base de Context notifica a todos los consumidores del value. Para actualizaciones frecuentes y parciales evalúa:
No construyas una store casera dentro de Context solo para evitar una dependencia sin comprender concurrencia y suscripciones.
No todo valor debe ser state:
const AnalyticsContext = createContext<AnalyticsClient | null>(null);Una rama puede recibir un cliente estable para registrar eventos. Esto facilita tests y evita imports globales. El provider distribuye la dependencia; no necesita actualizarse.
Para un provider obligatorio, usa null y falla con un mensaje útil:
function useCart() {
const value = useContext(CartContext);
if (value === null) {
throw new Error("useCart must be used within CartProvider");
}
return value;
}Un objeto default con funciones vacías puede ocultar una configuración rota y hacer que acciones no produzcan ningún resultado.
Crea un wrapper de prueba:
function renderWithProviders(ui: React.ReactNode) {
return render(
<ThemeContext value="dark">
<SessionContext value={testSession}>{ui}</SessionContext>
</ThemeContext>,
);
}Prueba comportamiento del consumidor, además del error cuando falta un provider obligatorio.
No distribuyas posición del mouse completa a toda la app mediante Context. Cada movimiento puede actualizar numerosos consumers. Mantén el dato cerca del componente visual, usa refs para trabajo no renderizable o una store selectiva si muchas regiones realmente lo necesitan.
useMemo sobre el value?Reglas de los Hooks explica las restricciones que permiten a React asociar cada llamada con su memoria correcta.