Render props are still useful

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 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:

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.

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:

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 on August 28, 2019.