prop drilling
Cortar el prop drilling
Prop drilling es pasar datos a través de capas de componentes que no los usan — solo los reenvían hacia abajo. Cuando el árbol crece, acopla la API de cada capa a los detalles de sus descendientes y hace el código frágil. Context y la composición con children son las herramientas principales para cortarlo.
Cuándo es un problema
Pasar una prop por 2 niveles es normal. El problema aparece cuando componentes intermedios reciben props solo para pasarlas sin usarlas nunca. Cualquier cambio en el consumidor final obliga a tocar todos los intermediarios.
Dos soluciones
Context — ideal para datos globales o semi-globales: usuario activo, tema, locale. El consumidor lee directamente del contexto sin que nadie lo pase. Composición — pasar children o elementos como props evita el tunneling sin necesidad de contexto y suele ser la solución más simple.
Tropiezos comunes
- 01Context no es gratis: cualquier cambio en el valor re-renderiza todos los consumidores. No lo uses para estado que cambia frecuentemente.
- 02La composición con children suele ser la solución más simple y se olvida con frecuencia — antes de crear un contexto, evalúa si puedes pasar elementos como props.
- 03No eleves datos a Context solo 'por si acaso' los necesitas en otro lado. Muévelos solo cuando el drilling real sea un problema.