We are all done refactoring our search bar component.
So we're not going to start to refactor the app J.S. file.
We're going to once again go through the thing line by line.
We're going to first understand the different hooks that we're going to need to use in our new function
version of the app component.
And we're going to start to move all of our code over line by line.
So as I look at our class app right now, I noticed right away that is making use of state and inside
the state object.
We are declaring two separate properties.
That means that inside of our function component, we will need to make use of the use state hook twice,
once to declare a piece of state called videos and wants to declare a piece of state called selected
video.
Then right after that, we are making use of the component did Mount Life-cycle method.
That means we will need to use the use effect hook inside of our function component as well, because
use effect is roughly equivalent in nature to a lifecycle method.
You on that?
I just see a couple of different callback functions.
There's one there's one render method.
And that's pretty much it.
I think that all we really need here is two pieces of states.
A U.S. fact took and copy pasting a lot of code around.
To get started at the very top to file from react, I'm going to import you states and use effect.
Then right above class AB, I'm going to declare a new function component called out as well.
At the very top.
We'll declare are two pieces of state.
We'll call them videos and selected video.
We'll get videos.
We'll provide a default value of an empty array.
And selected.
Video with set selected video.
And for that, we'll give a default value of not.
Alex, good.
I'll then delete that state declaration.
Next up, I'm going to make use of the use effect took remember, component did mount is going to only
run one time for our app component when the app component first is rendered onto the screen to make
use of the use effect hook and get some roughly equivalent functionality we can call use effect.
And then provide a second element or a second argument of an empty array.
And remember, empty array means run this function right here.
Only one time you can think of this form of use effect as being roughly equivalent to component did
mount.
We can then move over.
That on term summit, we're going to cut that paste it in like so.
And again, we don't have any idea or concept of this inside of a function component.
So we will remove the this dot and we are left with only on term simit.
Then delete component in Mount.
OK, so next up, we've got on term summit, that's where we take some term, do the search and then
update our state.
Once again, let's just take that entire function.
And then pasted directly after use effect.
I'll make sure that I put in concert in front of on term submit.
And then inside of here, we're gonna do a quick scan through and make sure that we don't have any references
to things like this or this doc props or distort state or anything like that.
The first looking at the request, and that all looks good to me.
Then looking after that, we've got a call to this dot set state, do we need to take this entire state
set state call and divided into two separate function calls?
One is gonna be a call to set videos to update our videos, piece of state and the other vehicle to
set selected video to update the selected video piece of state.
Right above the set state, we're going to do a set videos.
And provide response data items.
And then set selected video and provide response data items at zero.
We can then delete the entire this dot set state call.
All right.
That's it for on term summit.
Now, what do we have next?
Well, we've got on video select.
OK.
That's gonna be easy one.
So we'll cut that as well.
But it right after.
On term submit inside of our function component.
Ro Konsta on their.
And then inside the body, that function, we definitely of a call to this state said state.
Again, no idea of set state.
So we can delete that entire line.
And replace it with set selected.
Video and provide the video that we want to select.
The last thing is our big J.S. X block down here.
Once again, we'll take the entire return statement.
So everything from return down to the closing parentheses.
A cut that leaves behind just the render function.
I'll then go up to my function components and right after.
On video select.
I will paste in that entire return block.
And then we could go through here and update everything line by line.
So first off, we've got our search bar component.
We have to provide a function to call whenever a user submits a term.
And that function that we provide right there will be called with a search term that the user entered.
So in our case, we've still got this on term simit function right here.
We're going to provide that to the on form summit.
That's going be on term simit.
Next up is our video detail.
We are providing a prop of the currently selected video.
Once again, there's no this state.
We just have a single variable inside this component called selected video.
So we will delete the this dot state dot and leave behind just selected video.
And then finally on video list.
We no longer have a dot on video select.
Instead, we've got the on video select function by itself.
We'll just provide a reference to that.
And then in addition, there is no this dot state dot videos, there is just videos.
We can then go down to the bottom.
The lead the class app that is left behind, and that is pretty much it.
Now, at this point, we have refactored from a class based component into a function component.
There are definitely some improvements we can make on this function component.
Right now, I want you to notice that by just making use of hooks, we have not necessarily improved
the legibility or the reuse or anything like that of our app component.
It is simply, at this point, a slightly different syntax.
So this is actually really important for you to understand in the community.
There's a lot of interest and excitement around hooks, but making use of hooks just do not automatically
make your code better than making a sort of a class based component.
If you want to make your code better, you can use hooks.
But you have to do some additional work on top of that, that we absolutely can refactor the thing and
make this code way more legible, but it will require more work on our end.
Now, the very last thing we'll do very quickly is save this file.
Let's go back over to the browser and just make sure everything still works.
Open up my console.
Just make sure I don't get any errors from our code.
Remember, you might see some error blocked by client or stuff like that.
That's totally fine.
Those in my case in particular, I'm running an ad blocker and it's blocking some ads tied to the YouTube
I frame right here.
It's all do a search for forest.
And I can still click on a video and play it.
OK.
Well, that is the re factor that we are making use of hooks now instead of class based components.
But like I said, we could probably figure out one or two ways to condense down our app component right
now.
Let's take care of that in just a moment.