Comparativa de Patrones: Render Props vs React Hooks

Curso de React.js: Patrones de Render y Composición

Contenido del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

19
Patrones de Render en React.js: Principios y Técnicas Avanzadas
01:44 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:45

Comparativa de Patrones: Render Props vs React Hooks

Curso de React.js: Patrones de Render y Composición

Clase 17 de 19

Clase 17 / 19

Comentarios (32)32 comentarios

Juan Pablo Jimenez

Victor Marquez

Juan Pablo Jimenez

Alan Cabrera

Max Andy Diaz Neyra

Fernando Quinteros Gutierrez

Hace 5 años

Miguel Angel Reyes Moreno

Mario Arango

Gilbert Ardila

Max Andy Diaz Neyra

CHRISTIAN OLIVER SOLANO NUÑEZ

Hace 4 años

Juan Castro

Profesor

Luciano Cavallo

Beto Martinez

Douglas Ontiveros

Ponciano Guevara Lozano

Hace 5 años

Juan Pablo Bahos

Hace 4 años

Luis Alejandro Vera Hernandez

Hace 5 años

Luis Alejandro Vera Hernandez

Hace 5 años

Arturo Juárez Sánchez

Hace 5 años

Julian Franco

Hace 4 años

Juan Castro

Profesor

Hace 4 años

Sebastian Marín Arias

Hace 5 años

Juan Castro

Profesor

Hace 5 años

Daniel Morales

Hace 3 años

Harold Zurita Simon

Hace 3 años

Recursos

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

<Componente1>
	{props1 => (
		<Componente2>
			{props2 => (
				<Componente3>
					{props3 => (
						{/* ... */}
					)}
				</Componente3>
			)}
		</Componente2>
	)}
</Componente1>

HOC

Si necesitamos la misma información puede ser demasiado largo

const TodoBoxWithEverything = withApi(
	withSomething1(
		withSomething2(
			withSomething3(
				withSomething4(
					withSomething5(
						TodoBox
					)
				)
			)
		)
	)
);

Hooks

Es sencillo de leer

const [whatever1, setWhatever1] = useState();
const [whatever2, setWhatever2] = useState();
const [whatever3, setWhatever3] = useState();
const [whatever4, setWhatever4] = useState();
const [whatever5, setWhatever5] = useState();

return (
	<Componente {...todosLosWhatevers} />
);

🔥 Hooks 🔥

Pero en segundo lugar queda HOC debido a que se puede mejorar la legibilidad con la función compose

const TodoBoxWithEverything = compose(
withApi,
withSomething1,
withSomething2,
withSomething3,
withSomething4,
withSomething5,
)(TodoBox);

En resumen ... los hooks siguen ganando ⚓.

En mi caso,

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 ![](

Legendario meme

Mira: https://twitter.com/dan_abramov/status/1563307506482696192

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. .

<TodoList
	error={error}
	...
	onError={() => <TodosError />}
	...
/>

. 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. .

<Consumer1>
	{props1 => (
		<Componente1 {...props1} />
	)}
</Consumer1>

. 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. .

function withApi(WrappedComponent) {
	const apiData = fetchApi("https://api.com");
	
	return function WrappedComponentWithApi(props) {
		if(apiData.loading) return <p>Loading</p>;
		return (
			<WrappedComponent data={apiData.json} />
		);
	}
}

function TodoBox(props) {
	return (
		<p>
			Tu nombre es {props.data.name}
		</p>
	)
}

const TodoBoxWithApi = 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. .

const TodoBoxWithEverything = withApi(
	withSomething1(
		withSomething2(
			withSomething3(
				withSomething4(
					withSomething5(
						TodoBox // ¡Por fin!
					)
				)
			)
		)
	)
);

. Finalmente llega el turno de los React hooks, solo lo llamamos y luego consumimos la información en el return de nuestro componente. .

const [whatever1, setWathever1] = React.useState();

return (
	<Componente
		whatever1={whatever1}
		setWathever1={setWathever1}
	/>
);

. 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. .

const [whatever1, setWathever1] = React.useState();
const [whatever2, setWathever2] = React.useState();
const [whatever3, setWathever3] = React.useState();
const [whatever4, setWathever4] = React.useState();
const [whatever5, setWathever5] = React.useState();

return (
	<Componente {...todosLosWhatevers} />
);

. 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. .

const TodoBoxWithEverything = compose(
	withApi,
	withSomething1,
	withSomething2,
	withSomething3,
	withSomething4,
	withSomething5,
	withSomething6,
)(TodoBox);

. 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.

Introducción

Patrones de Render en ReactJS: Mejora tu Código y Organización

Principios de Diseño de React: Filosofía y Aplicación Práctica

Composición de componentes

Composición de Componentes en React: Principios y Prácticas

Composición y Colocación de Estado en React con Patrones de Renderización

Optimización de Composición de Componentes en React

Composición Saludable con React Context en Aplicaciones React

Eliminación de React Context mediante Custom Hooks en React

Render props

Render Props y Render Functions en React: Patrones Avanzados

Render Props en React: Mejora de Componentes con Ejemplo de To-Do List

Validación y optimización de Render Props y Render Functions en React

Uso de React.Children y React.CloneElement para Composición Avanzada

High Order Components

Funciones y Componentes de Orden Superior en JavaScript y React

Práctica de High-Order Components en React

Sincronización de Cambios en React con StorageListener

Sincronización de Estados en React con Local Storage

Sincronización y validación de to-do list con local storage

React Hooks

Comparativa de Patrones: Render Props vs React Hooks

Conversión de HighOrder Components a Custom Hooks en ReactJS

Próximos pasos

Patrones de Render en React.js: Principios y Técnicas Avanzadas

Comparativa de Patrones: Render Props vs React Hooks

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos