Render Props y Render Functions en React: Patrones Avanzados

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

Contenido del curso

Introducción

Composición de componentes

Render props

8
Render Props y Render Functions en React: Patrones Avanzados
Viendo ahora
9
Render Props en React: Mejora de Componentes con Ejemplo de To-Do List
13:29 min
10
Validación y optimización de Render Props y Render Functions en React
12:40 min
11
Uso de React.Children y React.CloneElement para Composición Avanzada
12:05 min

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:006:50

Render Props y Render Functions en React: Patrones Avanzados

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

Clase 8 de 19

Clase 8 / 19

Recursos

¿Qué son las render props y funciones de renderizado?

Adentrémonos al mundo de las render props y las funciones de renderizado en React, dos patrones que nos permiten elevar la composición de nuestros componentes a nuevos niveles, haciendo que la experiencia de desarrollo sea más divertida y flexible. Estos patrones nos permiten especificar más detalladamente qué, cuándo y dónde renderizar contenido en nuestros componentes. Aunque ya hemos explorado el poder de los React Contexts con los componentes Provider y Consumer, las render props y funciones de renderizado nos brindan otra manera de gestionar información dentro de nuestra aplicación.

¿Cómo funcionan las render functions?

Las render functions son un poderoso patrón que nos permite entregar información de un componente a través de una función. Esto se logra proporcionando una función que retorna los componentes deseados con la información necesaria ya inyectada. Se trata de un enfoque muy valioso, pues nos permite crear componentes extremadamente flexibles sin tener que recurrir a prácticas más complejas como el uso intensivo de los contextos de React.

¿Qué diferencia hay entre render props y render functions?

La principal distinción entre las render props y las render functions radica en la ubicación y uso de la función dentro del componente. Con las render props, la función se pasa a través de una propiedad específica del componente, que podría llamarse de cualquier forma, como render, unicornio o patito. Esto otorga flexibilidad para crear propiedades dedicadas para diferentes funcionalidades, tal como:

Clases: Podríamos tener un componente que reciba una función de renderización en su propiedad classes para mostrar previews de diferentes clases.
Actividad Reciente: Otra render prop podría estar diseñada para recibir una lista de preguntas recientes o comentarios.
Videos y Comentarios: Un componente que use una render prop para cargar un video y otra para los comentarios relacionados.

¿Cómo aplicamos estos conceptos a un componente ToDolist?

Uno de los ejemplos destacados es el uso del patrón en un componente ToDolist. Este enfoque permite gestionar varios estados del componente de manera más granular:

Cargando: Renderizamos un estado de carga a través de la propiedad loading.
Error: Mostramos un mensaje de error con la propiedad onError.
Lista Vacía: Si no hay tareas, utilizamos onEmptyToDos para mostrar un mensaje específico.
Tareas Disponibles: Finalmente, si hay tareas, renderizamos su contenido con la propiedad render.

Ejemplos prácticos: Aplicaciones en proyectos

La verdadera magia de las render props y funciones de renderizado se despliega en situaciones prácticas:

Componente PlatziHome

Imagina que queremos crear un componente llamado PlatziHome para mostrar las últimas clases vistas por un estudiante y sus rutas de aprendizaje:

Render Prop Clases: Proporciona la última información de las clases vistas.
Render Prop Learning Paths: Permite visualizar las rutas de aprendizaje suscritas para mostrar previews dinámicos.

Componente de formulario con alertas

Otro reto es implementar un componente de formulario que use render props para manejar estados de error y éxito:

Error Alert: Una propiedad de renderización para mostrar una alerta roja en caso de error.
Success Alert: Otra propiedad que muestra una alerta verde si el formulario se envió con éxito.

Consideraciones finales y tu rol en esta aventura

Estas técnicas abren un abanico de posibilidades para organizar y renderizar datos en aplicaciones React. Sin embargo, la decisión de implementar render props o funciones de renderización depende enteramente de ti y de las necesidades específicas de tu proyecto. La próximidad clase nos ofrecerá la oportunidad de poner en práctica estos patrones y evaluar su utilidad en situaciones reales. ¡Nos vemos pronto para continuar creciendo juntos en el mundo del desarrollo React!

Christian Boffill

Hace 5 años

Antes de estudiar las render props debes conocer la composición de componentes. Las renders props vienen a ayudar a hacer una composición de componentes más limpia. Seguimos con todas las ventajas de usar composición de componentes. A partir de ahora podemos decir que tenemos 2 tipos de props: las props normales que reciben un valor o variable y por otro lado tenemos las props que contienen una función. Estas que contienen una función son las que nos interesan. Esta función devuelve un componente o un elemento que pudiera tener anidados más elementos y componentes. La sintaxis es la siguiente:

<MyHeader 
	render={ () => <myLogo type={ type } /> } 
/>

