In the last two videos we spoke about the purpose of life cycle methods.
We now understand that we usually put some initial data loading requests or code around that nature
inside of component and mount as opposed to the constructor function.
Remember there is not necessarily a technical reason for this.
It is considered best convention or best practice.
So at present inside of our constructor we've got this initial call right here to get our users current
position and we would in theory be better off putting this inside of a component.
Did MT Life's like a method.
And if we put it in there our application should work identical to how it currently works.
So I'm going to add a new function underneath my constructor function call it not get but component
did mount lifes like so and then going to find the entire block of code where we get our users current
position.
I'm going to cut it in I'm going to paste it inside there like so now I can do just a little bit of
code cleanup here.
I think that we now understand what is going on inside this function.
So I'm going to remove that comment right there and then I'm going to collapse both of these callback
functions into one single line.
So I'm going to remove the curly brace right there the curly brace right there and remove the semi-colon
at the end of the aset state line and then I'll put this entire thing on a single line like so and put
the comma on the same line.
Now we'll go through the same process with the second callback function right here to move the Clearly
brace remove the curly brace remove the semi colon and then put the thing onto a single line like so.
OK so that's it.
Now if we flip back over to our browser we should see that our application still works as expected.
So I can refresh the page I get user is denied or user to an ideal location I can reset that preference
reload the page.
I get asked again.
I see loading on the background and then when I allow it I see my latitude appear as well.
So without a doubt our application works exactly as it did before.
Even though we moved this call from the constructor function to the component did mount method.
All right.
So that's pretty much it.
So now I want you to take notice of the constructor function.
The constructor now only has a single purpose.
It's only job is to update or initialize our state object.
So let's take a quick pause right here.
When we come back the next video we're going to talk about a real factor that we're going to do to this
line of code right here to initialize our state in a slightly different fashion.
We're going to only be able to do this update because we moved that loading stuff right here outside
of the constructor method.
So a quick pause and I'll see you in just a minute.