Prop Drilling vs Context API

En React existen varias formas de compartir datos entre componentes. Dos de las más comunes son prop drilling y Context API.

El problema es que muchas veces se usan mal, o se eligen por costumbre en lugar de por necesidad.

En esta clase verás cuándo tiene sentido usar cada una, cuáles son sus límites reales y por qué no todo estado debería ser global.

¿Qué es Prop Drilling?

Prop drilling consiste simplemente en pasar datos de un componente padre a sus hijos mediante props, incluso aunque algunos componentes intermedios no necesiten esos datos directamente.

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

No tiene nada de malo. De hecho, es la forma más básica y natural de compartir datos en React.

Cuándo usar Prop Drilling

Prop drilling funciona muy bien cuando:

• El dato solo baja 1, 2 o como mucho 3 niveles.
• La aplicación es pequeña o simple.
• El dato pertenece claramente a un flujo padre → hijo.
• El estado es específico de una parte del árbol.

Ejemplo típico

function App() {
  const user = { name: 'Midu' }
  return <Header user={user} />
}

function Header({ user }) {
  return <h1>Hola {user.name}</h1>
}

Aquí no hay ningún problema. Usar Context en este caso sería innecesario.

---

El problema del Prop Drilling

El problema aparece cuando:

• El dato tiene que viajar 10, 15 o más niveles.
• Componentes intermedios reciben props que no usan.
• El árbol empieza a volverse difícil de mantener.

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

Aquí el user se pasa por muchos componentes que no lo necesitan. Esto es una señal clara de que quizás necesitas otra solución.

Aquí entra Context API

Context API permite definir un estado en un punto del árbol y consumirlo desde cualquier componente descendiente, sin necesidad de pasar props manualmente.

import { createContext, use } from 'react'

const UserContext = createContext()

function App() {
  const user = { name: 'Midu' }

  return (
    <UserContext value={user}>
      <Layout />
    </UserContext>
  )
}

function UserAvatar() {
  const user = use(UserContext)

  return <img alt={user.name} />
}

Esto elimina el prop drilling y simplifica el árbol de componentes.

Cuándo usar Context API

Context API tiene sentido cuando:

• Los componentes están en niveles muy distintos del árbol.
• El dato representa algo global.
• El estado cambia poco.
• No quieres usar librerías externas.

Casos típicos de Context

• Autenticación (login / logout)
• Tema (dark / light)
• Idioma
• Preferencias globales

Estos estados no cambian constantemente, y cuando lo hacen, es algo puntual.

Context API no es para todo

Un error muy común es usar Context para cualquier estado global sin pensar en el impacto.

Context está pensado para estados poco frecuentes, no para estados que cambian todo el tiempo.

Si un estado cambia constantemente y está en Context:

• Provoca re-renderizados innecesarios.
• Puede afectar al rendimiento.
• Hace más difícil escalar la aplicación.

Comparación rápida

Prop Drilling vs Context API
───────────────────────────

Prop Drilling
- Simple
- Explícito
- Ideal para pocos niveles
- Perfecto para apps pequeñas

Context API
- Elimina props innecesarias
- Ideal para muchos niveles
- Pensado para estado global
- Cambios poco frecuentes

No es una batalla de “uno es mejor que otro”. Cada uno tiene su lugar.

¿Y si la app crece?

Cuando la aplicación empieza a crecer y:

• El estado global es más complejo.
• Hay muchos cambios de estado.
• Empiezan los problemas de rendimiento.

Ahí es cuando Context se queda corto.

En esos casos, existen bibliotecas como Zustand que simplifican muchísimo la gestión de estado global y evitan los problemas típicos de Context.

Y justo eso es lo que verás en la siguiente clase.

Reglas prácticas para decidir

Usa Prop Drilling si:

• El dato baja pocos niveles.
• Es una app pequeña.
• El estado es local y claro.
• No hay complejidad innecesaria.

Usa Context API si:

• El dato viaja muchos niveles.
• Representa algo global.
• Cambia pocas veces.
• No quieres dependencias externas.

No uses Context si:

• El estado cambia constantemente.
• El rendimiento empieza a resentirse.
• La app ya es grande y compleja.

Resumen de la clase

En esta clase has aprendido:

• Qué es prop drilling y por qué no es algo malo.
• Cuándo usar prop drilling sin miedo.
• Qué problema resuelve Context API.
• Para qué tipo de estados está pensado Context.
• Por qué Context no es la solución definitiva.
• Cuándo empezar a mirar alternativas como Zustand.

Conclusión

Prop drilling y Context API no compiten, se complementan.

Prop Drilling → Simpleza
Context API  → Estado global puntual
Zustand     → Escalabilidad

Elegir bien desde el principio te ahorra refactors innecesarios y problemas de rendimiento.