La propiedad render(la cual puede tener cualquier otro nombre) es nuestra render prop, porque contiene una función que al ser llamada devuelve un componente. Entonces cumple todas las condiciones y solo falta llamarla desde el componente que la contiene:

function MyHeader( props ){
	return (
	<header className="header__styles">
		{ props.render() }
	</header>
	)
}

Entonces podemos interpretar que las render props le dicen al componentes que renderizan(cual va a ser su contenido)

Otra forma de hacer esto es con las render functions y lo que cambia es que se declaran dentro del componente:

<MyHeader>
	{ () => <myLogo type={ type } /> } 
</MyHeader>

Y para acceder a lo que está dentro del componentes simplemente usamos props.children:

function MyHeader( props ){
	return (
	<header className="header__styles">
		{ props.children }
	</header>
	)
}

Es prácticamente lo que hicimos con la composición de componentes y la propiedad children. ¡Usen render props y mejoren sus composiciones amigos :) !

Luis Alejandro Vera Hernandez

Hace 5 años

Muy buena la explicacion! Gracias

César Palma

Hace 5 años

buena explicación y resumen

Comentarios (29)29 comentarios

Juan Pablo Jimenez

8.-Qué son las render props y render functions

-- Nos ayudan a elevar nuestra composición de componentes a otro nivel.

-- Las render props nos permiten ser más específicos sobre que vamos a renderizar, cuando y donde vamos a renderizar cada parte del contenido de nuestros componentes.

-- Render Function

-- Es el patrón de entregar la información de nuestro componente en una función. No es exclusivo de react context, nosotros podemos crear nuestros propios componentes que usen este patrón, que reciban una función para que le podamos enviar la información que queremos proveer y luego si, renderizar los componentes que ya tienen la info gracias a la función.

-- Render Props

-- Cuando ya no mandamos la función dentro del componente, si no que la enviamos en alguna otra propiedad del componente. Podemos jugar con este patrón para que compartir información sea más divertido.

Rubén Ernesto Aragón Gil

Hace 4 años

arres, gracias

Carlos Eduardo Bracho Ramírez

Voy a repasar esto muy bien para entenderlo.

¡andamos igual, pero vamooo!

Moisés Astudillo

¿Se podría decir que? Render functions: Funciones que retornan JSX. Render props: Props que contienen render functions

¿Esto es correcto?

Juan Castro

Profesor

No lo había pensado así, pero leyéndolo rápido podría decirte que sí :sweat_smile:

Pedro Moreno

Render Props

Documentación oficial: https://es.reactjs.org/docs/render-props.html

JULIO ROJAS

no se si soy el unico pero, casi no le entiendo a juan, me toca estar mirando videos en youtube para alimentar lo que dice

Julio, qué tema no te ha quedado del todo claro?

Roger Fernandes

Hola Juan, las clases donde solo hablas y enseñas imágenes con ejemplos son un coñazo🤦‍♂️, mola mucho más cuando escribes el código y explicas al mismo tiempo con los ejemplos se entiende mucho mejor 👍.

una render prop es una prop que recibe una función que un componente utiliza para saber qué renderizar.

React Doc o.O

Fernando Quinteros Gutierrez

🌦️ Render Props y Render Functions

Ideas/conceptos claves

Render Function El patrón de entregar la información en una función es lo que llamamos

Render Prop El patrón de enviar como propiedad una función

Apuntes

Son un patrón que nos ayudan a llevar la composición de componentes a un mayor nivel
Render Props nos dejan especificar:
- Que vamos a renderizar
- Cuando lo vamos a renderizar
- Donde lo vamos a renderizar

<Provider>
	<Consumer>
		{ something => (
				<TusComponentes
					{...something.xyz}
				/>
		)}
	</Consumer>
</Provider>

React context se puede utilizar a través de los componentes de Provider y Consumer
- Con el componente consumer podíamos recibir una función con todas las propiedades que habíamos guardado en el provider, el concepto de esta aplicación es **Render Function**
También podemos realizar el siguiente código la cual utiliza Render Props

<RenderProps
	renderProp={<OtroCompo />}
/>

<RenderProps
	renderProp={info => <OtroCompo {...info} />}
/>

Por ejemplo podríamos realizar la siguiente aplicación

<PlatziCourse
	classes={platziClass => (
		<PlatziClassPreview {...platziClass} />
	)}
	lastActivity={question => (
		<PlatziComment q={true} {...question} />
	)}
/>

Sebastian Moreno Olivera

Qué son las render props y render functions

. Los componentes provider y consumer: por dentro del componente consumer podemos recibir una función con todas las propiedades que habíamos guardado en el provider y que queríamos compartir en toda la aplicación ese patron de entregar la información de nuestro componente en una función, es lo que nosotros llamamos una render function.

<Provider value={...something}>
	<Consumer>
		{something => (
			<TusComponentes
				{...something.xyz}
			>	
		)}
	</Consumer>
</Provider>

