Instructor: Let's talk a little bit about
higher order components.
Now, you may have heard of higher order components before,
or maybe you haven't.
I'll tell you that no matter what,
you've definitely been using them,
even if you haven't really realized it.
So we're gonna start by talking a little bit about
what they are and what purpose they serve.
Before we do that,
let's install our Boilerplate package
just to get that process running.
So in my browser, I'm going to navigate to
github.com/stevengrider/reduxsimplestarter.
Once there, I'm going to either clone
this repository using the link,
or there's directions down here to
download and install the repository
if you're not familiar with Git.
So either way, you're covered.
Over at my terminal, I'm going to clone the repository,
and after I clone it,
I'll change into the directory and run an NPM install.
Okay, so while that's going,
let's talk a little bit more about
exactly what a higher order component is.
I'm gonna pull a diagram on the screen
that's gonna do just a little bit
of a rudimentary explanation,
and then we're going to dive into the topic more
in the next section.
So a higher order component is a react component
that adds some additional functionality or behavior
to an existing component that you've already written
or plan to write in the future.
We combine a normal component,
or one that kind of places HTML or produces HTML,
and puts it on the page,
with one or more higher order components.
And what we get back from that
is an enhanced or composed component.
So we take a higher order component,
we combine it with a regular component,
and that gives us an enhanced or composed component.
When we add a higher order component to a normal component,
what we're really doing is we are adding on
some additional functionality, or data, onto our component.
And so higher order component in practice
end up being a fantastic way to extract functionality
that is common to multiple components,
or maybe multiple features within our application.
It's also great for providing duplicate logic,
or maybe we are duplicating logic
all over the place inside of our app,
and if we see a location
where we can kind of centralize that logic,
that would be the purpose of a higher order component.
Higher order components are also very commonly used
with third party libraries including, React Redux.
And so when I said you've probably already been using these
without really knowing it,
I'm specifically referring to React Redux.
And in the next section,
we'll do a little bit more of a discussion
about exactly where you've been using
higher order components already.
I'm gonna close this diagram,
and it looks like my dependencies are all done installing,
so I will go ahead and catch you in the next section.