Okay.
In this movie, I will show you how we can use lifecycle methods and what the lifecycle methods are.
So basically, wherever we render, we use our component.
So like in this case, this is class based component.
So the function has no way to use any of the state or lifecycle methods.
So I will close this.
And as I said, the functions are for you simple use case.
So whatever.
We need to have something more complex.
We'll use the class based one and whatever we use like this one, this is our component inside our app.js
and then we can hook into the lifecycle methods.
And if I will start typing here component you can see here.
Com Ponent.
We have a few options and this.
Matters here that built in methods inside this component.
So they are available straight away and we can implement them if we need them.
So basically, what are these?
We have different life cycles of our components, so component might be render and might be attached
to our page and the attach later on and we'll have different things that will happen during his life.
So we have, for example, did catch did mount did update will mount will receive props will unmount
and will update.
So basically that is depend when this com this function will be trigger.
So if we want to have something after our component was mount and did mount, then we can use this this
function did mount and then we can do something about it and then we can for example, will receive
props.
So once we receive props, we can set this, for example, stage to props and so on and so on.
And then it will be the same when actual our component is dying.
So whatever it will be detached from, the page will have, will mount and so on.
So for example, I will use Componentdidmount here and that's a normal function, the method inside
our class.
And let's say I can do the way I've done this before, set state, I will clear my name so my state
is let's do it like this.
So my state at the beginning of of this component, life is empty.
So if I will save it now and I can see here not anything the field because the name is empty so I can
do componentdidmount and whatever this component will mount, I can do set state name to.
My name, for example.
And you can see my name is here.
So component mount first and then this trigger, this function.
And then inside that function I set my state name to my name and it is here.
So all that lifecycle methods component like you can see here, that's different stages of our life,
of our component and you can use it depends on what functionality you would like to achieve.
So very common practice is if, if you need to fetch some data from from external API or something,
whatever, you will mount your component.
You can do it with Componentdidmount because you know you have all the elements in place and then you
can fetch the data here and then you can fetch the state and then state will be reflected on the page.
So all of that method, sometimes you need to if you use the observable, for example, you need you
can subscribe to some observable when you did mount and then you unsubscribe when you when you will
unmount so components.
So you will do will unmount like this.
So you might have a soup subscribe here and then you later on when you will just about to kill that
component.
You can do unsubscribe.
Like that.
That's, uh, of course, pseudocode, because we don't have any observables here.
But that will be an option, a use case for that component lifecycle.
So as I said here, we can hook it to a lifecycle events and then we can use it in the way we want to
have it.
That's how we can implement it.
And you don't have to do it.
And then you just create that method whenever it's useful for you.