Our custom hook is all done.
So let's now take it back over to our app jazz file inside of Abdul G.S..
We are going to import our custom hook at the top.
They'll use videos from up on directory hooks, use videos.
We no longer are using the YouTube API inside of here, so we can delete that import.
We are going to use use effect.
So even though it's kind of great out right now, I'm gonna leave it in there for just a moment.
Now, inside of our app component, we're going to call that hook.
Exactly as though it were any other kind of hook.
Like you state or use effect or something else.
We are going to call use videos.
Remember, this thing expects to be given a default search term.
So I will give it a default search term of buildings just like we had before.
Whenever we call use videos, we then get back in array that has two elements inside of it.
Our list of videos and a function we can use to search for videos.
So I'm going to d structure those two arguments out at array using the same syntax we use with you state.
I'll put in videos and search.
Now, there are two things we need to do inside of here.
First off, we need to make sure that any time we get a new list of videos, we still select automatically
the first list or the first video in that list.
We also need to make sure that anytime the user submits a search term through search bar component,
we continue to do an actual search of the YouTube API.
They're doing that same search very easy.
We can now just provide a reference to the search function instead of on term submit right there.
We'll put in search like so.
That means whenever a user submits a search term, remember, the first argument to inform submit is
gonna be the term the user typed in.
That will call our search function.
That's going to run this function right here.
We're going to receive that term to our search and then update the video's piece of states.
Because we are updating a piece of state and a function that is called by a component, the AB component
is still going to be automatically rendered just the same as though we had the video's piece of state
defined directly inside the Abdala as file.
That's gonna take care of on summit.
Now, we need to also make sure that we still get a selected video.
So we really need to think back to how we were setting a selected video before.
Or essentially win.
So previously we said that immediately after we got a new list of videos, we would select automatically
the first list or the first video inside that list.
Here's why we can do it, to write out some very equivalent logic.
We can call use effect.
And inside of the second argument, we're going to say anytime we get a new list of videos, that's
the key.
Any time we get a new list of videos or any time it changes, we're going to run this function.
So any time we complete a search and we get our new list of videos, we are going to select the very
first video in that list that we will call set selected video.
And provide the first video in that list.
OK.
So believe it or not, this is it.
We have now completed building a custom hook and we are using it inside of our app component.
I do want, you know, that we are going to see one very small warning when we run our code.
But regardless of that warning, everything we have inside of here is still going to work.
It's let's go back over and test this out really quickly.
OK, so I still see videos appear.
The first video inside this list is still automatically selected.
I can still select other videos and I can still put in a search.
And the first video in that list gets selected as well.
It appears that everything works as expected.
Now, let's take care of some different warnings and what that we have inside of your really quickly.
First off, I go to the very top, my console.
You might see a warning inside of here around react, hook use effect has a missing dependancy default
search term.
Well, that means that back inside of our use videos hook right here, whenever we make use of some
outside variable, inside use effect, react wants us to list that argument right there or that variable
that we're making use of inside of a use effect inside of this aero function.
The reason for that is that it solves a lot of stale data references, something that we'll take a look
at later on, set the course.
Right now, we're going to do what REAC says and put in default search term like so.
This actually does have a good benefit to it.
Now, if we ever decide to call use videos again, but provide a different default search term instead
of buildings right here, maybe we change it for some reason based on some outside prop that flows into
the up component.
Then we're going to make sure that we automatically refresh our list of default videos.
Again.
So we save that.
Now, that warning should go away.
I do still see a lot of other warnings and errors.
But all these are truly fine, not really related to the record that we have written.
OK.
Well, that is pretty much it.
So, again, custom hooks.
Very tricky to understand.
The first time you see it, you might be thinking.
All right.
So many questions.
What's going on here?
Like I said, this is one of the things where you just have to write your own code.
You have to do this on your own a little bit before it can make any sense.
And there's really not any tutorial or magic video out there that's going to give you a perfect understanding
of how custom hooks work.
Well, having said that, let's take a pause here and continue in just a moment.