An Intro to Render Props: Functions That Return React Elements

[00:00 - 00:07] RenderProps. So far we've only used hooks to implement the provider pattern. However, we can use different techniques to achieve the same result.

[00:08 - 00:15] One of those techniques is a React pattern called RenderProps. In this lesson we'll learn what are RenderProps and what are their pros and cons.

[00:16 - 00:25] So, what is a RenderProp? A component with a RenderProp receives a function that returns a React element and calls this function instead of implementing its own RenderLogic.

[00:26 - 00:33] This technique makes it possible to share the internal logic between components . So here we have a component where we can pass the Render function.

[00:34 - 00:47] Instead of having its own Render function, it will render whatever we pass here as a prop. An interesting effect of this is that now the rendering logic of the example RenderProps component is exposed to the outside world.

[00:48 - 01:05] So, the component that renders this example RenderProps component can affect the rendering and pass some additional values to this RenderProp. Also, we can reuse the logic inside of the component implementing the RenderPro ps pattern to use it with different rendering mechanisms.

[01:06 - 01:11] And also, we don't really need to call this prop Render. We can use the prop children as well.

[01:12 - 01:21] In this example, as you can see there is no prop called Render. Instead, we're passing a function instead of the regular React components to our soundphone provider.

[01:22 - 01:29] And by the way, be careful when using RenderProps with the React pure component . Using a RenderProp can negate the advantage that comes from using React pure component.

[01:30 - 01:41] If we create a function inside the Render method, the reason for this is that the shallow prop comparison will always return false for the new props. And each render in this case will generate a new value for the RenderProp.

[01:42 - 01:50] To get around this problem, we can sometimes define the prop as an instance method. In cases where we cannot define this prop statically, we should extend React component instead.

[01:51 - 01:54] Pros and cons. Each pattern has its limitations and usages cases.

[01:55 - 02:04] For RenderProps, the pros would be that a RenderProps provider explicitly shows where all the methods come from. Declaratively loads an instrument via prop.

[02:05 - 02:15] Can be written as a class and as a function component. And the cons would be that it adds one or two nesting levels to a component that uses it, and it needs a render function to be called.