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}

Prueba lo aprendido

Escribe código y ejecútalo directamente en el navegador.

Live Sandbox (JAVASCRIPT)

Output