Context API
El Context API en React es una herramienta integrada que permite compartir datos entre componentes sin necesidad de prop drilling, es decir, evitando pasar props manualmente a través de múltiples niveles de componentes. Es fundamental en aplicaciones modernas y SPA donde la estructura de componentes puede ser profunda y compleja, y ciertos datos deben estar disponibles globalmente.
Context API se utiliza para manejar datos globales como configuraciones de tema, información del usuario, preferencias de idioma o cualquier estado que deba ser accesible en varios componentes. Se crea un contexto usando createContext, el Provider provee los datos y se consumen mediante useContext o Consumer en los componentes hijos.
En este tutorial aprenderás a crear contextos reutilizables, optimizar el flujo de datos, evitar re-renderizados innecesarios y errores por mutación directa del estado. Además, se abordarán buenas prácticas de React como dividir contextos según áreas de estado, mejorar la performance y la integración de Context API en aplicaciones escalables modernas.
Ejemplo Básico
jsximport React, { createContext, useState, useContext } from 'react';
// Crear el contexto de tema
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
const ThemeSwitcher = () => {
const { theme, toggleTheme } = useContext(ThemeContext);
return ( <div> <p>Tema actual: {theme}</p> <button onClick={toggleTheme}>Cambiar tema</button> </div>
);
};
const App = () => ( <ThemeProvider> <ThemeSwitcher /> </ThemeProvider>
);
export default App;En este ejemplo, ThemeContext se crea con createContext. El componente ThemeProvider usa useState para manejar el estado del tema y proporciona la función toggleTheme para alternar entre "light" y "dark". El Provider envuelve a los componentes hijos y les entrega los valores del contexto.
ThemeSwitcher utiliza useContext para acceder a los datos del contexto y llamar a la función de cambio de tema. Esto evita el prop drilling, facilita el mantenimiento del código y permite la reutilización de contextos. En aplicaciones reales, se utiliza para manejar temas, configuraciones de usuario y otros estados globales.
Ejemplo Práctico
jsximport React, { createContext, useState, useContext, useEffect } from 'react';
// Crear contexto de usuario
const UserContext = createContext();
const UserProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// Simulación de llamada a API
setTimeout(() => {
setUser({ name: 'Juan Pérez', role: 'Admin' });
setLoading(false);
}, 1500);
}, []);
const logout = () => setUser(null);
return (
<UserContext.Provider value={{ user, loading, logout }}>
{children}
</UserContext.Provider>
);
};
const UserProfile = () => {
const { user, loading, logout } = useContext(UserContext);
if (loading) return <p>Cargando datos...</p>;
if (!user) return <p>Usuario no autenticado</p>;
return ( <div> <h2>Bienvenido, {user.name}</h2> <p>Rol: {user.role}</p> <button onClick={logout}>Cerrar sesión</button> </div>
);
};
const App = () => ( <UserProvider> <UserProfile /> </UserProvider>
);
export default App;En el ejemplo práctico, UserProvider maneja el estado del usuario y el estado de carga con useState y useEffect, simulando una llamada a API. El Provider entrega user, loading y la función logout a los componentes hijos.
UserProfile consume el contexto usando useContext y renderiza de manera condicional: mensaje de carga, información del usuario o indicación de no autenticado. Este patrón mejora la separación de estado e interfaz, facilita el mantenimiento y evita re-renderizados innecesarios, optimizando la performance.
Las mejores prácticas con Context API incluyen colocar Providers en el nivel adecuado, dividir contextos según áreas de estado y usar useState o useReducer para actualizar estado de manera segura.
Errores comunes: almacenar estado local innecesario en contexto, modificar valores directamente, manejo incorrecto de actualizaciones asíncronas. Para depuración se recomienda React DevTools. Para optimización: dividir contextos, usar React.memo y useMemo, y minimizar actualizaciones innecesarias. Seguridad: evitar almacenar datos sensibles como tokens en el contexto.
📊 Tabla de Referencia
| React Element/Concept | Description | Usage Example |
|---|---|---|
| createContext | Crea un contexto para compartir datos | const ThemeContext = createContext(); |
| Provider | Proporciona valores del contexto a componentes hijos | <ThemeContext.Provider value={{ theme }}></ThemeContext.Provider> |
| useContext | Hook para consumir valores del contexto | const theme = useContext(ThemeContext); |
| useState | Maneja estado local en Provider | const [theme, setTheme] = useState('light'); |
| useEffect | Maneja efectos y ciclo de vida de componentes | useEffect(() => { fetchData(); }, []); |
Context API ofrece un método eficiente para gestionar estado global, evitando prop drilling y mejorando el mantenimiento del código. Los principios clave incluyen creación de Providers, uso de useContext, manejo de datos asíncronos y optimización de re-renderizados.
Se recomienda continuar aprendiendo Redux o Zustand para comprender diferencias con soluciones de gestión de estado más completas. Aplicar Context API correctamente permite construir aplicaciones React escalables, eficientes y mantenibles.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior