Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Higher Order Components & Exercise" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Higher order components wraps a presentational component into a container component that holds state.

Get Unlimited Access Now

Transcript from the "Higher Order Components & Exercise" Lesson

[00:00:03]
>> Steve Kinney: Higher order components, higher order components are components that take a component as an argument and return a wrapped component. So they basically take a presentational component, and return one that is wrapped in a container component. So it's basically an evolution of this other pattern that we just saw.

[00:00:23] I like to think of it as a container factory, right, and I tend to use it when I find myself saying, hey, I'm gonna need this state all over the place, right? We have campaigns lists and unsubscribed groups in the app, which I need in multiple places. I need for a dropdown for picking which unsubscribed group you want a person to unsubscribe from, so on and so forth, right?

[00:00:46] And so you can create these higher order components, and whatever you need that data, you can simply take the presentational component, pass into the higher order component, and get back a wrapped container and presenter. So it's basically a way of automating what we just did by hand. The other really cool thing is that you can actually use multiple of these.

[00:01:05] So if I have a component that needs both the current user and their tweets, I can pass the presentational component into the current user component. And then pass that one into the tweets higher order component. We can kinda build all the state functionality that we need, and keep the actual presentation completely separate.

[00:01:25] So this is what it might look like with a calculator in this case. So this time, I called it WithCount, and that's a pattern that we use at and I think it's pretty popular. When we see it with react redux later, you're gonna see it called something else.

[00:01:41] But I like to name it based on what is the state that I'm passing in. So in this case, it's my basic counter, so it's going to be all that count state that I broke out before. Okay, and so it is a function that takes a wrapped component as an argument.

[00:01:56] So that is the component that we will eventually wrap, it is the presentational component. And it returns something that we might not have seen before, which is an anonymous class, right. Normally if we said class and gave it a name, we'd say extends component. But this is basically, take this component that we pass in, and return this new component.

[00:02:18] And you can see that it has all of the stateful accoutrements that we saw when we made the container pattern. But it also then returns what is that wrapped component returns whatever components was passed in with all the state that it needs. So ideally, what we should be able to do in this case is, we should be able to take that pizza container, right, and we'll get set up for this in a second.

[00:02:46] We'll take that pizza container, we'll make it take any kind of calculator that it receives, and return the wrapped component. So let me get us set up for that, and then I'll push up a live coding branch so you can kinda have some of the basis there. But I'm still gonna have you do most of the heavy lifting, and then we'll kind of review it together.

[00:03:12]
>> Steve Kinney: So what I need to do is, this is still called application, which I don't love at this point. So what we'll do real quick is, we will change then name of this one to,
>> Steve Kinney: WithPizzaCalculations, seems good. And this is not a higher order component yet, just cuz I've given it the name that would have you believe it is a higher order component, it's not yet.

[00:03:38] Cuz we have not done the part that we saw in the previous slide. But we've given it that name, and then what we'll do real quick is, just to keep the ReactDOM working correctly,
>> Steve Kinney: Application extends Component.
>> Steve Kinney: And we'll have it render.
>> Steve Kinney: Return that, cool, this isn't any different than the container pattern, right.

[00:04:16] This is just getting our name set up in the correct way. What we really want is be able to say const,
>> Steve Kinney: Right, so we take our presentational component. The pizza calculator, again, has no idea of state, it simply is the recipient of props. And then WithPizzaCalculations, there's a function that takes this presentational component and returns a new class, a new component that is the state wrapper, the pizza container.

[00:04:58] Right, with that new presentational component inside of it, right, so that is very hard to express in words. Right, so what I really want you to do is, I'll put back up the slide with count components so you can kind of see the syntax. But you have, effectively, the moving pieces, just instead of hard coding, in this pizza calculator here, you're gonna want to return whatever component was passed in.

[00:05:26] That is the kind of the major difference, we're going from a hard coded container wrapping a presentational component. To a function that takes a presentational component and returns that wrapped in the container.