Apuntes de React: Patrones — Render Props
Seguro ya han escuchado acerca de este tema y es que el patrón Render Props es uno de los mas usados y queridos por los React devs, así que si aún no te queda claro o de plano no lo habías escuchado antes este post te puede interesar.
¿Patrones de que?
Render props es un patrón de diseño para componentes de react, esto quiere decir que es una guía de como hacer un componente que cumple ciertas características de implementación. Para esta clase de componentes se debe cumplir que el componente render prop maneje un estado que pueda ser pasado al hijo, con esto se le da al hijo la opción de presentar los componentes que quiera según el estado del componente padre.
Esto nos permite hacer componentes reutilizables que solo manejen un estado y de ahi dar la libertad al desarrollador para colocar los componentes que deseen mientras que la funcionalidad seguirá siendo la misma.
Pensemos en un paginador; un paginador debe cumplir que de acuerdo a un array de datos, nos segmente esta información en paginas para que podamos presentarla de poco en poco.
Analicemos la implementación anterior. El componente Paginator recibe como propiedades data, que es un arreglo de lo que sea, toRender que es una función que mapea cada elemento del arreglo a un nuevo nodo de react y por último itemsPerPage que es un entero que indica cuantos elementos queremos ver por página.
La verdad no esta nada mal este componente, y aunque bien podría ser muy reutilzable el único inconveniente es que no le da completa libertad al desarrollador de como presentar cada pagina, quizás podamos mejorar el maquetado pero siempre habrá un cliente quisquilloso que quiera un paginador hecho a la medida. Por lo que podemos copiar y pegar la misma lógica que ya hemos creado para modificar la maqueta o podemos mejorar el componente para que pueda ser aún más reutilizable.
Lo que haremos es desechar la maqueta para darle completo control al desarrollador y luego expondremos una API para manejar las páginas desde el componente hijo.
Con este pequeño cambio hemos generado un componente 100% reutilizable. Pero que fue lo que realmente cambiamos? Bueno, para empezar removimos la implementación del render y lo reemplazamos por la línea:
return this.props.children(this.getStateAndHelpers());
la propiedad children es una función que pasara el API de Paginator, con ayuda de la función getStateAndHelpers(), para poder presentar la maqueta que se desee.
En el ejemplo de arriba no vemos gran diferencia con el código anterior, pero lo importante es ver como la responsabilidad de la maqueta se abstrae a un componente más simple y la lógica del paginador se queda en un componente totalmente aislado y con una única responsabilidad.
Conclusión
Utilizar patrones de react nos ayuda a realizar menos código y crear una aplicación mucho más robusta y sencilla de entender.
Render props es un patrón muy poderoso y bastante simple de implementar, puede ser utilizado para manejar peticiones asíncronas o abstraer lógica como la del paginador.
