1 00:00:00,800 --> 00:00:04,100 In the last section we started talking about component lifecycle methods. 2 00:00:04,230 --> 00:00:08,790 I told you a little bit about when each of these different methods get caught but that doesn't really 3 00:00:08,790 --> 00:00:11,720 answer the question of why we might use these at all. 4 00:00:11,850 --> 00:00:18,210 So in this video I want to talk about exactly why we would use the component did update and will unmount 5 00:00:18,210 --> 00:00:19,310 life cycle methods. 6 00:00:19,380 --> 00:00:20,210 Let's get to it. 7 00:00:21,040 --> 00:00:21,280 OK. 8 00:00:21,300 --> 00:00:23,980 So a couple of notes on each of these different lifecycle methods. 9 00:00:24,150 --> 00:00:28,080 First off you've already seen the constructor and I think you already understand that the constructor 10 00:00:28,080 --> 00:00:34,110 function is a good place to do our state initialization and that's exactly what we are doing right now 11 00:00:34,200 --> 00:00:34,740 right here. 12 00:00:36,060 --> 00:00:39,720 We can also do some initial data loading inside of a constructor. 13 00:00:39,720 --> 00:00:45,150 So that might take the form of making a network request to some outside API or it might take the form 14 00:00:45,240 --> 00:00:49,240 of doing something exactly what we're doing right here with the geolocation. 15 00:00:49,470 --> 00:00:54,360 We want to attempt to get our users position the instant that we know that we are going to show this 16 00:00:54,360 --> 00:00:55,800 component on the screen. 17 00:00:55,800 --> 00:01:00,020 So placing the code for that inside the constructor would be one possible solution. 18 00:01:00,030 --> 00:01:03,540 However there is a little caveat on that that will mention it just a second. 19 00:01:03,540 --> 00:01:08,010 When we start talking about component in Mount Next up the render method. 20 00:01:08,040 --> 00:01:12,260 Well I think you already understand what's going on with the render method inside the render method. 21 00:01:12,280 --> 00:01:17,610 We're going to return some GSX in a general that's the only thing we do inside there. 22 00:01:17,610 --> 00:01:20,260 We just tried to get some GSX returned. 23 00:01:20,280 --> 00:01:22,650 We're not going to ever make a network request. 24 00:01:22,650 --> 00:01:27,780 We're not going to ever startup's something like fetching the user's location or something like that 25 00:01:27,780 --> 00:01:35,220 from the render method the render method alone is about returning GSX and not doing anything else. 26 00:01:36,080 --> 00:01:39,000 So next up component in MT why would we use this thing. 27 00:01:39,200 --> 00:01:45,940 Well the component to mount method is a perfect location to do some initial data loading for your component 28 00:01:47,140 --> 00:01:52,810 or to kick off some outside process like getting the users current position if you only have to do this 29 00:01:52,810 --> 00:02:00,430 thing one time in our case we only want to get our users current position one time the component did 30 00:02:00,430 --> 00:02:02,830 mount method only gets invoked one time. 31 00:02:02,830 --> 00:02:06,640 So these two purposes kind of line up with each other perfectly. 32 00:02:06,660 --> 00:02:10,960 Now you might notice that I kind of just use the same description for the component to mount method 33 00:02:11,200 --> 00:02:15,940 as I did for the constructor in both locations I said oh yeah we can use these things to do some data 34 00:02:15,940 --> 00:02:20,220 loading or call our geolocation stuff right here. 35 00:02:20,260 --> 00:02:25,670 So in truth we can use either a constructor or a component amount to do that data loading. 36 00:02:25,690 --> 00:02:31,960 However if you read the official reac documentation and if you look at some of the community best conventions 37 00:02:31,960 --> 00:02:38,560 or best practices the official docs and best practices are going to say do not do data loading inside 38 00:02:38,560 --> 00:02:40,080 the constructor function. 39 00:02:40,120 --> 00:02:41,380 You absolutely can. 40 00:02:41,380 --> 00:02:47,410 There's no technical reason that you cannot do some initial data loading like an API request or this 41 00:02:47,410 --> 00:02:49,800 geolocation stuff inside the constructor. 42 00:02:49,800 --> 00:02:56,770 You absolutely 100 percent can but it is recommended that you do it inside the component did mount method 43 00:02:56,800 --> 00:02:57,940 instead. 44 00:02:58,080 --> 00:03:03,880 And there's a very simple reason for that if you always centralize all of your data loading stuff inside 45 00:03:03,880 --> 00:03:04,450 the component. 46 00:03:04,450 --> 00:03:09,270 Did mount method as opposed to spreading it out between component and mount in constructor. 47 00:03:09,370 --> 00:03:12,250 It's going to lead to more clear code. 48 00:03:12,520 --> 00:03:19,000 If a new engineer ever starts working on your project they can open up some new component file and understand 49 00:03:19,150 --> 00:03:23,950 that all of the data loading code that is related to a single component is always going to be placed 50 00:03:24,010 --> 00:03:25,770 inside of component and mount. 51 00:03:26,050 --> 00:03:31,520 So although we can technically spread out data loading stuff between the constructor or the component 52 00:03:31,780 --> 00:03:37,290 lifecycle method it is recommended that you put it all inside of component and mount. 53 00:03:37,370 --> 00:03:39,320 So we're going to take that advice to heart. 54 00:03:39,350 --> 00:03:44,280 We are going to define a component did method and we are going to move our get current position call 55 00:03:44,270 --> 00:03:46,340 right here to that lifecycle method. 56 00:03:46,340 --> 00:03:51,710 We'll take you to that reactor in just a moment or Right now let's finish talking about these last two. 57 00:03:51,740 --> 00:03:57,020 Now the component did update method gets called every single time that a component is updated for any 58 00:03:57,020 --> 00:03:57,870 reason. 59 00:03:57,920 --> 00:04:03,170 Maybe our state changes or our component gets a new set of props from its parent. 60 00:04:03,230 --> 00:04:08,990 So this would be a good location to also do some data loading that needs to be done every single time 61 00:04:08,990 --> 00:04:11,000 that a component is updated. 62 00:04:11,000 --> 00:04:15,770 A good example of that would be if we wanted to make some type of network request every single time 63 00:04:15,770 --> 00:04:21,320 that a user clicks on a button or every single time that they enter some text into an input or every 64 00:04:21,320 --> 00:04:25,190 single time that we get some new props from a parent component. 65 00:04:25,190 --> 00:04:30,110 So if we want to make multiple data loading requests every time a component is updated start looking 66 00:04:30,110 --> 00:04:34,350 at composite did update now finally component will unmount. 67 00:04:34,370 --> 00:04:38,570 Now this one is a little bit more challenging to talk about because we don't have a good example of 68 00:04:38,570 --> 00:04:40,040 why we would use it just yet. 69 00:04:40,220 --> 00:04:45,650 But suffice it to say the component and or will unmount method is used anytime that we are about to 70 00:04:45,680 --> 00:04:50,320 remove a component from the screen and we need to do some cleanup after it. 71 00:04:50,360 --> 00:04:55,190 We used to use the component will on Mount method way more frequently Any time that we were using with 72 00:04:55,940 --> 00:04:58,490 using react with non re-act libraries. 73 00:04:58,490 --> 00:05:03,690 A good example would be if we were making use of say Google maps inside of a re-act application. 74 00:05:03,860 --> 00:05:08,650 But thanks to some newer features and the re-act world it doesn't get used quite as often. 75 00:05:08,990 --> 00:05:13,360 We'll we will look at some examples where we have to use component will unmount in the future. 76 00:05:13,370 --> 00:05:17,720 So right now just understand that we use this lifecycle method for doing cleanup. 77 00:05:17,730 --> 00:05:20,190 OK so one last thing I want to mention here. 78 00:05:20,330 --> 00:05:24,130 This is technically not the entire list of life cycle methods. 79 00:05:24,290 --> 00:05:30,020 There are three other lifecycle methods called should confer an update get drive state from props and 80 00:05:30,020 --> 00:05:32,110 get snapshot before update. 81 00:05:32,120 --> 00:05:37,340 The reason that I did not put them in the diagram right here is that these lifecycle methods are very 82 00:05:37,490 --> 00:05:39,370 infrequently used. 83 00:05:39,370 --> 00:05:44,780 There's only a tiny tiny subset of cases where you would ever consider implementing these lifecycle 84 00:05:44,780 --> 00:05:45,530 methods. 85 00:05:45,710 --> 00:05:50,540 And so as you were beginning your journey with react and you are learning it for the first time it is 86 00:05:50,540 --> 00:05:55,090 far easier to just ignore these and not accidentally make use of them. 87 00:05:55,160 --> 00:05:59,290 You do not want to use these lifecycle methods unless you are very sure that you have to. 88 00:05:59,300 --> 00:06:04,510 And so in general best to just ignore them until you're in a scenario where you think to yourself Oh 89 00:06:04,530 --> 00:06:09,740 well I cannot make this component work with just components and mount or did update or the constructor 90 00:06:09,740 --> 00:06:10,620 and so on. 91 00:06:10,700 --> 00:06:15,830 Once you get into that scenario that's when it is time to start researching these lifecycle methods. 92 00:06:15,920 --> 00:06:17,660 We will look at these later on site of course. 93 00:06:17,660 --> 00:06:23,030 But like I said right now it's best to just focus on this set right here and learn these very very well. 94 00:06:24,190 --> 00:06:24,510 OK. 95 00:06:24,560 --> 00:06:26,300 Now let's take a quick break here. 96 00:06:26,300 --> 00:06:31,940 When we come back the next section we're going to start to refactor our app component to make use of 97 00:06:31,940 --> 00:06:32,650 that component. 98 00:06:32,660 --> 00:06:34,100 Did mt life lifecycle method.