Learn how to build a higher-order component.
- [Narrator] Before we go any further with creating a logger, I want to talk about a phrase I mentioned earlier, higher-order components. You've maybe heard the phrase thrown around before and it can be a little confusing for developers new to React but it sounds more complicated than it is. Higher-order components is essentially a design pattern that React engineers have found to be very helpful. Higher-order components are functions that accept a component, or multiple components, as arguments and then return a new, modified component. So the reason we're talking about higher-order components is because React developers have found that this is a design pattern that allows us to reuse lots of code and add functionality to components without completely re-writing new components.
So our logger is itself, a higher-order component because it's taking in a component and then it's outputting that same component but with some modifications. So if you see on the page here, we've got this box that says Parent and has these buttons in it and then this red box represents a parent component and then inside of it, it has it's child. And so it's child is another component. But now, if you look on the right here in the Console, you can see that we've got this kind of cool functionality where every time one of our Parent or Child invokes a life cycle method, that those are logged to the Console.
Now that's not something that would happen on it's own. That's not something that React does, that's the result of our higher-order component. So our higher-order component has this unique ability to look at the Parent component or the Child component or any component that it's wrapping and know when it calls one of these methods and then log it to our Console. So that's how we're going to be implementing this higher-order component design pattern in this course and I know that higher-order components can sometimes seem a little confusing or intimidating so just to prove to you that you can make one and show you that they're not as confusing as they sound, we're going to make one right now and we're going to do one that's even simpler than this.
We're just going to take a button and we're going to turn it blue. So you can imagine that maybe you have a website and you've got this component that you use throughout the website and then now you have this new area where you want to reuse that component but you just want to add one more bit of styling that will otherwise leave that component unchanged. You just want to turn it blue. That would be a good opportunity to implement a higher-order component. So let's try that now. We're going to go into our index.js file and I'm going to uncomment that app and I'm going to comment that logger example on line five and then I'm going to uncomment out line seven and I'm going to comment out line eight.
So now we're rendering our app and not the logger example. Now we're going to go into our app.js file. And get over any anxiety we might have had about higher-order components. We're going to start by declaring a function and we're going to call this My Test Wrapper. And this test wrapper is going to expect an argument and it wants that argument to be a component which we'll say my Wrapped Component because remember, a higher-order component is essentially just creating a component to wrap another component and so inside of this, we're going to right away return a class that extends component.
So we're returning a component and we'll call render and then we're going to, in that render statement, return just a div and inside that div, we're going to put our wrapped component. That's it. Okay, so we've created a higher-order component. This will render a higher-order component but if we go in, went onto the page, we actually wouldn't see anything so we need to make a few changes just so that we can kind of get the appreciation of what we did.
We'll say Style Equals and we'll say Background Color. We're just using in line styles here because we're testing things out. And then, here at line 29, to make our test wrapper actually wrap our app, we need to Set App equal to the result of my Test Wrapper being called on app. So we're taking the app variable and we're setting it to what gets returned from my Test Wrapper.
Now it's possible you've worked with higher-order components before and you didn't realize it. You could have used Redux or you could have used Styled Components, which we'll be using earlier. And in all those cases, what we're doing is we're putting a component into a function and returning that same component with a few modiications. So let's save this and go to Chrome and see what our higher-order component did. Here's our hello and it looks the same as before except for it's been wrapped in this new component that just turned it blue. And just like that, we've created our first higher-order component. If you still have some questions about how a higher-order component works, I encourage you to check out Facebook's documentation and the React documentation about what a higher-order component is.
I also want to just assure you that as we move forward, I'm going to explain each step and you're going to have a higher-order component that you've built and works and we'll add this logging functionality to any component you've passed to it.
Carl Peaslee helps you build a number of small reusable components that will be useful in future projects. Along the way, he discusses the syntax and uses of lifecycle methods, how state affects React lifecycles and your apps, and how to set static display name, default props, and initial state. Plus, learn how to gather performance data and improve performance by minimizing component updates.
- Overview of React lifecycles
- Initial state
- Default props
- Mounting: componentWillMount, componentDidMount, and render
- Updating: shouldComponentUpdate, componentWillUpdate, and componentDidUpdate
- Controlling component updates
- Using react-addons-perf to get performance data