Render Props

— what, how, why, and when we should use it?

Leanne Zhang
Sep 4, 2018 · 3 min read

1) What is a render prop?

“render prop” is a design pattern. It simply means that the component has a render prop that takes in a function as a value, and the component uses that function to render whatever the function provides.

Chances are you already have used render props without knowing it. Considering React-router library, <Route /> holds the behavior of navigating to different pages. It renders the component when the path matches.

As you can see in this example, <Route /> takes in a function which renders the Page component.

Note: you can use any prop name other than “render” to takes in a function.

2) Why is it useful?

This pattern is very useful when we want to share the same behavior among different components minimizing code repetitions.

3) How does it work?

I’m going to write a simple example using local states, then rewrite it using renderProp so you can see clearly the benefits of using render props.

Let’s first see how you can implement a ToDoList with local React states.

Here, you have 2 states:

  • tasks: holds a list of tasks
  • newTask: hold a task description

Event handlers which can add, change, and mark task as completed:

  • handleChangeTask
  • handleClickAdd
  • handleClickDone

View full code here

What if we have other components that need the same behavior like to add, delete, and change item in a list?

This is where render prop comes in handy.

To reuse the logic in the ToDoList, let’s rename ToDoList to ListManipulator. ListManipulator only holds the behavior to add, delete, and change item; we decouple the UI from the states making the ListManipulator component reusable.

ListManipulator.jsx

Then, we use this.props.render to dynamically determine what to render. For example, this.props.render can render a shopping list, a goal list, or any kind of component that may need to add, delete, or change an item from a list.

App.jsx

→ See the full working code on my codesandbox.


4) When should we use Render Prop? How is it different from Redux pattern?

Redux holds our states in one place, which makes reading and updating global states predictable. It is an additional library that we will need to import.

However, render prop reads and updates with React local states. If you want to reuse component logic and separate UI from the states, consider using a render prop. For example, building a custom reusable library.

Here are some example of libraries which use render props from Jared Palmer! Go poke around and have fun with them.

https://github.com/jaredpalmer/awesome-react-render-props

I’m curious how you use render props. :) I would love to hear your feedback.

Leanne Zhang

Written by

Software Engineer in San Francisco | Writer and Learner | twitter: @liyangz