1 00:00:01,110 --> 00:00:06,070 Now that we understand how to use the geolocation API to get our location I'm going to flip back over 2 00:00:06,070 --> 00:00:09,270 to my code editor and find my app component again. 3 00:00:09,310 --> 00:00:13,410 So we now know that this position object right here contains that latitude. 4 00:00:13,510 --> 00:00:15,250 We want to take that latitude. 5 00:00:15,250 --> 00:00:19,900 We want to figure out whether or not the users in the northern or southern hemisphere we want to use 6 00:00:19,900 --> 00:00:23,440 that to customize the look and feel of our page right now. 7 00:00:23,470 --> 00:00:25,370 We're going to set ourselves a little bit easier. 8 00:00:25,780 --> 00:00:30,500 Let's just say that we want to somehow print out our latitude right here. 9 00:00:30,580 --> 00:00:31,660 So in place of the string. 10 00:00:31,660 --> 00:00:32,230 Hi there. 11 00:00:32,230 --> 00:00:36,030 I want to get my latitude to display on the page. 12 00:00:36,030 --> 00:00:36,310 All right. 13 00:00:36,310 --> 00:00:37,490 Now how are we going to do this. 14 00:00:37,660 --> 00:00:44,140 Well that's pretty much the question that's going to lead us into understanding why we have to use class 15 00:00:44,140 --> 00:00:45,610 based components. 16 00:00:45,610 --> 00:00:51,040 Let me walk you through the lifecycle or exactly what is happening inside of our application right now 17 00:00:51,220 --> 00:00:52,950 as it starts up inside the browser. 18 00:00:53,050 --> 00:00:57,970 And then you're going to understand why it will be really challenging for us to somehow put our latitude 19 00:00:58,000 --> 00:01:01,770 in here if we're going to continue using a functional component. 20 00:01:02,540 --> 00:01:03,170 All right. 21 00:01:03,200 --> 00:01:10,290 So over here right so this is a timeline of what happens to our application inside the user's browser. 22 00:01:10,600 --> 00:01:15,310 We start off up here at the very top where a javascript file gets loaded into our browser. 23 00:01:16,890 --> 00:01:21,780 The browser then interprets our javascript file sees that we are trying to create an app component in 24 00:01:21,780 --> 00:01:27,750 that app component gets created then at some point in time the app component is going to be invoked 25 00:01:27,810 --> 00:01:29,470 like this function right here. 26 00:01:30,290 --> 00:01:36,650 When that function is invoked we then call our geolocation service but the very important thing to keep 27 00:01:36,650 --> 00:01:41,000 in mind and this is something not going to repeat to you many times throughout the remainder of the 28 00:01:41,000 --> 00:01:46,950 course is that getting this geolocation result back takes some amount of time. 29 00:01:47,890 --> 00:01:52,630 I don't know about you but when I did the initial geolocation request it took around like three four 30 00:01:52,630 --> 00:01:56,380 or five seconds for my browser to return my position. 31 00:01:56,380 --> 00:02:02,890 It only appeared to be completely instantaneous over here because I set up the hard coded geo location 32 00:02:02,890 --> 00:02:04,240 or did the override right here. 33 00:02:04,240 --> 00:02:07,870 When you do the override it's going to return your position almost instantly. 34 00:02:08,020 --> 00:02:12,040 But if you don't do an override it's going to actually take a pretty good amount of time. 35 00:02:12,040 --> 00:02:15,860 Let me show you this to make sure that you see it from my angle as well. 36 00:02:15,970 --> 00:02:19,780 So I just refresh the page I turn off the override and I'm going to wait a couple of seconds and it 37 00:02:19,780 --> 00:02:25,780 took like three four or five seconds for my position to finally show up once I turned off that override. 38 00:02:26,080 --> 00:02:27,330 So what's the issue here. 39 00:02:27,520 --> 00:02:30,760 Well the issue is basically that we call the geolocation service. 40 00:02:30,880 --> 00:02:37,180 And then in the very next instance our app component returns some amount of GSX. 41 00:02:37,270 --> 00:02:43,680 So we do this colorway here we call geo location and then execution goes down to the next line of code. 42 00:02:43,750 --> 00:02:50,950 Right here we return our GSX that GSX is taken gets eventually turned into HCM L and then rendered out 43 00:02:50,950 --> 00:02:52,520 onto the screen. 44 00:02:52,540 --> 00:02:59,190 That entire process occurs and we see content appear on the screen are far sooner than we ever get a 45 00:02:59,200 --> 00:03:02,320 result from that geo location API. 46 00:03:02,320 --> 00:03:06,970 So essentially just sitting there waiting and twiddling our thumbs waiting to get back our position. 47 00:03:07,150 --> 00:03:12,730 And way long ago in the past we already rendered our app component and the contents of the app component 48 00:03:12,790 --> 00:03:14,970 are already visible on the screen. 49 00:03:15,400 --> 00:03:22,710 So right now with this functional component we dont really have any good way of waiting until this success. 50 00:03:22,750 --> 00:03:28,870 Callback right here and then taking the position and sticking it into some GSX and return it we just 51 00:03:28,870 --> 00:03:33,130 do not have that capability with a functional component. 52 00:03:33,130 --> 00:03:34,600 So what is the solution. 53 00:03:34,600 --> 00:03:40,860 The solution is going to be a class based component in conjunction with 3x state system. 54 00:03:40,900 --> 00:03:42,490 So lets take a quick pause right here. 55 00:03:42,580 --> 00:03:47,260 When we come back the next section we're going to start to Reflektor our app component into a class 56 00:03:47,260 --> 00:03:52,390 based component and then we'll start to talk about reacts state system so quick and I'll see you in 57 00:03:52,390 --> 00:03:53,070 just a moment.