In this video, we're going to start to take a look at extracting some more logic out of our app component.
First off, a couple of quick diagrams.
OK.
So I want you to imagine a little scenario very quickly right now inside of our app component.
We've got some logic around fetching some list of videos that's really around this video's piece of
states, around putting together this use effect function, because that's going to cause us to search
for some initial list of videos.
And then on turn submit where we are actually making the request and then updating our videos piece
of state.
That is all currently contained inside of our app component.
Let's imagine for a second that we are working on a very large application, maybe something like YouTube
itself.
Maybe at some point in time we decide to create another component called analytics, and maybe this
analytics component is going to show our users some analytics about all the different videos that they
have posted.
So inside this component's, chances are we are going to need to somehow fetch a list of videos that
this user has made.
So we might end up deciding to just duplicate or copy paste all of that video fetching logic from the
app component over to analytics.
Now, of course, there might be some very small, subtle differences in the video fetching logic between
these two components.
Right now, let's just assume that the code is more or less identical in nature.
Naturally, any time we've got some identical code shared between two different locations inside of
a project, that is usually a sign that we want to extract that code and make it a little bit more reusable
in nature.
So how would we do that?
Well, to make reusable code when we are making use of function components and hooks, we create custom
hooks.
So here's what we would do, rather than duplicating that code in two locations.
We would instead create a custom hook.
This is essentially a function that is going to have a couple of references to maybe use state use effect.
Some other stuff like that inside of it.
Then our app component and the analytics component can make use of this custom hook, you fetch a list
of videos as opposed to duplicating all that logic between the two.
That's what we're going to try to do next.
We're going to try to create a custom hook and inside of that custom hook.
We're going to have some logic around fetching a list of videos.
Let me show you first a couple of different notes just to help you get an overview of custom hooks in
what they are all about.
All right, so first off, reading SDM Hooks is one of the best ways to write reusable code inside of
a REAC project, besides, of course, creating components.
So usually we make use of custom hooks any time we want to make some calls to say use state or use effect,
a little bit more reusable in nature.
We are always going to create custom hooks by extracting some hook related code out of an existing function
component.
The first thing I want you to understand around these custom books is that we're really talking about
making all of this code right here reuseable in nature.
We are usually with a custom hook, not talking about anything related to J.S. X.
So whenever you start building custom Hoke's, you're not really focused on somehow making this stuff
for usable to make J.S. X reusable in any way.
We always create another component.
In order to make all of this stuff at the top of a component, so all of this data related stuff right
here reuseable, we make a custom hook.
So with that in mind, custom hooks are always going to contain at least one primitive book.
So a hook like you states or use effect when we use the term custom hook.
We're not talking about building up a primitive hook.
We're not building something like use state or use effect from scratch.
Instead, we're just talking about taking some existing code that is making use of use states or use
effect and putting it into a reusable function.
So even the term custom hook is a little bit misleading because it might make you think we are going
to build something like you state or use effect.
Again, that's not the case.
Each custom hook we put together is always going to have one single purpose.
So thinking back to this real quick example I gave you right here.
If we had a custom hook that had some logic inside of it around fetching videos and some logic inside
of it, around selecting.
A video?
Well, this might not be as useful.
Our app component does need to have logic around both fetching videos and selecting a video.
But maybe our analytics one doesn't need anything around selecting video.
Maybe analytics just needs the video fetching logic.
Don't ever build a custom hook.
We try to have just one goal, one purpose, or work with one kind of resource inside of it.
So we would have just some code around video fetching and not code around selecting a video.
Now, some bad news here.
Unfortunately, building custom hooks is kind of an art form.
It is very challenging for me to give you some foolproof list of steps you can follow and always build
a perfect custom hook.
This is one of those things where you just have to kind of get your feet wet.
You have to write your own code a little bit before you're going to really understand the stuff.
Nonetheless, I did put together a series of steps for you to follow.
So we're going to try to make this as a foolproof process as possible.
But again, it's something you really just have to practice on your own.
And with that mind, one thing I will say is that anytime you have data fetching code, that is usually
a great kind of thing to try to make into a custom book.
And that's really what we're doing here.
We are talking about somehow making this video fetching code a little bit more usable in nature by extracting
it into a custom hook.
So just something to keep in mind.
All right, so now we've got some notes either way.
One quick pause and we're going to go through a general process for creating reusable hooks in just
a moment.