useContext - Estado Global

Imagina que tienes 10 niveles de componentes anidados y necesitas pasar el idioma del usuario desde el componente raíz hasta el más profundo.

Pasar ese dato como prop por cada nivel se llama "prop drilling" y es muy tedioso. useContext es como instalar un ducto directo: defines el valor en el nivel superior con un Provider y cualquier componente descendiente lo lee directamente con useContext, sin importar cuántos niveles haya en medio.

Un Context tiene tres partes: createContext() crea el canal de comunicación, Provider envuelve los componentes que tendrán acceso y les entrega el valor con value={}, y useContext() lee ese valor desde cualquier componente descendiente. Es ideal para datos globales de baja frecuencia de cambio: usuario autenticado, tema (oscuro/claro), idioma, o moneda. Para estado que cambia muy seguido en partes distintas de la app, considera Zustand o Redux.

import { createContext, useContext, useState } from "react";

// 1. Crear el contexto
const TemaContext = createContext("claro");
const UsuarioContext = createContext(null);

// 2. Proveer el contexto (generalmente en App)
function App() {
  const [tema, setTema] = useState("oscuro");
  const [usuario, setUsuario] = useState({ nombre: "Ana" });
  
  return (
    <TemaContext.Provider value={{ tema, setTema }}>
      <UsuarioContext.Provider value={{ usuario, setUsuario }}>
        <Header />
        <Main />
      </UsuarioContext.Provider>
    </TemaContext.Provider>
  );
}

// 3. Consumir en cualquier componente
function Header() {
  const { tema, setTema } = useContext(TemaContext);
  const { usuario } = useContext(UsuarioContext);
  
  return (
    <header className={`header-${tema}`}>
      <h1>Hola, {usuario.nombre}</h1>
      <button onClick={() =>
        setTema(tema === "claro" ? "oscuro" : "claro")
      }>
        Cambiar tema
      </button>
    </header>
  );
}

// Custom hook para el contexto
function useTema() {
  const context = useContext(TemaContext);
  if (!context) throw new Error("useTema must be within TemaProvider");
  return context;
}