1 00:00:00,650 --> 00:00:04,260 In the last two videos we spoke about the purpose of life cycle methods. 2 00:00:04,490 --> 00:00:10,070 We now understand that we usually put some initial data loading requests or code around that nature 3 00:00:10,250 --> 00:00:13,900 inside of component and mount as opposed to the constructor function. 4 00:00:13,910 --> 00:00:17,100 Remember there is not necessarily a technical reason for this. 5 00:00:17,120 --> 00:00:20,270 It is considered best convention or best practice. 6 00:00:20,480 --> 00:00:26,360 So at present inside of our constructor we've got this initial call right here to get our users current 7 00:00:26,360 --> 00:00:30,650 position and we would in theory be better off putting this inside of a component. 8 00:00:30,650 --> 00:00:32,310 Did MT Life's like a method. 9 00:00:32,430 --> 00:00:38,020 And if we put it in there our application should work identical to how it currently works. 10 00:00:38,060 --> 00:00:45,880 So I'm going to add a new function underneath my constructor function call it not get but component 11 00:00:46,990 --> 00:00:53,800 did mount lifes like so and then going to find the entire block of code where we get our users current 12 00:00:53,800 --> 00:00:54,990 position. 13 00:00:55,180 --> 00:01:02,070 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 14 00:01:02,070 --> 00:01:03,150 code cleanup here. 15 00:01:03,150 --> 00:01:06,480 I think that we now understand what is going on inside this function. 16 00:01:06,660 --> 00:01:11,940 So I'm going to remove that comment right there and then I'm going to collapse both of these callback 17 00:01:11,940 --> 00:01:13,910 functions into one single line. 18 00:01:14,220 --> 00:01:21,070 So I'm going to remove the curly brace right there the curly brace right there and remove the semi-colon 19 00:01:21,100 --> 00:01:27,010 at the end of the aset state line and then I'll put this entire thing on a single line like so and put 20 00:01:27,010 --> 00:01:29,080 the comma on the same line. 21 00:01:29,080 --> 00:01:34,450 Now we'll go through the same process with the second callback function right here to move the Clearly 22 00:01:34,450 --> 00:01:42,360 brace remove the curly brace remove the semi colon and then put the thing onto a single line like so. 23 00:01:42,400 --> 00:01:43,470 OK so that's it. 24 00:01:44,580 --> 00:01:49,430 Now if we flip back over to our browser we should see that our application still works as expected. 25 00:01:49,620 --> 00:01:55,980 So I can refresh the page I get user is denied or user to an ideal location I can reset that preference 26 00:01:56,700 --> 00:01:57,840 reload the page. 27 00:01:57,900 --> 00:01:58,690 I get asked again. 28 00:01:58,710 --> 00:02:04,200 I see loading on the background and then when I allow it I see my latitude appear as well. 29 00:02:04,200 --> 00:02:07,260 So without a doubt our application works exactly as it did before. 30 00:02:07,290 --> 00:02:12,820 Even though we moved this call from the constructor function to the component did mount method. 31 00:02:12,890 --> 00:02:13,130 All right. 32 00:02:13,130 --> 00:02:14,210 So that's pretty much it. 33 00:02:14,390 --> 00:02:17,540 So now I want you to take notice of the constructor function. 34 00:02:17,660 --> 00:02:20,780 The constructor now only has a single purpose. 35 00:02:20,900 --> 00:02:25,220 It's only job is to update or initialize our state object. 36 00:02:25,520 --> 00:02:26,810 So let's take a quick pause right here. 37 00:02:26,840 --> 00:02:30,800 When we come back the next video we're going to talk about a real factor that we're going to do to this 38 00:02:30,800 --> 00:02:35,630 line of code right here to initialize our state in a slightly different fashion. 39 00:02:35,690 --> 00:02:40,970 We're going to only be able to do this update because we moved that loading stuff right here outside 40 00:02:41,000 --> 00:02:42,250 of the constructor method. 41 00:02:42,470 --> 00:02:44,570 So a quick pause and I'll see you in just a minute.