Or app component is looking pretty good.
But before we add any more features I want to do a little refactor to our app component.
If you recall when we initialized our state property right here a couple of videos ago I had mentioned
that there are two ways to initialize state.
So I want to show you the other way that we can initialize state because the alternate way is a method
that you're going to see very frequently in a lot of blog post documentation and whatnot.
So one should be aware of these two different ways of initialising state.
Now in order to understand this other way that we're going to initialize state we have to talk about
something called lifecycle methods.
We've kind of already been dealing on the fringes or of the edge of lifecycle methods without really
defining what they work.
So in this video we're going to start to talk about lifecycle methods then we'll start to refactor that
state initialization right there.
So let's get to it.
All right.
So a component lifecycle method is a function that we can optionally define inside of our class based
components if we decide to implement these methods.
They will be called automatically by react at certain points during a component's life cycle.
And when I use the term lifecycle I'm referring to the fact that a component is going to be created
and then show up in the DOM or show up on the screen of our browser and then at some point in time we
might do something like say call set state which will cause the component to render and then in theory
at some point in time a component might be removed from the DOM altogether and stop showing its content
on the screen.
That entire series of events is for two as the components life cycle.
So these lifecycle methods are functions that are called during very distinct or discrete times during
that cycle.
We've already seen the constructor function that is a function that we can optionally define if we do
it will be automatically called when a new instance of our component is created.
And we've also spoken about the render method the render method is not optional which is unlike all
the other methods on here.
So the render method is the one function that we absolutely have to define.
Now technically the render method is a lifecycle function.
It gets called at some point during the lifecycle of a component.
So here's what happens.
We start off with the constructor being called then the render method will be called we return some
amount of GSX and that content then becomes visible on the screen.
After that we're going to see a series of different life cycle methods being called at different points
in time.
First off immediately after a component shows up on the screen of our browser a lifecycle method calls
component did mount is called.
So that means that if we define a function inside of our class like right here outside of the constructor
right above the render method.
If we define a method right here called very specifically component did MT like so this function will
be automatically called one time when our component first gets rendered onto the screen.
So we could put some amount of code inside of here to set up or do some initial data loading or a wide
variety of different operations that we might want to do.
One time when our component first shows up I'm going to remove that as one to give you a very quick
example.
After that component did mount method gets called our component essentially we'll sit around and wait
for an update member an update is going to come in the form of calling that set state method anytime
we call set state and update our state.
The component will render itself or essentially update itself.
Anytime that happens another lifecycle method is called component did update will be called automatically.
And so once again if we decided we wanted to we could optionally define a function inside if you're
called very specifically component.
Did update if we defined that function it will be called automatically any time that our component updates
itself.
I'm going to leave that one again as well.
Then after that our component might just sit around and wait until it gets another update.
If it gets another update component to it update we'll be called a second time or third time fourth
time.
However many times our component gets updated at some point in time.
We might decide to stop showing this component on the screen.
We'll talk about the scenarios under which that would occur later on inside the course.
So if for some reason we decide to no longer show this method we are asked to meet show this component
the component will unmount method will be automatically called this method will be usually used if we
want to do some kind of cleanup after our component.
And of course We'll discuss when or what scenarios that would occur to get a better understanding of
some of these different lifecycle methods.
I want to implement component did mount and component did update inside of our component and just put
some basic console logs inside there and just say OK yeah these things get automatically called at some
point in time.
So back inside my editor once again right above the render method I'm going to define component did
mount like so.
And inside if you are I'll put a simple console log that says my component will say my component was
rendered to the screen will be really descriptive here.
Like so.
And then underneath that I'm going to define a second life cycle method component did update I'll put
a council log inside of your that says my component was just updated it rerun if I can spell it for
you render it.
There we go.
All right.
Let's then save this and we'll flip back over to a browser and I just want to see these console logs
appear.
All right so I can flip back over and I got to make sure I port my console and we'll see that we already
have the two console logs appear right here.
So the first consul log is from the component.
Did it mount lifecycle method.
It's going to be called automatically any time our component shows up on the screen.
We then saw the component did update method.
It did update method was called because after our geolocation request succeeded or in this case was
denied from me in particular are a component called Set state on itself.
It rebranded itself.
And so the component did update lifecycle method was invoked.
Now one thing I want to mention really quickly here that I did not make tremendously clear on the diagram
is that any time that component did update gets called right before it technically render will be called.
So any time our computer updates the render method will be called will return some GSX that will be
shown on the screen and then right after that component did update will be invoked.
So in general as I mentioned previously the render method is going to be called many many many times.
Anytime we decide to update our component.
All right.
So I'm going to remove those two lifecycle methods right there I just want to give you a quick demonstration.
We are going to re-implement component did mount just a second but we will type that back in when we
decide that we actually need it.
Now let's take a quick pause right here.
I want to very quickly tell you some of the different reasons that we might use these different lifecycle
methods so that you at least have some context and understanding of why we care about these things at
all.
So quick pause and I'll see you in just a minute.