All language subtitles for 016 Cleaning Up with useEffect()_en

Instead of setting a timer for every effect, therefore having multiple timer isn't the end for every

keystroke, we want to make sure we always clear the previous timer because it doesn't matter to us

anymore.

If there is a new keystroke, the old timer can be dismissed.

We always just want to measure a change from the latest keystroke to well after the pause.

We're not caring about an older keystroke, so we want to clean up that timer.

The good thing is set time out in the end, gives you a reference, a pointer at the timer, which we

can store in a constant timer here.

And I'm doing this indie function we're passing to use effect.

So this is the currently active timer.

And now there's something on use a fact which I simply haven't shown you before.

Use effect.

Fact takes a function and dysfunction can actually return something.

Let me shrink that if statement.

It's still there.

It's just shrunken so that we don't see it after days of Stef�n and most importantly, after this timer.

But still, inside of that function, we pass to use effects at the end of this function, we can return

something and thus far we haven't returned anything and use effect.

Now, you don't need to return anything, but you can return something.

But when you do return something, it always has to be a function.

And this is a clean up function.

It's a function.

It will run right before this same use effect function will run the next time.

So not after this function is done, but before the next time it will run.

So on.

The first render does executes and this does not execute, but then on the first keystroke.

We clean up the old effect, run a new one on the second keystroke, we clean up the previous effect,

run a new one ends on.

That's how this works.

And here in the clean up function, we can call clear timeout and pass in timer.

Does is how you clear a timer in JavaScript to clear that previous timer.

Again, clean up will run for the previous effect before the new effect is applied, so this cleans

up the old timer before it sets a new one, and this ensures that we always only have one ongoing timer,

which is, of course, better because we don't have all these redundant timers in memory.

We have only one timer instead.

So finally, save this.

We won't see a strong difference here, still the same behavior as before.

Still works as before, but it's more memory efficient because we don't have all these old timers going

on behind the scenes and memory.

Instead, we only have one timer at a time like this.

So this is how this works, does how we can work with that.

And this is how you can clean up your effects, which you might need in situations like this.

But also, for example, if you're setting up Sun subscription to a Web service or anything like that,

anything which might emit values regularly, you want to clean up your old subscription.

That case, for example, if you're setting a new one with use effect and here it's the same with the

timer when a clear our old timer when we're setting a new one so that we don't have all these redundant

timers in our memory, which ultimately will take up a lot of memory and make our app slower.