All language subtitles for 050 useEffect - Cleanup Function.en_US

Not bad, not bad.

We're done with use of basics, and now let's take a look at the clean up function and why would want

to use it.

And first, I would want to change the files all this time we were working and use the fact basics.

And of course, I would want to navigate to Abcess and I'm still looking for a set of folder, but now

I'm looking for the file number to use affect cleanup.

Again, it's still going to be a setup since I didn't change the name.

And what you see on the screen is use the fact cleanup.

Now, of course, let's navigate to that particular file.

So again, not the final one.

We set up one.

And in here, what I would want is to check for the width of the window.

So we're still using use fact.

That is good.

But I would want to check the size of the window and we can do that by setting up the Lessner on the

window object.

Now, first, let's set up some use state volume so you can notice we have reimported you state and

use fact.

And what I'm looking for here is const now all named this size and Satie's so set size and then we'll

use the used state.

And that is our hook, and then in order to get the width of the window, we're going to go with window

and land the property is in there with.

Now, if you would want a council log, you can just go with council log and check the size and you

should see some value over here.

So let me open up the council.

And of course, it tells me here that is four hundred and eighty four.

Now, of course, it's not going to change at the moment.

We haven't set up the functionality, but that is going to be the whole area where we set up the event

listener on the window.

And as the size of the window changes, so does the value.

Now, first, let me open up a bigger browser window because it's going to be easier to operate.

So I'm going to go here with localhost three thousand.

And of course, I still have the same setup.

Now, in this case, though, of course, the value should be different.

Correct.

Because, of course, the window is bigger.

So as you can see, it is twelve hundred and thirty one.

So now what I would want to do is to set up a some kind of return.

So I guess and then we'll go with a fragment first and then let's type in one side window and then let's

write.

Having two and having Q will be looking for that size.

So first let's access the state value and then let's the pixels so we should see here our window and

then whatever is the value.

And of course it should match exactly what we have in the console.

And now let's set up a vent listener on the window.

And for that case we will use the user effect.

So we're going to go over here, will say user fact.

And then in the user effect, what I would want, of course, is to pass in my callback action.

Now, that is true.

And then within that callback function, I will want the listener on the window.

So first I'll be listening for resize event, that's number one.

And then we need that callback function.

So essentially a function that will run each and every time the event will take place.

So the recession one.

And in this case, I think I'll call this check size.

So let's try to exercise now.

The thing is, of course, we need to create that particular function, so let's create it was a check

size and as far as the function, it will all the time update the size.

So, all right.

Here said size and then whatever is the value, get the inner with.

So what we're doing here is we have to use the fact we have the callback function and we're setting

up the event listener on a window.

And each and every time this event will take place, the first one we will invoke the check size function.

And as far as check size, why don't we just call that size and then we get the current width of the

window.

So let's see whether this is going to work.

So the moment, of course, of this is fourteen, sixty three.

Now let's see whether we can update and everything works nicely.

Correct.

So we can make it bigger.

We can make it smaller.

And each and every time I'm resizing the window, I'm getting the correct volume because again we have

the event listener, we're getting the colors and everything is beautiful.

Our let me throw you a mine grenade.

What if we go two elements, then we'll check event listeners and then we'll check for resize one.

Now, what do you think?

How many will have their.

We shouldn't have one, correct now, does that look like one?

No, it doesn't.

And the problem with this one is that eventually we'll just have a memory like where the moment your

app gets bigger and bigger and bigger, and if you have a bunch of components that are setting up these

event listeners left and right.

It will cause huge problems, so there has to be a way where once we, of course, exit, then we remove

that.

Now, first we need to understand why is that happening here?

Well, we have to use the fact.

Correct.

We have the window listener now in the callback function.

What are we doing over here?

What do you think we have said is correct now?

What is the set size doing?

It is triggering the referendum.

Correct.

Because the moment we invoke that size, we update the value.

As far as the state value, as far as the size and what was your state doing, it was preserving the

values and it was triggering the rewriter.

So each and every time we call this callback function, meaning each and every time we resize the window,

we also trigger the render.

So the more we trigger render under then again, we call the use effect fact.

Now, if you want, you can just simply console log and you'll see that in a console where I'll say

hello world.

And the moment we refresh notice, technically we have one.

Correct.

So now we have one event listener.

But of course, the moment I'll start adding some changes, you'll notice, first of all, in the console,

I have a bunch of other worlds.

So each and every time I'm calling the use of fact.

And of course if I check my events and if I refresh, I'll have a bunch of event listeners as well.

And this is where the clean up function come into play.

So every time we have this usufruct, we also have an option of returning a function.

So we go here with a return.

And as far as the function, what are we place over here will be invoked once we exit and I think the

best way to showcase that is adding another council log.

I'll say clean up here and let's set up a remove eventless there.

So we'll go with window and remove a listener again.

We need to set up a resource and the same callback function so we would want to remove.

Once, essentially, we are done and what you'll notice right now is something really interesting where

we call the hello world, because that is a natural wonder.

But what you'll notice before we do anything, so before we set up another event listener, because

notice this is happening as I keep changing the screen size, then we also call the cleanup function.

So I think the best case scenario is going to be adding here comes along and I'll say render that in

here.

We'll call this, use the fact, use a fact and then we'll have our cleanup and you'll notice how it

works.

So naturally, we have the render correct.

Then we call the use effect.

Now, before we call the use of fact, one more time will also clean up.

So we have our initial render.

Again, don't pay attention.

Then there's two of them.

There is in the shower render.

Then we invoke the use of fact.

And then again, once we trigger re render, once we render the component one more time before we call

that use effect.

So before we add that another event listener, essentially we clean it up.

We removed that listener and of course, we can also see that by the console.

So that is going to be how the cleanup function works.

So, yes, the user effect will run after each and every render.

That is, of course, the default that in this case, we're sending out the event listener.

We're checking for a response now that will trigger the render.

However, before we around the user, after that render, we will run the cleanup function first.

So that's how the setup works.

And you might make a good argument where technically in this example, we don't need to clean up function.

Now, what am I talking about here?

I remember we had that initial render.

We had that dependency list.

So, for example, in here, I could say, you know what?

I would just want around the user only once we rendered components.

And in this case, you're actually correct.

Because what you'll notice that even if we comment about the return, meaning the cleanup function,

we'll still have only one event listener.

So notice how I'm rendering the component.

That is true.

But if I check out the elements, I can clearly see that I still have only one event listener because

of my use of fact, only morons ones.

Now, before you dismiss the cleanup function where you can say, well, each and every time, I'll

just add this empty dependency, right.

You need to understand that the cleanup function is very important when we start dealing with component

appearing and disappearing, meaning there's going to be conditional rendering where you at the moment

this component is all the time on the screen.

So to tell you honestly, this makes sense where we just set up a dependency array and we say, you

know, once the component renders, we will set up the listener and life is great.

How are we need to understand that there's going to be components that, for example, are displayed

and then they are removed?

And the problem with this one is that even though it runs on the initial render, each and every time

we will show and hide that component, it will.

And again, the window listener or event listener or whatever side effect you added there.

And that is something that I'll show you a little bit later once we talk about the conditional rendering.

Just don't dismiss it, even though in this case, yeah, we could have fixed our issue with this empty

dependency array, essentially.

Don't forget that it is a good practice.

Each and every time you set up a side effect is to also set up a clean up function so you don't make

a big, fat mess by just adding tons of subscriptions, tons of event listeners or that kind of thing.