🎉18) Componentización

Un aspecto muy importante de React, incluso tal vez el más importante, es la premisa en la cual está basado, que es la Componentización.

El uso y reuso de componentes hace que esta librería pueda escalar de una manera sencilla, fácil de utilizar, y fomenta la reutilización, la encapsulación asi como también el testing y el mantenimiento.

Veamos un ejemplo práctico. Tenemos el siguiente componente que renderiza una lista de imágenes:

Parece sencillo no? Qué sucede si queremos cambiar la clase de cada imágen cuando image tiene una property booleana que se llama isDisabled? Y si queremos mostrar una imágen en mobile y otra en desktop?

Ya fue necesario modificar la función map y agregamos dos líneas para manejar las clases que queremos usar para cada imagen, asi como también la sección del src

Qué sucede ahora si queremos trackear cuantas veces el usuario hace click en estas imágenes?

Fue necesario agregar un onClick a este Componente, lo cual ya lo hizo crecer en tamaño debido a que fue necesario agregar un constructor también. También, si vemos como quedó el código, la función onClick quedó a nivel del componente Images. Si alguien lee nuestro código, puede pensar que este evento es al hacer click en el Componente Images, y no en cada imágen.

Y si quisieramos no solo reportar que se hizo click, sino que además en que imágen se hizo click?

Para hacer esto, tuvimos que definir una función anónima a nivel de la imagen para que devuelva la imagen seleccionada. Queda raro no? Además, por ahora solo estamos imprimiendo la imagen, pero imaginense si también fuese necesario que al hacer click en la imagen, necesitamos marcarla como visitada. Esto implicaría recorrer esa lista de imágenes, buscar la imágen que fue clickeada y actualizar la información. Y si además quisieramos mostrar estas imágenes en un slider?

De todo esto, podemos concluir que:

• El código del componente padre se comienza a mezclar con el del hijo, y comienza a generar un poco de confusión

• Existen 2 razones por las cuales podríamos tocar este componente, lo cual lo hace más difícil de mantener

• El padre comienza a manejar responsabilidades del hijo

• El testing pertinente a este componente comienza a hacerse más complejo

Como quedaría este componente entonces?