React Render Props — An In-depth Walkthrough

Image for post
Image for post
Photo by Monika Grabkowska on Unsplash

If you’ve used React for a while, you might have heard about Render Props already. Similar to Higher Order Component, it provides a layer of indirection. The idea is to pass a function as a prop to a component, and the component that receives this prop will call the prop in its render method.

At a glance, this may seem confusing, so I’m going to show you a step by step walkthrough from a simplest normal props with a static value to render props.

Step 1. pass in normal props
A Data component that has an render prop, and when this props get called, it just console log the prop value

<Data render='data' />

Step 2. replace the normal prop of static value with a simple function
Now we replace the render='data' with a function render={() => 'data'} And when it’s get rendered this function gets called when we call the prop. And we get the same result.

<Data render={() => 'data'} />

Step 3. upgrade the simple function to receive argument
Here we let the simple function render={() => 'data'} to receive an argument. So now when we call the props in the render method, we also pass in an argument ( true ) .

<Data render={(isLoaded) => isLoaded === true ? 'data' : null} /> 

Step 4. pass state as argument to the function props and call it in component’s render method

Now replace the functional with a class component, now we have a render method if Data component that will call the render props and pass in its isLoaded state as an argument; the render props then get passed in a function that will render a HTML based on the boolean value of the passed-in argument.

<Data render={
(isLoaded) =>
<div> {isLoaded === true ? ‘data’ : null} <div>
} />

Step 5. change the passed in function to a component

Now we are pretty close to the final step. What we will do now is to change the <div> {isLoaded===true ? “data" : null} </div> from a simple HTML to a proper component. So you will see this component will receive the isLoaded status from the Data component.

class Data extends React.Component (props) {
state = { isLoaded: true }
{this.props.render(this.state.isLoaded)} // data

Note that class component Data is not absolutely necessary. We can of course change it to a functional component with a useState hook

const Data = (props) => {
const {render} = props
const [isLoaded, setIsLoaded]= React.useState(true)

Also note that you don’t necessarily need to use the “render” props. In fact, you can use any props as you wish. It’s just a convention that is good to follow to use “render”.

class Data extends React.Component (props) {
state = { isLoaded: true }
{this.props.callItAnything(this.state.isLoaded)} // data

That’s a little piece about render props pattern. Enjoy :).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store