This course has been updated! We now recommend you take the State Management with Redux & MobX course.
Transcript from the "Render Properties Pattern" Lesson
[00:00:02]
>> Steve Kinney: Awesome, so we're going to look at one-third pattern in the lightning round.
>> Steve Kinney: Which is render properties. Render properties is just yet another pattern for separating out your state from your presentational component. And what makes this really cool is that it manages to circumvent the problem that we saw before with container components sometimes being a black box.
[00:00:30] Like you just put pizza container, current user container. Tweets container, and where that actual code is not very clear when you stare at that file. You'd have to go to another file to see it. The render properties pattern allows you to see very clearly what the actual hierarchy is here.
[00:00:48] So it gives you the advantages of the container pattern and arguably the one you'll use more. Which is a higher order component pattern, right? But it gives you the ability to see very clearly what's going on. So here we have the with count renders property component. Let's talk about what's going on here.
[00:01:11] It's got the same state that we've seen before. But you can see that this component takes a property called render, which is going to be a function, right, and it calls that function. So what does that look like on the other side to use it? You'd say WithCount, and you'd have a property called render.
[00:01:30] And you would pass it a function where it would pass in all of the props. So it's not what we're used to seeing in a react component hierarchy, but when we look at this source code. It is getting all of the state from the with counter component. But, at the same time it is very clear that hierarchy without having to name stuff and look at it in the dev tools right?
[00:01:53] In the previous example when we made with pizza calculations we had the pizza container. If we booked in that source code, it was just pizza container when we used it. Right, we'd have to go spelunking to see what it was. In this case, when we use this component, it becomes really clear what the hierarchy is.
[00:02:07] We have this WithCount, and inside, there is a counter. And we can see that it's getting count an increment, right, I'm just stuck with two this time, because slides, from that component. So let's go back one slide.
>> Steve Kinney: Right, it renders just a div that I'm using solely to contain it cuz I have to return a single div in this case and it does this.props.render.
[00:02:33] Whatever function is passed in, so in the same way you were able to pass onIncrement, onDecrement, two functions. You can pass it, just a property called render, which is a function. And it's called to receive, in this case, this.state.count this.increment, right? If we did this in the pizza calculator, we would see that it would be all the other ones that we wanted to pass through.
[00:02:53] And we would see that happen like that.