Context: compartir datos sin prop drilling

Context sirve para compartir datos con muchos componentes sin pasar props manualmente por varios niveles.

Caso típico:

• usuario autenticado
• tema visual
• idioma
• configuración global

El problema: prop drilling

<App user={user}>
  <Layout user={user}>
    <Sidebar user={user} />
  </Layout>
</App>

Si Layout no necesita user, pero tiene que recibirlo solo para reenviarlo, aparece fricción.

Uso básico

import { createContext, useContext } from 'react';

const AuthContext = createContext(null);

function App() {
  return (
    <AuthContext.Provider value={{ user: { name: 'Ana' } }}>
      <Dashboard />
    </AuthContext.Provider>
  );
}

function Profile() {
  const auth = useContext(AuthContext);
  return <p>{auth.user.name}</p>;
}

Cuándo sí usarlo

• datos realmente transversales
• muchos componentes dispersos lo necesitan
• pasarlos por props solo ensucia el árbol

Cuándo no

• estado muy local
• datos usados por dos componentes cercanos
• “porque así evito props” sin más criterio

Context no sustituye pensar bien el diseño del estado.

Regla práctica

Primero intenta:

• composición
• recolocar el estado más arriba
• props claras

Si el dato sigue siendo transversal, entonces Context tiene sentido.

En la siguiente lección veremos qué hacer cuando el problema no es compartir estado, sino gestionarlo con más estructura.