Context API: evitar el prop drilling

El problema: prop drilling

Imagina que un dato (el usuario, el tema, el idioma) lo necesita un componente muy profundo del árbol. Sin más herramientas, hay que pasarlo por props a través de todos los componentes intermedios, aunque no lo usen. A esto se le llama "prop drilling": props que solo están de paso, ensuciando firmas y acoplando componentes que no deberían saber de ese dato.

La solución: Context

La Context API permite que un componente lejano lea un valor sin pasarlo por props en cada nivel. Tiene tres piezas:

1. Crear el contexto

const TemaContext = React.createContext("claro");

El argumento es el valor por defecto (se usa si no hay Provider encima).

2. Proveer un valor con <Ctx.Provider>

Envuelve la parte del árbol que debe tener acceso al valor:

<TemaContext.Provider value="oscuro">
  <Pagina />
</TemaContext.Provider>

Todo lo que esté dentro podrá leer ese value, esté a la profundidad que esté.

3. Leer el valor con useContext

Cualquier componente descendiente lo lee con el hook useContext:

function Boton() {
  const tema = useContext(TemaContext);
  return <button className={tema}>Tema actual: {tema}</button>;
}

Sin context, tema habría tenido que viajar por props por toda la cadena. Con context, el componente lo consume directamente del Provider más cercano.

React.createContext y useContext ya están disponibles en los ejercicios.