How to use Render Props in React?

Reusable components are important for building a good application. No one wants to write and maintain repetitive logic. Render Props in React help make your components reusable.

To use render props in react, we can go with both functional component and class components. Render props use React props and the render callback function. As such, we don’t need to install any additional packages or import libraries to work with render props.

1 – What is Render Props in React?

Render Props in React is a technique to make reusable components. This allows for sharing of code between components. To share the code, we use props having a function as value. This is the reason why we call such as props as render props. Render props are simply props of a component where we can pass functions. These functions return elements which will be used to render the components.

In this way, render props is basically a pattern for designing your React components. We don’t need any additional packages or libraries to support the feature of render props.

React also uses render props. For example, the popular React router library uses render props internally.

2 – How does Render Props in React work?

Renders props in React work by passing a function inside the props of a component. The component that accepts the render prop returns the invoked function that renders the actual component.

To better understand, let us look at examples of render props in different use-cases.

2.1 – Simple React Render Prop Example

Consider that we have a Heading component.

const Heading = props => props.render();

The Heading component does not do anything except for rendering the value that we pass. We use the render prop pattern to achieve the same. When using the Heading component, we pass the value that we want this component to render.

function App () {
  return (
    <div>
       <Heading render={() => <h1>I am the 1st Render Prop</h1>} />
       <Heading render={() => <h2>I am the 2nd Render Prop</h2>} />
       <Heading render={() => <h3>I am the 3rd Render Prop</h3>} />
    </div>
  )
}

Basically, for every use of the Heading component, we pass a prop named render. The prop is nothing but a function that returns a React element. However, each time, we pass a different React element thereby reusing the Heading component.

2.2 – Render Prop Example with Different Prop Name

In our previous example, the render prop was named render. However, this is not necessary. Any prop that renders JSX is a render prop.

See below example where we create another component AlternateHeading.

const AlternateHeading = (props) => (
  <>
    {props.renderFirstSection()}
    {props.renderSecondSection()}
    {props.renderThirdSection()}
  </>
)

Here, we have three functions as part of the props. We wrap them within a React Fragment that acts like a common div without adding an additional node in the DOM.

We can now use the AlternateHeading component as below.

function App () {
  return (
    <div>
      <AlternateHeading
        renderFirstSection={()=><h1>I am the 1st section</h1>}
        renderSecondSection={()=><h2>I am the 2nd section</h2>}
        renderThirdSection={()=><h3>I am the 3rd section</h3>}/>
    </div>
  )
}

As you can see, the three functions render separate JSX. However, they are not named render.

2.3 – Render Props with State Example

The previous two examples of render props were quite simple. Let us now look at a slightly complex example with a component involving state.

Check out the below NameDisplay component.

class NameDisplay extends React.Component {
  state = { 
     name: 'Adam Warlock' 
  };
  render() {
    return this.props.render(this.state.name);
  }
}

This component has one state variable name. In its own render() function, it simply calls the render prop with the state variable as input.

We can now use this NameDisplay component as below.

function App () {
  return (
    <div>
      <NameDisplay render={name => <h2>Hi, {name}!</h2>} />
      <NameDisplay render={name => <h2>Bye, {name}!</h2>} />
    </div>
  )
}

We pass the React element as part of the render prop. Both the instances have slightly different JSX to demonstrate the concept of reusability.

3 – Should you use Render Props?

If you want to reuse component logic and share it between various components, then you should definitely look at render props in React. Example could be when you are trying to build a reusable library and you want the clients of the library to be able to use it based on their own requirements.

Render props also work similarly to Higher Order Components. In case you are not interested in HOC, you can instead use render props.

Conclusion

In this post, we have successfully learnt how to use Render Props in React. To facilitate our understanding, we looked at simple example and then examples with state and different prop names.

Want to learn more React concepts? Check out this post on React Context API.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.