Props... Props por todos lados.

Lunes 4 de Septiembre de 2023.

¿Estás listo para adentrarte en el intrigante mundo de la transferencia de propiedades entre componentes? Esta fue la pregunta que me hice la primera vez que presencié cómo las propiedades se movían de un lado a otro, como si se tratara de magia negra tecnológica.

Con el tiempo, uno llega a comprender la simplicidad que subyace en el acto de transmitir propiedades entre componentes y cuán fácil puede ser complicar las cosas si no se eligen adecuadamente los nombres de las propiedades y variables, entre otros.

Dicho de manera simple y dejando de lado el sarcasmo, el paso de props se refiere a la acción de enviar información desde un componente principal a uno o varios componentes secundarios, permitiendo que estos últimos la utilicen en su funcionamiento o la pasen a componentes aún más bajos, en lo que se conoce como "prop drilling".

Es importante destacar que el prop drilling en sí no es necesariamente una mala práctica, pero puede volverse tecnológicamente ineficiente, especialmente en aplicaciones extensas o complejas. Esto se debe a que implica atravesar varios niveles de componentes para transferir un simple dato.

Entre las desventajas que encontramos se incluyen:

Aumento de la complejidad: A medida que se incrementa el número de niveles de anidación de componentes, se vuelve cada vez más complicado rastrear la fuente de la información.

Dificultad en el mantenimiento: Si necesitas realizar cambios en la estructura de tus componentes o en los datos que se transmiten, puede resultar tedioso actualizar todas las capas de componentes involucradas en el proceso de prop drilling.

Mayor probabilidad de errores: Conforme se pasan props a través de múltiples niveles, se aumenta la probabilidad de cometer errores tipográficos o de lógica en el código.

En resumen, el prop drilling no es inherentemente problemático, pero debemos ser conscientes de sus limitaciones. Esto es especialmente importante en aplicaciones extensas, donde es fundamental mantener un código limpio y fácil de mantener.

const ParentComponent = () => {
    const proud = true
    return(
        <ChildComponent isProud={proud} />
    )
}

const ChildComponent = ({isProud}) => {
    return(
        <OtherComponent isProud={isProud}/>
    )
}

const OtherComponent =({isProud}) => {
  return (
    <>
      {isProud && <p>Esta orgulloso</p>}
      {!isProud && <p>Debo de buscarle un nuevo trabajo</p>}
    </>
  )
}

Espero que este ejemplo de codigo aclaré ciertas dudas sobre este tema para todas esas personas que estan empezando con React. Como alternativa podriamos usar API Context para tener un "Contexto Global" y no depender del paso de props entre componentes, ademas podemos hacer uso de los customHooks para genera una logica simple y precisa y trabajar de una manera mas agusto con nuestros componentes.

Espero veros en la proxima!