React Render props

Que son las render props en React?

Las render props son un tcnica que nos permiten compartir cdigo en React al hacer uso de un propiedad que tiene como valor una funcin.

Un componente con una render prop recibe una funcin que retorna un elemento react.

<Data render={(user) => <UserData user={user} />} />

En React podramos decir que hay varias maneras de compartir cdigo entre componentes, siendo estos componentes los elementos principales de reutilizacin de cdigo en React.

Tambin es cierto que no siempre tenemos claro como podramos compartir estados, comportamientos, que un componente encapsula, con otros componentes que necesiten esos datos.

Digamos que tenemos un componente que simplemente encapsula los datos de un usuario.

function UserData() {  const user = {    name: "Alfredo",    lastName: "Moscoso",    rol: "Frontend Developer",  };  return (    //user...  );}

Ahora supongamos que queremos mostrar estos datos como una table.

Aqu nos preguntamos, Como podramos compartir esos datos con otros componentes?

Creamos un componente que renderice un table y acepte un prop user.

function Table({ user }) {  return (    <div>      <table>        <thead>          <tr>            <th>Name</th>            <th>Lastname</th>            <th>Rol</th>          </tr>        </thead>        <tbody>          <tr>            <td>{user.name}</td>            <td>{user.lastName}</td>            <td>{user.rol}</td>          </tr>        </tbody>      </table>    </div>  );}

Refactorizamos nuestro componente <UserData /> para que renderice el componente <Table />.

function UserData() {  const user = {    name: "Alfredo",    lastName: "Moscoso",    rol: "Frontend Developer",  };  return (    <Table user={user}/>  );}

Pero ahora tambin queremos mostrar esos datos mediante un componente <Card /> en otro lugar de nuestra App, entonces podramos pasar esos datos a <Card user={user} />

Tendramos que crear por ejemplo otro componente UserDataCard, para mostrar una salida diferente o transmitir los datos desde un contexto global.

function UserDataCard() {  const user = {    name: "Alfredo",    lastName: "Moscoso",    rol: "Frontend Developer",  };  return (    <Card user={user}/>  );}

Esto funciona pero el objetivo de encapsular datos, hacerlos portables y reutilizables no se ha logrado.

En este caso podemos recurrir al uso de render props, ya que esta tcnica nos permite encapsular y hacer portables datos o comportamientos que queramos compartir entre componentes.

En el componente <UserData /> encapsularamos nuestros datos y le proporcionaramos una funcin por medio de props para que determine que renderizar de forma dinmica.

function UserData({ render }) {  const user = {    name: "Alfredo",    lastName: "Moscoso",    rol: "Frontend Developer",  };  return (    <div>      <h1>User Data</h1>      //renderiza una salida dinmicamente       {render(user)}    </div>  );}

En algn lugar de nuestra App donde necesitemos mostrar esos datos como un table llamaramos a nuestro componente de la siguiente manera:

<UserData render={(user) => <Table user={user} />} />

O si necesitamos renderizar una <Card> ...

<UserData render={(user) => <Card user={user} />} />

Como puedes ver, esta tcnica hace a nuestros componentes muy porttiles y reutilizables.

Recuerda que esta es otra tcnica mas que podemos usar en React, y tal vez no se adapte a tus requerimientos al desarrollar una aplicacin o una web, pero es importante conocer diferentes patrones que nos ayuden a decidir cual es el mejor para nuestro caso de uso.

Tu feedback es de ayuda para mi

Conectemos
https://twitter.com/JairDevep
https://www.linkedin.com/in/alfredomoscosofrontend/

Nos vemos pronto!