¿Qué son las render props?

Son un patrón de diseño de React que nos permite reutilizar código entre componentes e inyectar información en el renderizado de los componentes.

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

En este caso, el componente DataProvider recibe una función render como prop. Ahí le indicamos qué es lo que debe renderizar usando la información que recibe como parámetro.

La implementación del DataProvider con funciones podría ser la siguiente:

function DataProvider({ render }) {
  const data = { target: 'world' }
  return render(data)
}

También se puede encontrar este patrón usando la prop children en los componentes.

<DataProvider>
  {data => (
    <h1>Hello {data.target}</h1>
  )}
</DataProvider>

Y la implementación sería similar:

function DataProvider({ children }) {
  const data = { target: 'world' }
  return children(data)
}

Este patrón es usado por grandes bibliotecas como react-router, formik o react-motion.