Render Props Pattern

[00:00:00]
>> Okay, so the Render Props pattern is, as the name says, we pass props and those props are actually React components. So they're props that we can render. And they make it super easy to reuse logic across multiple components. So for example here we have a render prop called render Kelvin and then render Fahrenheit and it's going to show this little video.

[00:00:25]
I'll make this big. So we see that the render Kelvin prop and the render Fahrenheit prop are both render props. They are props that render data to the screen. So the components that we pass to it, we see like is either a P or maybe temp card, or I don't know what comes after, large texts.

[00:00:43]
They all get the value prop that we add here in the temperature converter cuz we're passing that value here, and they receive that back here. So the implementation is I think this example is exactly this video here. So this is for example, then again, the render component, renderKelvin, renderFahrenheit.

[00:01:07]
And the value that we pass here as a prop is then returned here as a prop. So any component that we show here, can easily get that value from the input component. Now, the nice thing about this, I don't know where the s is here, is that, yeah, the reusability.

[00:01:25]
So what we saw here is that this render Kelvin and the render Fahrenheit even though they are the same prop, we can always pass a different component to it. So even though we know that they will always render something, what they render can always be different, so it's highly flexible.

[00:01:41]
Again we have the separation of concerns but I think the biggest thing for me is that it's the solution that we saw over the problems that we saw with the higher order components, namely the implicit props. Because we don't always know what the higher order component, what props get modified, what props get might get overwritten, but with the render props pattern, it's super explicit.

[00:02:00]
Okay, these are the props that it expects, and this is how you render those components, this is the data that they get. Now as we move things, they might sometimes be unnecessary with hooks. We will look at that later. And another thing with render props is that it is any prop that renders data.

[00:02:17]
So if you've used React you've probably used like the props of children. Children is actually also a render prop, it's a prop that renders data. So render prop doesn't always have to say like render in it or something, it's just a prop that renders any type of data.

[00:02:33]
All right, so we see another challenge here with the refactor the following code so that the temperature converter uses the render Kelvin and render Fahrenheit props to render the Kelvin and Fahrenheit components. So right now here we see that this example is still uses a Kelvin component and a Fahrenheit component.

[00:02:49]
So it's not using any render props. So we're directly passing the value prop here from the temperature converter. But instead we wanna have something that is similar to what we saw before where we could just use this render Kelvin and render Fahrenheit props, so it's not always this component, but it's more flexible.

[00:03:07]
So try to refactor this code to use the render prop pattern instead.