This course still contains valuable patterns in React, but doesn't cover React Hooks introduced in React 1.16.
Transcript from the "Higher Order Components & Exercise" Lesson
[00:00:00]
>> Kent C. Dodds: So now we’re gonna talk about Higher Order Components. So one thing actually, here we can see the problem in our last exercise. So if we look at the usage here, there are like for example this subtitle, or lots of these different places that need to use the Toggle.Consumer, you wind up nesting a fair amount.
[00:00:27] And you're kind of repeating yourself in some places. So higher order components came after mixins, which was an older React concept, as a way to share code. There are some limitations to them, but in general they're pretty useful. A useful mechanism for reducing or sharing code. And especially in a case where you're seeing a lot of the same stuff, okay, toggle consumer, toggle, toggle on.
[00:00:59] And we're doing something very similar in this subtitle here as well. And so wouldn't it be nice if we could, well. This is totally contrived. But what this could look like is const Subtitle = withToggle. And then this is just a thing that accepts toggle as a prop and then renders this thing.
[00:01:30] Wow, yeah, I should've had another one of these. Here, let me add another one. The contrived example is they're just for me to be able to test that you did things properly. Good example of this would be this thing. So it have const SwitchText = withToggle(().
>> Kent C. Dodds: And then instead of all this toggle consumer nonsense,
[00:02:00]
>> Kent C. Dodds: We actually just provide the Consumer function. Whoop, [NOISE] there we go. And I gotta figure out my parentheses, there we go. I just keep on going until Prettier starts applying its niceness. But yeah, th t we can see the difference here, function, switch Text2, there we go.
[00:02:31] So you compare the two of these. And yeah, okay, I could kinda see a case where this seems a little bit over the top compared to a harrowed or component version of this. This is the only one example that applies that what we've currently worked through. You could have a lot of different cases where you have this function that gives you a component back that applies a lot of different things on top of it.
[00:02:58] React Redux, React router, all of these have this high order components that do some extra work and give you a component that will manage that extra work for you. And so you save on a fair amount of code. The difference between render props and a higher order of components is that with a higher order component you get back a component.
[00:03:24] And so that happens statically. LWhen your app boots up, it's creating all these components and then you render those components. With render props, all of this happens at rendered time, which gives you a ton more flexibility. Whether or not you're applying certain props and things of that nature.
[00:03:47] And so this is why we're gonna build our higher order component on top of our render prop. Which actually, incidentally, is gonna be the toggle consumer, which will be implementing the render prop. But yeah, every single time anything you can do with a higher order component with a render prop component.
[00:04:09] But sometimes the higher order component kind of provide a nicer API for the code that you're trying to share. And so by building a react prop component first and then building a higher order component on top of that, you can provide both. So you say, here's the higher order component if you want the simpler, nicer, smaller API.
[00:04:29] But if you really need the flexibility, the render prop is what this is built on anyway, so you just use that directly. So I can't imagine a situation where you'd want to have a higher order component that wasn't under the hood implemented as a render prop. It's too easy.
[00:04:48] Okay, so your task, the whole thing lives inside withToggle function. And it's all spelled out for you, the steps that you have to take. And there's one thing that will be new to you. Probably it's this React.forwardRef. That's new to React in general, so I've put some links in there.
[00:05:11] If you get stuck for more than 30 seconds, just look at the solution to reference it real quick and come back and go through it. Don't spend too much time on that.