Intermedioreact
Context API
Comparte estado global entre componentes sin pasar props manualmente a traves de cada nivel.
El problema del prop drilling
Cuando varios componentes anidados necesitan los mismos datos, pasar props a traves de cada nivel intermedio se vuelve tedioso y propenso a errores. Esto se conoce como prop drilling. Context API lo resuelve.
Crear y usar un Context
Se crea un contexto con
createContext, se provee con un Provider, y se consume con useContext.jsx
1import { createContext, useContext, useState } from "react";
2
3const ThemeContext = createContext();
4
5function ThemeProvider({ children }) {
6 const [dark, setDark] = useState(false);
7 return (
8 <ThemeContext.Provider value={{ dark, toggle: () => setDark(!dark) }}>
9 {children}
10 </ThemeContext.Provider>
11 );
12}
13
14// Cualquier componente hijo puede acceder al tema
15function BotonTema() {
16 const { dark, toggle } = useContext(ThemeContext);
17 return (
18 <button onClick={toggle}>
19 Modo: {dark ? "Oscuro" : "Claro"}
20 </button>
21 );
22}