チャットボットによる会話広告『fanp』を開発する株式会社ZEALSのテックブログです。技術やエンジニア文化について情報を発信します。

Hi everyone, my name is Javen and I'm a front end engineer at ZEALS.
Today I'm gonna teach you about Render Props!!

What are Render Props?

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

Render Props is a React pattern that has gained a lot of attention over the past year or so. Many React engineers have gone through debates on whether High Order Components (HoC) or Render Props are better for their applications. When all is said and done, both patterns are great but each have their own pros and cons. However, today I'm going to discuss Render Props!

As you can see in this component, "MyRenderProp", there is a "render" prop that is getting passed down. In this prop, there is a function that returns an <h1> element which renders out "data". "data" is a parameter that gets passed to that function. This is the basic gist of a Render Prop component.

When to use Render Props

It's really hard to know when to use a specific React pattern. It usually takes some experience and practice with multiple variations of components to know which pattern to use.

As for Render Props, it is suggested that whenever you want to be able to share state and/or behaviors that are encapsulated by the component, then you should want to use a Render Prop component.

Example in code

I will continue from the above (finished) example in order to demonstrate the effectiveness of Render Props. So in the example above, there is a component called "MyRenderProp" which wants to display some data with the <h1> element. But right now we don't know what that data and "MyRenderProp" looks like, so I will show it in the code below! 😅

In the "MyRenderProp" component, this.props.render got changed to this.props.children.

The "render" prop function on "MyRenderProp" got moved in between the opening and closing tags of "MyRenderProp".

Anything in between the opening and closing tags of a component can be considered a child of that component. That is why we can remove the "render" prop and replace this.props.render({ ... }) with this.props.children({ ... })! And it will still work the same way! 👍You can decide which one you want to use. There is always more than one right way to do finish the job!

Conclusion

This was a simple example that could have been implemented in many other ways, but the purpose was to show how Render Props works. I hope you got a better understanding of what Render Props are and how to use them. If you did, try it out for yourself next time you want to make a reusable component! Also if you need better explanations, I recommend you to read the React docs. I think it explains Render Props more in-depth than I did! 😂The docs and codesandbox should be linked at the bottom of this article.