Now that we understand how to use the geolocation API to get our location I'm going to flip back over
to my code editor and find my app component again.
So we now know that this position object right here contains that latitude.
We want to take that latitude.
We want to figure out whether or not the users in the northern or southern hemisphere we want to use
that to customize the look and feel of our page right now.
We're going to set ourselves a little bit easier.
Let's just say that we want to somehow print out our latitude right here.
So in place of the string.
Hi there.
I want to get my latitude to display on the page.
All right.
Now how are we going to do this.
Well that's pretty much the question that's going to lead us into understanding why we have to use class
based components.
Let me walk you through the lifecycle or exactly what is happening inside of our application right now
as it starts up inside the browser.
And then you're going to understand why it will be really challenging for us to somehow put our latitude
in here if we're going to continue using a functional component.
All right.
So over here right so this is a timeline of what happens to our application inside the user's browser.
We start off up here at the very top where a javascript file gets loaded into our browser.
The browser then interprets our javascript file sees that we are trying to create an app component in
that app component gets created then at some point in time the app component is going to be invoked
like this function right here.
When that function is invoked we then call our geolocation service but the very important thing to keep
in mind and this is something not going to repeat to you many times throughout the remainder of the
course is that getting this geolocation result back takes some amount of time.
I don't know about you but when I did the initial geolocation request it took around like three four
or five seconds for my browser to return my position.
It only appeared to be completely instantaneous over here because I set up the hard coded geo location
or did the override right here.
When you do the override it's going to return your position almost instantly.
But if you don't do an override it's going to actually take a pretty good amount of time.
Let me show you this to make sure that you see it from my angle as well.
So I just refresh the page I turn off the override and I'm going to wait a couple of seconds and it
took like three four or five seconds for my position to finally show up once I turned off that override.
So what's the issue here.
Well the issue is basically that we call the geolocation service.
And then in the very next instance our app component returns some amount of GSX.
So we do this colorway here we call geo location and then execution goes down to the next line of code.
Right here we return our GSX that GSX is taken gets eventually turned into HCM L and then rendered out
onto the screen.
That entire process occurs and we see content appear on the screen are far sooner than we ever get a
result from that geo location API.
So essentially just sitting there waiting and twiddling our thumbs waiting to get back our position.
And way long ago in the past we already rendered our app component and the contents of the app component
are already visible on the screen.
So right now with this functional component we dont really have any good way of waiting until this success.
Callback right here and then taking the position and sticking it into some GSX and return it we just
do not have that capability with a functional component.
So what is the solution.
The solution is going to be a class based component in conjunction with 3x state system.
So lets take a quick pause right here.
When we come back the next section we're going to start to Reflektor our app component into a class
based component and then we'll start to talk about reacts state system so quick and I'll see you in
just a moment.