We've now identified our inputs and outputs to our hook.
So let's go back over to our editor and start building out this customer.
Our entire goal here is to extract all the videos related code into some reusable hook looking function.
We're going to always place all of our custom hooks inside of a separate folder inside of our SIRC directory.
So inside that SIRC folder, I'll make a new directory called Hooke's.
And then inside, they're going to make a new file called Use Videos Dodgiest.
This is not strictly required, but usually are custom hooks are going to have names that follow the
convention set by the primitive hooks in react.
So think of the terms you state and use effect.
We will build our custom hooks and give them very similar names.
So in this case, I'm giving this one a name of use videos because it's going to be a hook that is essentially
about searching for and making use of a list of videos.
Then inside of here, we're going to import all the different primitive hooks that we're going to probably
need inside of our custom hook.
So in our case, we probably are going to need.
The use of fact primitive hook, Andy, use state primitive hook that the very top I will import.
Use state and use effect.
Are usable code is also going to have some stuff around searching for a list of videos.
So I'm also going to import the YouTube API inside of here as well.
We're then going to define a function.
And export it at the bottom.
So our goal is for our app component to be able to call this function.
It's going to provide to it.
Our list of inputs.
And in our case, remember, our input is that default term.
And it's going to return our list of outputs, which us is the list of videos and a function that can
be used to search for videos.
We're then going to import this function into our APT J as file and call that function from inside the
body of our app component.
So at this point, it pretty much turns it turns into just taking all the videos related code and cutting
and pasting it over into our hook.
So we're gonna find all the lines of code related to patching and maintaining that list of videos and
just directly cut and paste them over to this Hoak function.
So let's do this.
Line by line.
First off, you state right here.
Yep.
Without a doubt this is related to our hook.
So we're going to cut it and put it into use videos at the very top.
Next up, the U.S. fact function.
Yep, definitely related to our hook and videos.
So we're gonna cut that.
And move it into our function.
And then on turn simit, this really is the function that is related to searching for videos at present.
It contains a line of code around the currently selected video.
We're going to just cut that out and put it right there for just a moment.
We're going to eventually come back and kind of reconcile this line of code.
But right now, we're going to take just on term submit with just code inside of it related to searching
for a list of videos.
We're going to cut that entire thing.
And then also move it over to our hook.
It's we've now moved all the code related to managing this one resource into our custom hook.
So we're now going to wire up our different inputs to this thing and the different outputs as well.
Remember, in our case, our input was that default search term.
Now, at present, having a hardcoded default search term of buildings works totally fine inside of
our application.
But remember, we are trying to build some reusable code here, and this reusable code might need to
be used between different components.
The app component might want to have a very different default search term than the analytics component.
And that's why we're going to try to make this DPL search term a little bit more customizable.
That's why I'm saying that it is technically an input.
We don't really want to have it be a hardcoded string in the long term.
So I'm going to assume that the default search term will be provided as an argument to use videos.
So I'm going to provide an argument right here of default search term.
We will then take that default search term and provide it to on term simit instead of the hardcoded
buildings.
OK.
So we have now wired up our input, we're now going to make sure that we return all the outputs from
our hook to our outputs are our list of videos and a function that can be used to search for a new list
of videos.
So the very bottom of our hook.
We can return these two things in one of two ways, we can either follow the convention of you states,
which is to return an array.
No use state returns and a raid that has our piece of state and a setter inside of it.
If we want to, we could follow that same convention instead of here.
We could put in our list of videos and a function that can be used to change that list of videos, more
or less.
Right.
This doesn't necessarily directly change list of videos.
It is used to do a search, but more or less, it is a function that can be used to modify that data.
So if we want to, we can follow the same convention as the you state hook or alternatively we can do
what is a little bit more common in the JavaScript community.
And that would be to return an object.
That has properties of videos and on turn cement.
This is totally up to you.
There's no requirements in how you return values from a custom hook.
You can either follow the convention of react, which is to return a raise that has stuff inside them.
Or you can do the more common JavaScript convention, which is to return an object.
In this case, I'm going to follow the REAC Convention, which is to return an array.
Now, as I look at this code, the other thing I want to mention very quickly is that the name of this
function on term simit, not the best name in the world on term Simit, made a lot of sense inside of
our abdon jazz component because it was a callback that we wanted to run.
Anytime a term was submitted.
But now that we're looking at a custom hook.
Well, I don't know on term simit, not quite as useful a function name.
The one very small improvement we might make here would be to rename this function to simply search
is that's what this function really does.
It searches for a list of videos.
OK.
So believe it or not, that is our custom hook up.
One last thing we do need to update that unturn summit to search as well.
So this now is our custom hook.
We can make use of use videos in any component.
And as long as we provide a default search term, we will always get back a list of videos and a function
that we can use to update that list of videos as well.
We've built a custom home.
We'll take a very brief pause and then wired this thing back up inside of our APT JS file in just a
moment.