Render Props  – An Advanced React Pattern

Render Props  – An Advanced React Pattern

Render Props  – An Advanced React Pattern 1920 1440 Gobinda Thakur

Being a programmer, you always need to find the easiest way to solve a problem – write succinct and reusable code that other developers can quickly grasp. Currently, UI libraries like react.js, vue.js etc. are very popular because one can write reusable code while solving complex UI problems. Development is fast and it makes life easy for everyone.

Design patterns are fairly common and popular. React also has its own set of patterns which aid in writing clean and robust code while keeping it maintainable. We will be exploring these patterns through a series of blogs.

First off, we will be starting with Render props which is one of hottest topics in react community. We will also be building an entire app to see Render Props in action. Happy reading!

react render props

What is render props?

As mentioned in the react docs:

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.

In simple words, render props are simply props of a component where you can pass functions. These functions need to return elements, which will be used in rendering the components.

Let’s understand render props in depth.

Render props look like this:

We are using the “Name” component where we can pass a prop called render. Here, render is a function and it receives an argument i.e. state “name”.

The babel version of JSX looks like this:


Have you checked the babel transpiled version of render props?

Let’s see how the “Name” component will look in Babel Repl:

As you can see, instead of passing down any value to the props i.e. render, we are passing a function here. So, when that function gets called we will get the <h2> element with the message “Hi, Dan Abramov!”.

As promised, we will now go ahead to an app applying what we have learnt about Render Props.

Sample App – Posts and Comments

In our sample app:

  1. We have posts with title, description and a link to get the comment for that blog.
  2. By clicking on “View Comment”, we will get the comments section.

1. Building the app without Render Props

The code for the app would look something like this:

Pro Tip – We have taken help of JSONPlaceholder for fake rest API call. You can use it for testing and prototyping. Do check it out!

There are 2 files that we need to look at:

  1. Post.js
  2. Comment.js

Observe that we have a lot of duplicate code like state object, componentDidMount() and getData(). These objects and methods are doing almost the same thing in <Post/> and <Comment/> components. This clearly goes against the DRY principle. Instead, we can write common code which can be shared by both <Post/> and <Comment/> by creating a new component.

2. Creating a new component “Wrapper”

As you can see, we have extracted state object, getData() and componentDidMount() from both the components and put it in the Wrapper component. Inside the render of Wrapper component we are calling this.props.render() with an argument state and returning it.

Now, let’s see the render method of Post and Comment components.

3. Posts & Comments – Render Method

In the Wrapper component, we are passing props called “render”. It catches the state arguments and returns an element in which values of these arguments are used.

4. Sample App with Render Props

Finally, here is the complete solution using render props:

Conclusion

We saw how Render Props helped us avoid duplicate code and create a more robust app. Clearly, there is merit in applying Render Props to your next app. React’s latest context API uses render props. Even Apollo client uses it. Developers are increasingly accepting render props and all we are saying is you should definitely give it a try!

Gobinda Thakur

Fullstack web developer