Understanding React Render Props by Example

Build a React component step-by-step using render props to understand how to implement the pattern

In this tutorial we will cover the concepts needed to build your own components using render props. We will implement a component with render props to save React state to localStorage, called <Storage/>, that will allow you to inject the functionality into components without needing to duplicate the logic across your entire application.

Learn React - Best React Tutorials (2019) | gitconnected

If you’re interested in seeing the same example as a higher order component, check out this article

An introduction to render props

The render props pattern is a way to share functionality between components without repeating code. The official React docs define it as —

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