Entendiendo Render props en React

Osman Cea
4 min readAug 21, 2019

En este artículo entenderemos qué son y cómo funcionan las render props. En el próximo artículo construiremos un popover utilizando este patrón.

Render props es un patrón utilizado en React que consiste en delegar lo que un componente va a renderear a otro componente, la mayoría de la veces, a un padre en el árbol de componentes.

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

Un ejemplo (quizás poco práctico, pero ilustrativo) podría ser un componente que renderea una lista de definiciones a partir de un diccionario (un objeto común y corriente):

import React from 'react';const List = ({ data }) => {
return (
<ul>
{Object.entries(data).map(([ key, description ]) =>
<li key={key}>
<strong>{key}:</strong> {description}
</li>
)}
</ul>
);
};
export default List;

Y ocupamos nuestro componente de la siguiente forma:

import React, { useState } from 'react';
import List from…

--

--