Building a higher-order component

- [Narrator] Before we go any furtherwith creating a logger, I want to talk abouta phrase I mentioned earlier,higher-order components.You've maybe heard the phrase thrown around beforeand it can be a little confusingfor developers new to Reactbut it sounds more complicated than it is.Higher-order components is essentiallya design pattern that React engineershave found to be very helpful.Higher-order components are functionsthat accept a component, or multiple components,as arguments and then return a new, modified component.So the reason we're talking abouthigher-order components is becauseReact developers have found that this isa design pattern that allows us to reuse lots of codeand add functionality to componentswithout completely re-writing new components.

So our logger is itself, a higher-order componentbecause it's taking in a componentand then it's outputting that same componentbut with some modifications.So if you see on the page here,we've got this box that says Parentand has these buttons in itand then this red box represents a parent componentand then inside of it, it has it's child.And so it's child is another component.But now, if you look on the righthere in the Console, you can see that we've gotthis kind of cool functionalitywhere every time one of our Parent or Childinvokes 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 abilityto look at the Parent component or the Child componentor any component that it's wrappingand know when it calls one of these methodsand then log it to our Console.So that's how we're going to be implementingthis higher-order component design pattern in this courseand I know that higher-order components cansometimes seem a little confusingor intimidating so just to prove to youthat you can make one and show youthat they're not as confusing as they sound,we're going to make one right nowand we're going to do one that's even simpler than this.

We're just going to take a buttonand we're going to turn it blue.So you can imagine that maybe you have a websiteand you've got this component that you usethroughout the websiteand then now you have this new areawhere you want to reuse that componentbut you just want to add one more bit of stylingthat will otherwise leave that component unchanged.You just want to turn it blue.That would be a good opportunity to implementa higher-order component.So let's try that now.We're going to go into our index.js fileand I'm going to uncomment that appand I'm going to comment that logger example on line fiveand then I'm going to uncomment out line sevenand 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 hadabout higher-order components.We're going to start by declaring a functionand we're going to call this My Test Wrapper.And this test wrapper is going to expect an argumentand it wants that argument to be a componentwhich we'll say my Wrapped Componentbecause remember, a higher-order componentis essentially just creating a component to wrapanother component and so inside of this,we're going to right away return a classthat extends component.

So we're returning a componentand we'll call renderand then we're going to, in that render statement, returnjust a divand inside that div, we're going to putour wrapped component.That's it.Okay, so we've created a higher-order component.This will render a higher-order componentbut if we go in,went onto the page, we actually wouldn't see anythingso we need to make a few changes just so thatwe can kind of get the appreciation of what we did.

We'll say Style Equals and we'll sayBackground Color.We're just using in line styles herebecause 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 tothe result of my Test Wrapper being called on app.So we're taking the app variableand we're setting it to what gets returnedfrom my Test Wrapper.

Now it's possible you've worked withhigher-order components beforeand you didn't realize it.You could have used Reduxor you could have used Styled Components,which we'll be using earlier.And in all those cases, what we're doingis we're putting a component into a functionand returning that same componentwith a few modiications.So let's save this and go to Chromeand see what our higher-order component did.Here's our helloand it looks the same as beforeexcept for it's been wrapped in this new componentthat just turned it blue.And just like that, we've created our firsthigher-order component.If you still have some questions abouthow a higher-order component works,I encourage you to check out Facebook's documentationand the React documentation aboutwhat a higher-order component is.

I also want to just assure youthat as we move forward,I'm going to explain each stepand you're going to have a higher-order componentthat you've built and worksand we'll add this logging functionalityto any component you've passed to it.

Resume Transcript Auto-Scroll

Author

Released

8/9/2017

Optimize your React components by utilizing the power of React lifecycle methods. Lifecycle methods can trigger different functions at each stage in a component's lifecycle: initialization, mounting, updating, and unmounting. This course dives deeper into React lifecycle methods and shows how we can leverage them to build more performant, reliable, reusable, and concise React components.

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.

Skills covered in this course

Course Retiring Soon

React: Lifecycles will be retired from the lynda.com library on May 10th, 2019. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.

Continue Assessment

You started this assessment previously and didn't complete it. You can pick up where you left off, or start over.

Start My Free Month

Start your free month on LinkedIn Learning, which now features 100% of Lynda.com courses. Develop in-demand skills with access to thousands of expert-led courses on business, tech and creative topics.