Render Props

[React Design Patterns]

A render prop is a prop which is a function outputting a React component. It’s a similar way of inverting dependency, much like [Higher Order Components] without the prop shadowing caveat

Example:

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

// DataProvider
const DataProvider = ({ render }) => {
    const data = fetchData();

    return (
        <div>
            {render(data)}
        </div>
    );
}

Caveats are that when using React.PureComponent, shallow prop comparison will always return false on rerender for the render prop check.