All language subtitles for 045 React Lifecycle Methods - Unmounting_en

OK, let's look at the last one, which is our unmount face.

So inside of our unmount phase, all it happens is component will unmount gets called.

This is where we want to do anything before react strips the component off of our don.

So, for example, we in our Apgar's decide whether or not to show our life cycles component based on

whether or not show child is true or false, right on our app gestate.

Now.

If Sestak gets called and this property changes react, we renders and then it realizes that it no longer

needs to render our life cycle component because, for example, this is now false.

It doesn't what we want to show it anymore react well, then start going through the unmount phase for

the life cycle component, because our life cycle component is on the page right now.

It's there.

It's mounted.

Right.

So when we toggle it and react, goes through its life cycle method work where checks and it calls its

render inside of our app component and it sees that, oh, I'm not rendering this anymore, then reacts

like, OK, let's go into this component.

We're no longer mounting and let's call component will unmount in case there's anything it needs to

do before I remove it from the DOM.

Right.

And that's what we'll see when we click toggle.

We see that component will unmount gets called and then it gets removed.

And then when we toggle it back, it goes through the usual mount's phase because it's remounting.

So it's putting it back.

The whole cycle starts all over again.

But in this unmount, this is where we want to clean up our component.

If there's anything regarding our component that might need some tidying up.

And this usually has to do with if we want to remove anything that might be a memory leak, which just

means that there's some leftover code that the computer doesn't need to be aware of, that the garbage

collection can't access, which just uses up excess memory inside of our browser that it doesn't need

to.

We won't really explore this part until later when we actually look at Firebase.

But for now.

Just know that this is a life cycle method that we do have access to when React goes through its render

phase and realizes, oh, when I was already here, I don't need anymore, let me unmounted then component

will unmount gets called.

And this is the last like life cycle method, because once our component is off the page, there's nothing

else.

It doesn't exist as far as the DOM is concerned anymore.

So this is probably the easiest one to understand.

Right.

But how we're going to use all of these lifecycle methods in our reactive element will be fundamental

in understanding how to best structure our code.

I know this was definitely a lot of theoretical stuff, but it's very important for us to understand

all of this before we move forward.

So thank you for your patience.

And let's continue with the course.