useContext para el estado global
Cree un Context, envuelva un subárbol con su Provider y consuma el valor con useContext para compartir el estado del tema o de autenticación sin prop drilling.
useContext para el estado global es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
El problema de prop drilling
Prop drilling consiste en pasar datos a través de muchos componentes intermedios que no los utilizan, solo para hacerlos llegar a un componente secundario profundamente anidado. Context resuelve este problema haciendo que un valor esté disponible para cualquier componente del árbol sin tener que pasarlo explícitamente.
Creación de un Context
createContext(defaultValue) crea un objeto Context. El valor predeterminado se utiliza cuando un componente lee el contexto sin un Provider coincidente por encima de él.
import { createContext } from 'react';
interface ThemeContextType {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggleTheme: () => {}
});Proporcionar el Context
Envuelva con el Provider la parte del árbol que necesita el contexto. Todos los componentes incluidos podrán leer el valor del contexto.
function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// In app root:
<ThemeProvider>
<App />
</ThemeProvider>Consumo con useContext
Cualquier componente dentro del Provider puede acceder al valor del contexto mediante useContext(ThemeContext). No es necesario pasar nada como prop.
function ThemeToggle() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
);
}Hook personalizado para encapsular useContext
Exporte un hook personalizado que llame internamente a useContext. Es más limpio que exponer el contexto directamente y permite añadir validación.
function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
return ctx;
}
// Usage:
const { theme } = useTheme();Nuevos renderizados de Context
Cuando cambia el valor del Provider, todos los consumidores se vuelven a renderizar. Si el valor es un objeto, crear una nueva referencia del objeto en cada renderizado hará que todos los consumidores se vuelvan a renderizar. Memoice el valor con useMemo para evitarlo.
const value = useMemo(
() => ({ theme, toggleTheme }),
[theme] // toggleTheme is stable if created with useCallback
);
<ThemeContext.Provider value={value}>Cuándo usar Context
Es adecuado para: tema, configuración regional, usuario autenticado, indicadores de funcionalidades y sistema de notificaciones. No es ideal para: actualizaciones muy frecuentes (con cada pulsación de tecla) o estados grandes y complejos (utilice un store en su lugar).
Múltiples contextos
Puede tener varios contextos independientes. Manténgalos centrados en una responsabilidad: un AuthContext para la autenticación y un ThemeContext para el tema. Evite un único contexto omnipotente que lo contenga todo.
Context frente a Redux
Context viene integrado y es suficiente para datos globales que cambian con poca frecuencia. Redux/Zustand/Pinia son mejores para estados complejos con muchas actualizaciones, depuración con time travel o necesidades de middleware.
Patrón de contexto de autenticación
Un patrón habitual es un AuthContext que contiene el usuario actual y los métodos de autenticación. Los componentes consumidores obtienen el usuario sin necesidad de pasar props por componentes intermedios.
interface AuthContext {
user: User | null;
login: (creds: Credentials) => Promise<void>;
logout: () => void;
}
const AuthCtx = createContext<AuthContext | null>(null);
export const useAuth = () => {
const ctx = useContext(AuthCtx);
if (!ctx) throw new Error('Outside AuthProvider');
return ctx;
};Context y TypeScript
Defina el tipo del contexto mediante una interface. Use null como valor inicial y lance un error en el hook personalizado si es null. Así se evita que el estado imposible de «consumido fuera del Provider» pase inadvertido.
Rendimiento: memo + Context
Los componentes envueltos con React.memo no se vuelven a renderizar a menos que cambien sus props. Si la salida de un consumidor del contexto solo depende de una parte del contexto, divida el contexto o use patrones de selectores para evitar nuevos renderizados innecesarios.
Comprobación rápida
¿Qué devuelve useContext(MyContext) cuando se llama dentro de un componente que no tiene ningún Provider por encima?
Recapitulación: useContext
createContext crea un contexto con un valor predeterminado. Envuelva el árbol con un Provider para proporcionar un valor. useContext lee el valor desde cualquier lugar dentro de él. Los hooks personalizados encapsulan useContext para realizar validaciones. Memoice el valor del Provider para evitar nuevos renderizados innecesarios. Úselo para datos globales que cambian con poca frecuencia, como el tema y la autenticación.
Preguntas frecuentes
¿La lección «useContext para el estado global» es gratis?
Sí — el texto completo de «useContext para el estado global» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «useContext para el estado global»?
Cree un Context, envuelva un subárbol con su Provider y consuma el valor con useContext para compartir el estado del tema o de autenticación sin prop drilling. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «useContext para el estado global»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- useContext para el estado global
- useReducer para estados complejos
- useMemo y useCallback para mejorar el rendimiento
- Hooks personalizados: extraer lógica reutilizable