Render props

Question 1

What does render prop mean?

Answer 1

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

A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

Question 2

What is render props mainly used for?

Answer 2

To encapsulate the behavior of a component in a reusable way. A render prop is a function prop that a component uses to know what to render.

It helps keep code DRY avoiding code duplication so you can share state and functionality between components. Each component will have a different state & value separate from the other components using the function used for rendering props in the wrapper because they’re different instances of the Wrapper component.

Question 3

Using props other than render

Answer 3

It’s important to remember that just because the pattern is called “render props” you don’t have to use a prop named render to use this pattern. In fact, any prop that is a function that a component uses to know what to render is technically a “render prop”.

Question 4

How to implement render props?

Answer 4

Take the shared functionality, put it inside a wrapper component or some utility component which has minimal mark up and is really just used to pass whatever state and whatever methods into the other components that need access to those things