React Render props

¿Que son las render props en React?

Las render props son un técnica que nos permiten compartir código en React al hacer uso de un propiedad que tiene como valor una función.

Un componente con una render prop recibe una función que retorna un elemento react.

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

En React podríamos decir que hay varias maneras de compartir código entre componentes, siendo estos componentes los elementos principales de reutilización de código en React.

También es cierto que no siempre tenemos claro como podríamos 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 podríamos 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 también queremos mostrar esos datos mediante un componente <Card /> en otro lugar de nuestra App, entonces podríamos pasar esos datos a <Card user={user} />

Tendríamos 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 técnica nos permite encapsular y hacer portables datos o comportamientos que queramos compartir entre componentes.

En el componente <UserData /> encapsularíamos nuestros datos y le proporcionaríamos una función por medio de props para que determine que renderizar de forma dinámica.

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

En algún lugar de nuestra App donde necesitemos mostrar esos datos como un table llamaríamos 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 técnica hace a nuestros componentes muy portátiles y reutilizables.

Recuerda que esta es otra técnica mas que podemos usar en React, y tal vez no se adapte a tus requerimientos al desarrollar una aplicación 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/alfredo-moscoso-desarrollador-frontend/

¡Nos vemos pronto! 👊