Render props are still useful
Tags: react
Published: 2019-08-29 03:27:02

---
title: Render props are still useful
published: true
description: The render props pattern has been a popular way to share logic between components. Since React 16.8 custom hooks are a more elegant way of sharing logic between components. So, no need for render props now then? No! Render props are still useful for building reusable components ...
tags: #react
canonical_url: https://www.carlrippon.com/render-props-are-still-useful/
---

The render props pattern has been a popular way to share logic between components. Since React 16.8 [custom hooks](https://reactjs.org/docs/hooks-intro.html) are a more elegant way of sharing logic between components. So, no need for render props now then? No! Render props are still useful for building reusable components ...

## What is a render prop?

A render prop is a prop that is a function that renders something – i.e. a function that returns JSX:

{% gist https://gist.github.com/carlrip/f8dc817e04c25317383a6c2a1a608b77 %}

They can be used to delegate the rendering of bits of a component to the consumer of the component. This can make a component very flexible and highly reusable.

## Every component already has a render prop!

Every React component has a `children` prop:

{% gist https://gist.github.com/carlrip/73468c1abd49794402bd1beccd95ee47 %}

This is a render prop! In the above example the `children` prop allows the consumer of the component to render the content of the card.

{% gist https://gist.github.com/carlrip/e05033f7d36a3e988bc93bf1d460f824 %}

Above is an example of consuming the `Card` component. The paragraph and button elements nested inside `Card` are picked up as the `children` prop and rendered inside the card div:

![Card](https://www.carlrippon.com/wp-content/uploads/2019/08/Screenshot-2019-08-25-at-05.48.19.png)

## Creating a render prop

We can create our own render prop:

{% gist https://gist.github.com/carlrip/2122cdb6c02b2f67c714d4ad6da4f4e1 %}

We have extended the `Card` component to have a header. The consumer can override default appearance using the `renderHeader` render prop:

{% gist https://gist.github.com/carlrip/3a7987fe6f461150b580044650d362ea %}

Above is an example of consuming the `Card` component supplying the header using the `renderHeader` prop. We simply assign the `renderHeader` prop to an inline arrow function that returns a `h3` containing our title.

![Card with custom header](https://www.carlrippon.com/wp-content/uploads/2019/08/Screenshot-2019-08-25-at-06.05.18.png)

We are now starting to understand the power of render props and how it makes a component super flexible and reusable.

## Reusable list

A common use case for render props are list components:

{% gist https://gist.github.com/carlrip/b21b4a05c5b4a6ea08ab45c721b0fcc7 %}

Above is a simple `List` component that has render props for the list header and list items. Notice that `renderItem` has a parameter for the data item to be used when rendering the item.

{% gist https://gist.github.com/carlrip/343c108a1ec3c3a93ccf232e5a8e2846 %} 

Above is an example of consuming the `List` component. We render the list header using a `h3` using the `renderHeader` prop. We render each data item in a `span` with a *Click me* button alongside it using the `renderItem` prop. Below is the result:

![List](https://www.carlrippon.com/wp-content/uploads/2019/08/Screenshot-2019-08-25-at-06.15.55.png)

Nice!

## Wrap up

Render props are still really useful when we are creating highly reusable components that allow the consumer to render custom elements.

Every React component automatically has a `children` prop for allowing the consumer to render a single bit of the component.

We can create our own render props in a component where we want to allow the consumer to render different bits of a component.

Render props can take in parameters which is useful when the render prop is being used to render a collection of data items.

*Originally published at [https://www.carlrippon.com/render-props-are-still-useful](https://www.carlrippon.com/render-props-are-still-useful/) on August 28, 2019.*