En el mundo del desarrollo de aplicaciones con React, los patrones de diseño juegan un papel crucial en la estructuración de nuestro código y la eficiencia de nuestros componentes. Entre ellos, las render props, los React Hooks y los High Order Components (HOC) se destacan por su utilidad y flexibilidad. Esta discusión se centra en comparar sus ventajas y desventajas en dos competencias clave: maquetación y compartición de lógica entre componentes. Acompáñame en este análisis donde exploraremos cuál de estos métodos se adapta mejor a nuestras necesidades y cómo pueden influir en la calidad de nuestro trabajo.
¿Qué ventajas ofrecen las render props en la maquetación?
Las render props o render functions se presentan como uno de los participantes en la competencia de maquetación. Con ellas, las validaciones y componentes que anteriormente se colocaban juntos, ahora se separan, permitiendo una organización más clara. Las render props exigen pasar las validaciones al componente principal como el to-do list y simplemente se envían los componentes a sus respectivas render props para que funcionen adecuadamente.
Orden y claridad al separar lógica y presentación.
Mayor elegancia en el código al reducir la repetición.
¿Cuáles son las implicaciones de usar React Hooks para la maquetación?
Al trabajar con React Hooks, se nos provee de propiedades y actualizadores de estado directamente en nuestro componente, los cuales pueden utilizarse en el retorno para realizar validaciones y controlar la renderización. Aunque comúnmente usados y efectivos, al compararlos con las render props, podrían parecer menos ordenados por mantener lógica y presentación más entrelazadas.
Simplificación al mantener estado y lógica en el mismo lugar.
Riesgo de código menos organizado si no se gestionan apropiadamente.
¿Cómo afectan las render functions al compartir información?
En la competencia de compartir datos, las render functions nos permiten pasar información esencial a través de parámetros, pero cuando un componente requiere datos de diferentes render functions, el código puede volverse complejo y confuso.
Facilita compartir información específica entre componentes.
Potencial para generar código desordenado con el uso excesivo.
¿Por qué se restan puntos a los High Order Components por escalabilidad?
Los HOC son funciones que retornan componentes de React y son fáciles de usar envolviendo nuestros componentes originales. Sin embargo, similar a las render functions, la acumulación de múltiples HOCs puede llevar a un código horizontal complejo, lo cual nos recuerda a los inconvenientes de los callbacks en el pasado.
Inyectan información de forma sencilla a los componentes envueltos.
Problemas de escalabilidad si se requiere la combinación de múltiples HOCs.
¿Cómo destacan los React Hooks en la competencia de lógica compartida?
Los React Hooks han transformado la manera en que compartimos información entre componentes, permitiendo llamadas sencillas a Hooks oficiales o personalizados (Custom Hooks) y consumiendo la información necesaria para la presentación en el componente. A diferencia de las opciones previas, el uso de múltiples React Hooks mantiene el código vertical y ordenado, facilitando su lectura y gestión.
Simplificación y orden al compartir datos.
Verticalidad del código que favorece la comprensibilidad.
¿Qué papel juega el concepto funcional del curing en el uso de HOC?
Como un bonus, el curing o currying, junto a la función compose, permite integrar diferentes HOCs de una manera más estructurada y vertical, lo que puede ser de gran ayuda. Sin embargo, emplear este método añade una capa de complejidad que puede ser evitada con el uso de Custom Hooks.
Fusionar HOCs para un código más vertical y organizado.
Aumento de complejidad en comparación con Custom Hooks.
En definitiva, seleccionar el patrón adecuado para la maquetación y compartición de lógica depende en gran medida de las preferencias personales y los requerimientos específicos del proyecto. Animamos a los desarrolladores a experimentar con cada uno de estos patrones y elegir aquel que mejor se adapte a su estilo de trabajo. Recuerda, la práctica constante y una buena comprensión de cada patrón harán que tu código sea más estructural y tu aplicación más robusta. ¡Sigue aprendiendo y mejorando tus habilidades en React! Y no olvides, en la siguiente clase nos sumergiremos en la sencillez de convertir un Hook en un Custom Hook.
17.-Render props vs. High Order Components vs. React Hooks
--
Maquetación
Render props o render functions vs React hooks
Ambas son formas correctas de trabajar y comunes.
Las render props suben el nivel de elegancia del código pero también pueden bajar el nivel de código aburrido comparado con los react hooks.
Si practicamos mucho podremos usar las render props de manera mucho más saludable para los componentes más estructuralmente importantes de nuestras apps. Nos ayudan a proteger nuestros componentes para que no nos equivoquemos y la maquetación sea correcta.
--
Share data, compartir información entre componentes.
Aquí participan todos los patrones.
--
Render Functions:
Compartir info con funciones que en sus parámetros nos dejan esa info que necesitamos que nos compartieran.
Si necesitamos demasiada info de distintas render functions para un mismo componente deja de verse bien y podría llegar al código spaghetti.
--
HOC:
Funciones que pueden retornar y retornar y retornar otras funciones hasta que en algún momento retornemos un componente de react y podamos pasarle toda la info.
Usarlos es sencillo, envolvemos nuestros componentes en estos HOC y automáticamente van a recibir toda la info que nos querían compartir estos HOC.
Si necesitamos la info de muchos HOC'S en un mismo componente tenemos el mismo problema que con las render functions. Código muy horizontal.
--
React hooks
Llamamos al react hook (oficial o custom) y luego consumimos la info en el return del componente.
Cuando tenemos muchos llamados a distintos react hooks no hay código horizontal.
Ganaron los hooks para compartir info entre varios componentes. 🎉
🛠 los hooks me parece la mejor opcion a la hora de compartir props o estados, pero los Hocs son importante a la hora de intergrarle una funcionalidad extra a un componente comom una api.
Do React Hooks Replace Higher Order Components (HOCs)?
--
--
En este articulo toca el tema de los hooks vs los HOC, estableciendo en que casos de uso es mejor usar cada uno. Me ayudó a concretar más este tema de cuál sería mejor usar en algunas cosas, pero como siempre, con la práctica me irá quedando más claro.
Por alguna razón el link no me redirecciona a la página. Aquí dejo el link por si les interesa. : )
Muchas gracias a los 2
🆚 Render props vs. High Order Components vs. React Hooks
Apuntes
Maquetación: Render Props vs Custom Hooks
React Hooks
Nos proveen información que va actualizándose
Las verificaciones de datos y componentes deben estar en un mismo lugar
Render Props
Las validaciones pasan a ser parte del componente TodoList y solo enviamos los componentes respectivos
🔥 Render Props 🔥 Suben el nivel de elegancia y bajan el código aburrido a comparación de los custom hooks, pero se puede volver algo saludable para los componentes más estructurales de nuestras aplicaciones en caso de practicar bastante esta técnica.
Shared data
Que pasa si tenemos muchos lugares de donde se consume la información
Render Functions
Comparten información con los parámetros que reciben, pero si necesitamos información de distintos lugares para un componente, se convierte código espaguetti
Si quiero heredar props entre varios componentes descendientes que perteneces a la misma ruta, uso composición de funciones, si es una prop que se utilizara en otras rutas y mi aplicacion usa redux, pues entonces uso redux para las actualizaciones automaticas.
Si quiero elegir donde y que renderizar, elijo render props o render functions con su Children y cloneElement.
Si quiero heredar solo lógica uso cumtom hooks y si quiero lógica y algo de estilos o etiquetas, uso hoc.
se llama Riu y es el Hadouken
es que tu eres muy niño aun para conocerlo
![](
Me encanto la forma de esta clase y con el "mucha suerte a todos", me hiciste reir un rato XD
Custom Hooks :)
hooks foreveeeeeeeeeeeeeeerrrrr
Hooks 💚
Los Hooks son la mejor opción por legibilidad del codigo. Sin embargo, puede generar problemas en el render si no tenemos cuidad.
Hasta ahora me siento mas comodo con los React Hook :). Espero igual con mucha practica dominar los Render props y HOC
Una ventaja de los High Order Components es que : facilitan la inyección de props a nuestros componentes.
f(g(x) es una composición, también se pude encontrar como fog "f bolita g" y leer como f compuesta de de g.
Aquí me perdí un poco. :C Perdón lo bruto. La composición de componenetes sería enfocada hacia los Hooks si ?
Los 3 métodos nos ayudan a hacer composición de componentes. Y de los 3 mi método favorito son los React Hooks. :D
Programando una app real se suele empezar por alguno de estos patrones ó sólo se crea una composición de componentes entre manejo de datos y vista y si luego se necesita compartir lógica si se implementaría uno de estos patrones?
En mi experiencia, empezar de una vez con composición ayuda mucho. En vez de ir despacito creando cada uno de los componentes, puedes construir casi todo el layout general directamente desde el componente app y luego de eso empezar a abstraer cada distinta parte en sus respectivos componentes propios.
Me parece importante conocer todas las maneras de trabajar, ya que no sabemos cuando nos puede tocar. A mi parecer, me parece más sencillo trabajar con los Custom Hooks. Los demás me parecen un poco enredados, sobre todo los HOCs.
Mi podio es:
Custom Hooks
Render props
HOCs
Render props vs. High Order Components vs. React Hooks
.
Vamos a analizar los patrones de render que hemos estudiado según 2 aspectos Maquetación y Compartir lógica entre componentes.
.
Maquetación
.
Empezamos analizando las Render props o Render functions contra los React hooks.
.
Al utilizar React hooks, estos nos proveen propiedades, información y actualizadores para que luego en el return de nuestros componentes podamos validaciones y renderizar o no ciertos componentes.
.
const{ error, loading, todos }=customHook();return{<TodoList>{ error &&<TodosError/>} ...
</TodoList>};
.
Pero cuando aplicamos Render props dejamos de tener las validaciones y los componentes en el mismo lugar. Es decir, pasamos las validaciones al componente en cuestión, y simplemente debemos de enviar nuestros componentes a sus render props correspondientes.
.
.
Ambas son formas muy correctas y comunes de trabajar, pero las render props son mucho más cómodas y ordenadas. Sin embargo, bajan nuestro nivel de código aburrido a cambio de código más elegante.
.
Con mucha práctica se puede llegar a utilizar las render props de manera mucho más saludable y esto puede ayudarnos a proteger nuestros componentes para que no nos equivoquemos y nuestra maquetación siempre sea correcta.
.
Share data
.
Empezando por las Render functions, estas nos permiten compartir información con funciones que en sus parámetros nos dejan esa información que necesitábamos que nos compartieran.
.
.
Pero si necesitamos demasiada información de distintas render functions para un mismo componente ya no es adecuado y tendríamos código espagueti. Así que tiene poca escalabilidad.
.
.
El siguiente participante son los High Order Components, son funciones que devuelven otras funciones de esa manera sucesivamente hasta retornar un componente de React al que podamos pasarle toda nuestra información.
.
functionTodoBox(props){return(<p> Tu nombre es {props.data.name}</p>)}constTodoBoxWithApi=withApi(TodoBox);
.
Sin embargo, si necesitamos la información de muchos hooks en un mismo componente entonces se tiene el mismo problema de antes, código muy horizontal lo que significa que no es escalable.
.
.
Si tenemos muchos llamados a distintos react hooks nuestro código sigue siendo extremadamente vertical y fácil de leer sin importar de cuantos react hooks estemos llamando.
.
.
Por eso mismo el claro ganador son los Custom hooks para compartir información entre varios componentes en lugar de usar render function o high order components.
.
.
El Currying y las High Order Functions son un concepto que se aprende cuando estudiamos programación funcional. Dicho eso, debería ser conocida la función compose que nos ayuda a fusionar todas nuestras HOCs para que podamos utilizarlos de una forma más vertical.
.
Solo se necesita construir nuestra propia función compose o utilizar la función compose de alguna librería como recompose por ejemplo.
.
Por estos motivos los HOCs van a quedarse en segundo lugar para esta competencia, no llegando al primero porque utilizarlos de la mejor manera sigue requieriendo un grado extra de complejidad comparado a los custom hooks.
