Render Props

Render Props, similar to HOCs, is another React pattern intended to share reusable functionality. The core of the pattern is to pass a render function as a prop to the component containing the reusable logic.

The basic structure looks like this:

function RenderPropComponent({ render }) {
	// ...perform some common functionality
	return (
		<div>
			{render()}
		</div>
	)
}

function App() {
	return (
		<RenderPropComponent
			render={() => (
				<Component />
			)}
		/>
	)
}

Here's an example using render props:

function FetchData({render, url}) {
	const { data } = fetchData(url);
	return render(data);
}

function App() {
	return (
		<FetchData
			url={"/get_data"}
			render={(data) => {
				return <Component data={data} />
			}}
		/>
	);
}

Since the introduction of Hooks, more and more render props are written as React Hooks and seems to be the industry's preferred way of encapsulating functionality now.