We're now going to focus on making sure that we canceled that previous Taimur in order to get properly,
cancel that timer.
We're going to need to learn a little bit more about the use effect hook.
So going to go back over to my editor in for just a little bit here.
I'm going to take everything that we wrote into use effect.
And I'm going to delete it now, I would encourage you to just comment that code out if you want to
follow along, don't delete it.
Just commented, I am only deleting it just to make the code that I'm about to write inside of here
to give you a quick demonstration.
Really easy to follow.
All right, so let's do a quick review unus effect in general and what this function right here would
do for us with the current configuration we are providing as a second argument.
With this current setup, we're going to invoke that arrow function the very first time our component
is rendered to the screen.
We will then also invoke this function any time the term piece of state changes.
So those are the two scenarios where this arrow function is going to get invoked just to confirm that.
Let's put a console log inside of here and say initial render or term was changed.
I'll then save this.
Look back over.
There is our initial render, and now if I make any changes to my term piece of state, I will see terms
changed.
And we can see that up here again and again.
All right.
So that's just normal use effect.
We've already taken a look at that.
Nothing is different.
So here's the new topic I want to introduce.
Whenever we define USIE fact or call it, and we provide and function as the first argument.
There's only one possible value that we can return from this arrow function, only one type of value.
We are allowed to return.
The only thing that we are allowed to return.
Is another function like so?
I'm going to write out a return statement with an arrow function, and I'm gonna put inside of your
console log of cleanup.
The goal of this aero function right here is to do essentially some cleanup.
Now, understanding what this function is for, how it works and what this is all about really comes
down to understanding when React is going to call this function automatically when we return this function.
React is going to keep a handle on it.
It's going to keep a reference that function, and it's going to call that function for us automatically
at some future point in time, understanding when it gets called.
That's the whole challenge here.
That's what I want to help you understand.
Let's save this example right now.
Look back over.
And now you'll see we still have the same council log as before.
So we did not see a council log of cleanup or anything like that.
And then going to clear my council.
And I'll change my search term once again.
Now take a look at the result we get as soon as we make a change.
The cleanup function gets invoked automatically.
And then after that, the function that we provided to use effect itself is invoked again.
So in other words, whenever our component first renders the overall arrow function is invoked and we
return that arrow function right there.
Then any time.
That is time to run this aero function again, first react is going to call the cleanup function that
it got from the last time use effect ran.
And then it's going to call the overall aero function again.
Now, when I describe that verbally, it's a little bit confusing, so we can see very easily with the
console logs.
This entire process in action.
Whenever we first render our component, we see that the arrow function we provided to use effect itself
gets called.
That's what that console log means.
So this entire thing right here got invoked.
As soon as that is time or use effect to be invoked again, though, let's make a small change.
First, the cleanup function we had returned from the last time around.
Gets invoked and then the overall function gets invoked again.
Now, one case that's still not clear.
Let's take a look at this in diagram format.
All right.
Here we go.
There are going to once again start off with the initial component, render the arrow function that
we provided to use effect, gets called put on here, use the effect called to be a little bit more
precise, or if I want to be really clear with my language, I would probably say something like.
Bunk provided to use effect is called that is meant to indicate this overall erro function right there.
That's the first thing that happens.
We then return a cleanup function.
And React is going to hold on to that cleanup function.
Then the next time that we re render our component in that term piece of state changes, we're going
to first.
Invoke the cleanup.
Function.
There were taken that function, we returned at some point time in the past and it gets invoked automatically
and then immediately after that.
The function that we provided to use effect orld again.
When we call it again, we are once again going to return to clean up function and this entire process
is just going to repeat over and over and over again every single time that we re render our component.
The next time we render it, we're going to invoke the cleanup function from the last time rondi function
we provided to use effect again and return to cleanup function.
OK, so that is what the meaning of that cleanup function is, essentially gives us a little point time
and to do some cleanup or maintenance or just about anything can possibly imagine.
This cleanup function is going to be the key to how we cancel the previous timer.
Notice how this diagram right here and the fact that the cleanup timer or the cleanup function right
there kind of looks suspiciously, suspiciously like how this diagram looks.
So we don't want to run any cleanup.
The very first time our components rendered or anything like that, we want to get ready to cancel the
previous timer.
All right, so now we've got a good idea of what that Clean-Up function is.
I'm going to undo all the changes I just made.
So I'm not going to delete my code.
There we go.
That's why I had before.
Well, then take another pause.
We come back.
Next video, we're going to return a cleanup function from Musea fact that is going to cancel the previous
time out.
I.D. the quick pause.
We'll take care of that in just a moment.