Instructor: So we've now wrapped up
our authenticated higher order component.
I just wanna do a quick wrap up and refresh our memories
on some of the topics that we covered.
First, we looked at a diagram,
well we looked at a lot of diagrams,
but the purpose of this diagram
was just to illustrate that a higher order component
is something that wraps a component
that we've already created.
So by combining a component and a higher order component,
we get a enhanced or composed component,
kind of interchangeable terminology there.
The higher order component that we created,
and this is similar to all high order components,
is a function,
and we called our function with the composed component.
Inside of this function,
we created a new class that we just call authentication,
but we could have called this class anything we wanted to,
it could have been absolutely anything.
Inside of this class's render method,
we only rendered the composed component
or the component that got passed
into this higher order component,
and we also made sure to pass
through any props here as well.
To make use of this higher order component,
inside of our router,
right before we made use of the component,
right before we tried to render it,
or pass it off to the router at least,
we wrapped the higher order component right here.
Now this is in great,
not at all similar to
how we use our connect higher order component,
the connect helper from React Redux.
Let's look at header
which is a component that we used with React Redux.
So in this case,
we chose to wrap our component inside of this file,
so the big difference here, the big kind of divide
between whether or not you want to wrap
or make the actual call to your higher order component
inside of your component file,
or when it's used,
for example, when we used resources,
is whether or not you expect
every instance of this component
being used in your application
to require your higher order component.
So what I'm trying to say is,
if we expected every last instance of resources
to require authentication,
then it would've actually made more sense
to put this require off call
inside of our resources component, inside of here.
And so we could have instead,
instead of exporting default the function,
we could have said export default,
and we haven't done the import at the top,
so let's just pretend that we did,
require off resources,
and then we would've instead
called this function right here resources, like so.
So again, this would've been an alternate approach
if we expected every instance of resources
to require authentication.
And I simply didn't know
whether or not that would've been true
inside of our application.
Well, you know, I did,
because I put the example together,
but you kinda get the idea,
I wasn't entirely sure whether or not
that if we expanded this application in the future,
whether or not we would be completely covered
across the board.
So there's a little bit more consideration there
for where you locate that code.
Anyways, I hope you enjoyed the section,
and I'll catch you in the next one.