Prop drilling: cuando pasar props duele

Sabes pasar datos de padre a hijo con props. Pero ¿qué pasa cuando un dato que vive arriba lo necesita un componente MUY abajo, y hay que atravesar cinco niveles que no lo usan solo para hacerlo llegar? Eso es el PROP DRILLING: props que perforan capas y capas de componentes intermedios como un taladro. Es tedioso, frágil y ensucia componentes que no tienen nada que ver con ese dato. Hoy sientes el problema en carne propia —para que las soluciones del módulo (Context, Zustand) tengan sentido—.

El recado que pasa de mano en mano

El dolor, en vivo

Este ejemplo pasa usuario desde App hasta Saludo, tres niveles abajo. Fíjate en Panel y Barra: reciben y reenvían usuario aunque no lo usan para nada:

Panel y Barra reciben usuario como prop solo para pasárselo al siguiente —no lo tocan—. Con tres niveles ya molesta; imagina diez, o varios datos (usuario, tema, idioma) perforando cada uno. Y si Saludo necesitara un dato nuevo de App, tendrías que agregarlo a la firma de Panel y Barra también. Ese acoplamiento es el precio del prop drilling.

Por qué escala mal

Mini-reto

Siente el dolor y anticipa la cura: 1) toma el playground y agrega un SEGUNDO dato global, tema ("claro" | "oscuro"), que solo usa Saludo (para su color) pero que también debe atravesar Panel y Barra; 2) observa cuántas firmas de componentes tuviste que modificar para un dato que solo usa el del fondo; 3) escribe en un comentario qué te gustaría poder hacer en su lugar (pista: que Saludo LEA tema directamente sin que se lo pasen). Eso es justo lo que resuelve la próxima lección.

Qué sigue

La cura al prop drilling que trae React de fábrica: CONTEXT. Te deja poner un dato "en el aire" de un subárbol y que cualquier descendiente lo LEA directamente, sin props intermedias. La próxima lección lo construye —y aclara cuándo Context es la herramienta correcta y cuándo te estás pasando—.