Original subtitles

Now, there is one last,

important thing you need to know about useEffect

or about the built-in features of UseEffect.

We learned about this effect function.

We learned about the dependencies with the scenario

that we have.

No dependencies with an empty array

or that we have some dependencies.

Now, sometimes you also have an effect that needs

to do some cleanup work.

And that sounds very abstract,

so let me give you a more concrete sample.

Let's say here, we're executing this function

essentially on every keystroke.

This is what happens here.

I can prove this to you.

If I console.log this, "Checking form validity!",

you will see, if you go back here to the console,

with every keystroke, this runs.

Now, that's not a problem here.

This function execution is fairly fast.

But what you do in this function, that might be a problem.

Here, we are updating some state.

This might already not be ideal.

And I'll be honest,

for this simple state update it won't be a problem,

but of course it means

that it triggers another function component execution,

and that React again needs to check whether it needs

to change something in the DOM.

So even that might not be something you really wanna do

for every keystroke.

Now imagine you would do something more complex,

like, for example, send an HTTP request

to some backend where you check

if a username is already in use.

You don't wanna do that with every keystroke.

Because if you do,

that means you're going to be sending a lot of requests.

And I don't know about you,

but that might be a lot of unnecessary network traffic.

So that's something you might wanna avoid.

And as I said, even this here,

this state updating is something you might not wanna do

on every keystroke.

Instead, something you might want to do is

that you collect a certain amount of keystrokes,

or you simply wait for a pause

of a certain time duration after a keystroke.

And only if the pause is long enough,

you go ahead and do your thing.

So for example, here, whilst the user is actively typing,

I might not wanna check if it's a valid email address.

I care about when the user stops typing.

So for example, here, when I type, and then I stop for,

let's say, 500 milliseconds or longer,

then I wanna check.

Okay, the user seems to be done, let's see if it's valid.

That's something we might wanna do.

And the same for the password.

Now that's a technique which is called debouncing.

We wanna debounce the user input.

We wanna make sure we're not doing something

with it on every keystroke,

but once the user made a pause during typing.

And with useEffect, it's actually easy to implement.

We can use setTimeout,

which is a function built into the browser, to wait for,

for example, 500 milliseconds

until we execute some function.

Now, in this function,

we might want to check our form validity

or to update our form validity.

Now we would only do this after 500 milliseconds.

Now, if I move my console.log in here,

you will see that this alone doesn't do much.

The only result is that we don't see the output immediately

but with a slight delay of 500 milliseconds,

which makes sense because for every keystroke,

we're now setting a timer

and after 500 milliseconds, we do this.

Well, the trick is that we actually save the timer.

And for the next keystroke, we clear it

so that we only have one ongoing timer at a time.

And only the last timer will, therefore, complete.

And as long as the user keeps on typing,

we always clear all other timers.

And therefore, we only have one timer that completes,

and that completes after 500 milliseconds,

which is the delay the user has to issue a new keystroke

to clear this timer.

Now that might sound complex to implement,

but useEffect makes that very easy actually.

In the useEffect function,

so the function you pass as a first argument,

you can do something we haven't done before.

You can return something.

Now the something you return here has

to be one specific thing.

It needs to be a function itself.

So here you can also return a function,

for example, an anonymous arrow function.

But it could also be a named function just

as for all the places where I'm using anonymous functions.

So we are returning this anonymous arrow function here.

That's a so-called cleanup function.

This will run as a cleanup process

before useEffect executes this function the next time.

So to make it clear when this runs,

whenever this useEffect function runs,

before it runs, except for the very first time when it runs,

this cleanup function will run.

And in addition, the cleanup function will run

whenever the component you're specifying the effect in

unmounts from the DOM.

So whenever the component is reused.

So the cleanup function runs

before every new side effect function execution

and before the component is removed.

And it does not run

before the first side effect function execution.

But thereafter, it will run

before every next side effect function execution.

So we can simply console.log 'CLEANUP' here

to get a feeling for when it runs.

If I reload this page,

you see "Checking form validity!" ran.

So this code ran clearly,

our main side effect function code.

But we don't see the cleanup call.

We don't see the cleanup log because of what I said.

It does not run before the very first side-effect execution.

But if I then type here just one character,

you'll see cleanup runs immediately,

and then the code inside of this side effect function,

inside of this function here, sorry,

this code here executed.

So that's how cleanup runs.

It runs before every new side effect function execution.

So with this in mind,

we can use the fact

that SetTimeout actually returns a handler, let's say,

or actually, an identifier for the timer that was set.

And we can use this identifier to clear this timer

with the built-in clearTimeout function,

which is built into the browser.

So this has nothing to do with the effects or with React.

This is built into the browser.

Now I don't wanna run it here.

I wanna run it in my cleanup function instead.

There, I call clearTimeout

and pass the identifier of this timeout to it.

And this makes sure that whenever the cleanup function runs,

I clear the timer that was set

before this cleanup function ran,

so in the last side effect function execution,

so that when the next side-effect execution is due,

we are able to set a new timer.

So we clear the last timer before we set a new one.

That's what's happening here.

And again, if the order is not clear to you,

have a look at those console.log statements,

this one and this one, and see in which order they execute.

So therefor, now, if I reload,

we see "Checking form validity!".

And now, if I type here, CLEANUP,

and then again, "Checking form validity!".

But now, here, if I type a lot very quickly,

you see a lot of CLEANUPS,

but you only see one "Checking form validity!".

Again, let me show this to you.

If I clear this, and now again, if I type quickly,

only one "Checking form validity!".

And that means that this code in here only ran once

for all those keystrokes.

And that's what I mentioned earlier.

If we want to be sending an HTTP request here,

we would have now only sent once

instead of a dozen HTTP requests.

And that's an improvement.

And of course, also a nice example for this cleanup function

and when it matters and how it works.

And of course, needless to say,

that our form here still works as before just

with a slight delay, which you of course can control.

You can lower this number here, fine-tune it to your needs.

But this is a great example

for the cleanup function and how it works.