Well, here is our list of steps we're going to use to create a reusable custom hook.
Now, remember, I just said two moments ago, it's really challenging for me to give you a foolproof
list of steps to follow, though, if these steps don't make any sense.
I apologize, but really, this is some stuff that's kind of hard to put into a video and have.
It really makes sense without you working on your own exercises and whatnot and really struggling for
a while.
All right.
Enough excuses.
Let's go through this thing step by step.
The first thing we're going to do when building a reusable custom hook is take a look at existing components.
And inside of some existing component, we're going to identify each line of code related to some singular
purpose.
So in our case, we're going to look at all the non JSC stuff inside of our app component and line by
line.
We're going to try to identify the purpose of that code.
So inside of everything, inside the app component, we really have two major goals.
We're really working with two pieces of state and all this code is related to managing those two pieces
of states.
They are our list of videos and a selected video.
So as we think about each line of code inside of here, the first two are really easy to assign a goal
or purpose to.
The first you state line right here is all about managing a list of videos.
And the second line of code is all about managing a currently selected video.
Next up is the entire U.S.
Effect statement, this entire call right here is really about getting a list of videos.
Now, as soon as I see that, you might disagree with me big time this good right here.
Yes, it is about fetching a list of videos.
And so that's why I put videos right here.
But you might disagree with me and you might say, well, Steven, if we don't get your list of videos,
then we can't have a selected video.
So you might say that this is equally parts about videos and a selected video.
Well, my response to that to you is, yes, without having a list of videos or without fetching a list
of videos, we can't have a currently selected video.
However, the relationship between the videos piece of states and selection is actually really interesting.
In our case, the currently selected video is kind of a property of or a function of the overall list
of videos.
If we were working with Redux, we would technically say that the selection piece of state is derived
off of the overall list of videos.
So even though, yes, we can't have a kirtley such a video if we don't fetch them.
Well, nonetheless, election is not really so much about fetching videos as it is about picking one
of the currently batch videos.
Now, if all that doesn't make sense, again, this is where I say that all this hook stuff is kind
of an art form.
So if it doesn't make sense right now.
Don't sweat it.
Let's just continue on for a moment.
Now, our next big block of code is the requests that we make inside of on term summit.
So we make the request and we then take some data out that response and use it to update our video piece
of state.
So, again, I'm going to claim that all this stuff right here is about our videos Piece of State.
And it's only this very last line right here that is isn't at all about selection.
Now, again, you might say to me again, Stephen, we can't have a currently second video if we don't
fetch the list of videos.
But really, again, take a look at that line of code right there.
Some selected video doesn't really care so much about the response data as it does about the overall
list of videos.
So we would again say that selection is really kind of a derived property of the overall list of videos.
Again, it does make sense.
Don't sweat it.
All right, so we've now gone through and we've taken a look at just about every block of code and we've
more or less assigned a purpose to each one.
Now that we've done that.
We're going to start to identify the inputs to that code and the outputs to that code and by inputs
and outputs.
I mean, out of just the videos related code, let's ignore selection for right now.
Let's just think about the lines of code related to videos of each of those lines of code.
What are the arguments to those pieces of code?
What are the outside inputs that are required to make that code run?
Well, in this case, kind of hard to identify, but it really has one single inputs, and that is the
default search term.
This is the only thing that is kind of required from the outside as input to this code to make it run
correctly.
If we provide a default search term.
Everything else inside of here is going to more or less work as expected.
So in this case, you would say that this default search term is really the only input to this block
of code.
The next, we are going to identify the outputs and by output's, we mean to say out of the videos related
code.
What do you and I get back?
What do you and I as developers somehow take from this code and make use of inside the jail X of our
application or inside this component?
Well, in that we really have two outputs, the outputs from all the videos related.
Code is just the video's array itself and the on term simit function.
Those are the only variables inside of all this stuff that we make use of anywhere else inside of our
component.
We've now identified the input and the output to our hook.
It's now the last step we're gonna go through.
Besides, obviously.
Trying to extract all that code.
We want to try to take those inputs and outputs and insert them into a sentence.
And I want you to remember the sentence in the back of your head or whenever you start to put together
your own custom hooks.
Here's the sentence.
If you give me a list of inputs, I will give you a list of outputs and you want to be build to take
all the inputs and outputs you have identified and have.
The overall sentence makes sense.
So in our case, our input is a default search term and our outputs are a function to use to search
for videos and a list of videos.
Overall, we would read this as if you give me in this case me is the custom hook.
If you give me a default search term, I will give you the developer a way to search for videos and
a list of videos.
I think that pretty well identifies this entire block of code right here.
If we give this block of code a default search term, it's going to give back to you and I, the developers,
a way to search for videos and a list of videos that we have already fetch.
All right, so well, last time I know said this probably about five times inside this video now.
This stuff doesn't make sense.
Don't sweat it.
You've got to see this for yourself.
Five or six times before it's really going to make sense.
And you're going to go to write a custom hook on your own.
Let's take one more pause here.
And then in the next video, we're going to start to build out our own custom hook.