Render Props Pattern Solution

[00:00:00]
>> All right, let's look at the solution, I'll just open it here, forkids. So first we're gonna go to the temperature converter. So instead of just rendering those components as is, we are using the props, so props.renderKelvin. And they are going to provide a prompt that is equal to this value prop.

[00:00:18]
I'm just going to copy paste this calculation here, I don't really know that by heart. And then we also have the props.render Fahrenheit. And this value is math.floor some kind of, here. So now it says not a function because we haven't passed it here yet. So we're exporting the Kelvin and Fahrenheit component here, which we will need in the app.tsx.

[00:00:44]
And here I'm just going to import the Kelvin Fahrenheit that we exported from the same file there. So now we can say render Kelvin. And we saw that we passed this value prop here. So we can now say Kelvin value is value. And then the render Fahrenheit goes pretty much the same way.

[00:01:07]
So render Fahrenheit, Fahrenheit. Boom, we just got that done. So that's how you would change from just rendering regular components like rendering into Kelvin and Fahrenheit hard coded into the temperature converter to be rendered props. So if we didn't wanna use the Kelvin here, maybe we just wanted to, I don't know, do a paragraph.

[00:01:28]
You just say value, and then it would just be like this, nice, I don't know. Yeah, so you can see that it's like super reusable if we ever want to change it, or render different components based on maybe the patreon or the component they're using. Render props can be super, super useful.

[00:01:46]
Any questions so far about the solution, render props? So, actually one thing is that, for example, if you're using react motion, one thing you'll often see. I just know that this is one of the, I just wanna go to the documentation actually. I don't know where I can find those.

[00:02:04]
Actually, I'll just do it there, GitHub. So one style that you often see is, let's see if they have it, yeah, something like this. Now this is actually also a render prop like we saw before. But this is actually like a child render prop. So sometimes you can see that we're getting those interpolating styles from this components, which, like in a way would have called like props.child and then passed those props there.

[00:02:32]
So if you ever see this, you're like, hey, there's actually also render props, which can be very useful. And it's still used by a lot of like animation libraries, and I think Graph QL uses it as well or that of Apollo. Yeah, so you can still see it in the wild pretty often.

[00:02:48]
Question?
>> Feels like if there's a set state on app component, it will create a new component for render Kelvin and Fahrenheit on every change of state of the app. Is that correct?
>> It would Rerender, I mean, yeah, if you're using state and app, it would just rerender all the children that are within that component.

[00:03:08]
But the same would've happened if we didn't use render props, like that would have had the same effect, because it re renders all the children within the app components. So whether we are rendering it via a render prop or just regularly through a normal component, it has the same outcome.

[00:03:26]
But yeah, I guess just in general make sure that if you're using a render prop and the component that you're using isn't like unnecessarily calling state or rerendering or anything. But in this case it would actually end up in a similar or in the same results actually.