This course has been updated! We now recommend you take the State Management with Redux & MobX course.
Transcript from the "Higher Order Component Solution" Lesson
[00:00:05]
>> Steve Kinney: Okay, so, the lab coat and branch that I had just pushed up, we called it with pizza calculations but it was still the container pattern. Again, the real power of this kind, this is one of my absolute favorite patterns with React. Composing new components by taking some stable component that may be as fetching stuff from the API.
[00:00:26] You can have it with local storage. If there is any kind of state that you wanna use multiple places, I will almost always create one of these. This is probably the most common pattern I use when I am pulling data from remote sources or even using browser APIs and I wanna pull that stuff in.
[00:00:43] I will make one of these components cuz I can keep composing bigger, and bigger chains of these with more, and more features, right? So, I can bring something with local storage, and the current user so on, and so forth. So, we called this one with withPizzaCalculations, but it doesn't do the thing yet.
[00:01:01] What we really wanna do is turn the container component into a single use. Hey! It just happens to wrap this one presentation component into a factory that can take any component and wrap it in this state, right? And this is, again, where this becomes incredibly powerful. So, we do need to do some changes and there are not a lot of changes, right?
[00:01:20] This is why we're kind of building up to this. We do know that it is going to be a function. And what does it take as the argument? The wrapped component, the presentational component, I have historically always called the wrapped component. This will be the argument that is passed in.
[00:01:43] So in this case if we scroll down again.
>> Steve Kinney: It's going to be this component that we pass in will be now known as WrappedComponent.
>> Steve Kinney: And then we're going to return.
>> Steve Kinney: So we can actually, just to make this a little clearer, I'm gonna actually say return class extends,
[00:02:11]
>> Steve Kinney: Component, right? And why does this work? It turns out that classes in JavaScript are just syntactic sugar over functions, right? So, in the same way that I can have a, remember when we used to use functions back in the old ES5 days, with a capital letter, and we used it as a constructor function and we called new.
[00:02:34] tThis is the same thing that we do with the class, it's just a function, so in the same way that I can have anonymous functions, I can have anonymous causes cuz it's just synthetic sugar. What I'm gonna do in this case is I'm just gonna grab the entire body of this cuz this is effectively what I want.
[00:02:52]
>> Steve Kinney: And move it inside here. And instead of always returning a pizza calculator, what am I gonna return? The component that was passed in, right? So now I have the ability to create as many of these as I want. Cool, let's just kinda make sure that I didn't miss anything.
[00:03:15] I most likely left this here, yep.
>> Steve Kinney: And so now if we wanna create this pizza container that will eventually,
>> Steve Kinney: Be all the pizza, calculator, stateful, guts with the presentational component, we simply compose it by combining the stateful component with the presentational component. And again, having these two things separate and being able to mix and match them as much as I want is possibly one of my favorite patterns in React.
[00:03:47] And I keep repeating that cuz I mean it.
>> Steve Kinney: So we'll say that. We'll go back over.