Render props:

Cuando la función ya no la enviamos dentro del componente en su propiedad { children } sino que la enviamos en alguna otra propiedad del componente, puede ser cualquiera, se puede jugar mucho con ese patron para que compartir información y hacer composición de componentes sea mas divertido.

Ejemplo:

Darío Condori Humerez

En resumen Usamos render props cuando queremos dar la mayor libertad posible al consumidor de nuestro componente de definir qué es lo que va a renderear, sin atarlo necesariamente a un template específico. Existen varios componentes y librerías populares que hacen uso de este patrón, tales como Formik y Downshift, por nombrar algunos.

Luis Castro

cual es la diferencia de castear la informacion asi {data} de asi {...data}

Supongamos que data es un objeto así: const data = { prop1: 'a', prop2: 'b' };. En ese caso, hacer {data} se traduciría a { data: { prop1: 'a', prop2: 'b' } } y hacer {...data} se traduciría a { prop1: 'a', prop2: 'b' }. :wink:

Derek Samuel Paúl Peña

<PlatziClasses
	latestClasses = {(studentClasses) => (
		<LastClassContainer>
			{
				studentClasses.map((scItem) => (
					<LastClassItem {...scItem} />
				))
			}
		</LastClassContainer>
	)}
	rutasEscuelas = {
		(studentRutasEscuelas) => (
			<>
				{
				studentRutasEscuelas.map((rsItem) => (
						<RutaEscuelaItem {...rsItem} />
					))
				}
			</>
		)
	}	
/>

Samuel Miranda Martínez

Opino que con las render props se lee mucho mejor el código (con tal de que se manejen buenos nombres de las props).

Reinaldo Mendoza

Los nombres son claves

Gilbert Ardila

Bueno ya que hablas de formularios me surge una pregunta, el tema de la validación de campos ¿Cómo se usa en React? ¿se puede crear las validaciones dentro del mismo componente form y llamar un componente mensaje para informar del error o se generan las validaciones en una función y se llama esa función en cada input?¿ cómo crees que sería más profesional hacerlo?

Gilbert, tu pregunta es completamente válida, pero la respuesta es lo suficientemente compleja como para que se responda en un curso completo.

En resumen, la idea que propones es correcta, funcionaría perfectamente. Dentro de un futuro curso de formularios con react (a bastante profundidad) podríamos estudiar esta y otras estrategias (además de diferentes herramientas que tratan de resolver estos problemas). :D

uuy!!! espero con ansias ese curso y de paso aprovecho para decirte que me encantan tus cursos, estos dos de React me han parecido geniales, gracias por tu esfuerzo

yeferson soto

Hace 2 años

wtf class my head exploded too many slices that do not specify what it does I get lost between what it explains and the slice that shows this class should separate it into two classes

Xavier Flores

Hace 3 años

en términos sencillos desde mi punto de vista puedo indicar lo siguiente:

ver un componente como una variable, siendo mas precisos como una función, lo que realmente así lo es.
ver estos como pasajeros de primera clase; es decir que gozan de todos los beneficios y artificios q se pueden hacer con las funciones.
los componentes al ser funciones, podemos hacer uso de los clousures pero en este caso clousers de componentes.
ahora un componente goza de props que estos pueden ser enviados como propiedades o "parametros" o en su cuerpo como {children} como si fuera un simple "return"
pero estas props pueden ser componentes, por lo que estamos pasando componentes en componentes, en fin solo mirar como si fueran funciones y deja volar tu creatividad..

Gerardo Castillo

Esto es excelente! Muchas gracias... Adicionalmente, revisando la documentación render props oficial hay un ejemplo donde es siguiente código es equivalente... 🤯

<Mouse children={mouse => (
  <p>The mouse position is {mouse.x}, {mouse.y}</p>
)}/>

<Mouse>
  {mouse => (
    <p>The mouse position is {mouse.x}, {mouse.y}</p>
  )}
</Mouse>

Supongo que React hace su magia detrás del telón con JSX para convertir todo esto en el código que entrega al navegador...

Roberto Antonio Alferes Gomez

Beto Martinez

En cada render prop, cuando estemos devolviendo esa nueva función, tenemos que definir un componente especifico para esa parte de la maquetación y de esta manera evitar usar React Context. Simplemente recibimos esa función e inyectamos las propiedades al componente

Jeffrey Torres

Hace 10 meses

Jeffrey, la clase menciona que las render props permiten inyectar las propiedades a tus componentes sin necesidad de usar React Context o “cosas raras con las props”. El uso de useMemo es para optimizar el rendimiento y evitar re-renders innecesarios, no para el patrón de render props en sí, aunque puede ser útil en ciertos casos.

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

Render Props y Render Functions en React: Patrones Avanzados

Progreso del curso

Introducción

Composición de componentes

Render props

High Order Components

React Hooks

Próximos pasos

Recursos

Recursos