1 00:00:00,230 --> 00:00:06,810 We end life cycle has three categories mounting updating and a mounting mounting use the birth of the 2 00:00:06,810 --> 00:00:07,790 Capone would end. 3 00:00:07,930 --> 00:00:14,050 An update is the growth of the component and a month is the death of the component. 4 00:00:14,150 --> 00:00:19,730 And in this part we are going to talk about more in this mounting category. 5 00:00:19,770 --> 00:00:23,360 And first we are going to talk about constructor in the constructor. 6 00:00:23,370 --> 00:00:29,190 We add the console bought lot Ajay as constructor 7 00:00:31,860 --> 00:00:35,720 in the constructor you should not call the SAP state instead. 8 00:00:36,290 --> 00:00:43,740 If your component needs to use local state aside the initial state to state directly in this constructor 9 00:00:44,040 --> 00:00:48,800 and the constructor is the only place that you can assign this state by recipe. 10 00:00:48,810 --> 00:00:56,550 And in other method you should use the distance since they do not do any side effects or subscriptions 11 00:00:56,880 --> 00:00:57,990 in the constructor. 12 00:00:57,990 --> 00:01:05,130 If you really really to do this you have to use the component deep month instead and in the next part. 13 00:01:05,130 --> 00:01:08,190 We are going to talk about that derive state from parks. 14 00:01:08,220 --> 00:01:11,190 So under here we create a new method 15 00:01:14,580 --> 00:01:16,830 in order to get something pop out here. 16 00:01:16,830 --> 00:01:28,350 We have to go with the index start they ask and let's create a title and just set up title to get derived 17 00:01:28,440 --> 00:01:30,610 day from Pops. 18 00:01:30,780 --> 00:01:36,390 Only one proposal and this is not a very come on we get lifecycle method. 19 00:01:36,640 --> 00:01:41,970 It enabled the component to update is internal state as the result of changes in pops. 20 00:01:42,030 --> 00:01:49,590 It usually used in something like scroll direction based on the changing offset prompts so it is where 21 00:01:49,600 --> 00:01:55,220 we use this method and in the next method is the random method. 22 00:01:55,230 --> 00:02:04,560 So we go to the random method and we consult the law. 23 00:02:04,720 --> 00:02:13,230 We require that you have to make the random method pure because then pure member functions pure functions. 24 00:02:13,250 --> 00:02:20,910 Those do not have any side effects by making you some X TTP request and always have the same output 25 00:02:20,950 --> 00:02:26,930 wherein the same input are passed that mean you cannot use that stayed within this method. 26 00:02:27,100 --> 00:02:32,210 And at last we are going to talk about the compute on demand and so we added here 27 00:02:44,710 --> 00:02:49,490 the component each among is invoked immediately after a component is mangled. 28 00:02:49,490 --> 00:02:56,470 If you leave to load data from a remote end point this is a very good place to make some extra GP request. 29 00:02:56,480 --> 00:03:04,730 This method is good to set up any subscription but if you do that don't forget to unsubscribe with the 30 00:03:05,240 --> 00:03:08,520 component amount method that we will talk about later. 31 00:03:08,660 --> 00:03:15,460 And also we go to the county s and we also want to see the court rendering 32 00:03:21,070 --> 00:03:27,980 now as you can see the AB J as constructor one first and then you will get they get the arrived day 33 00:03:27,990 --> 00:03:37,570 from pops and then the app J s start to render and a card also render three times and at last we'll 34 00:03:38,420 --> 00:03:42,620 call the app s component deep mod method. 35 00:03:42,620 --> 00:03:49,900 You will see something very weird because it seems all one double. 36 00:03:50,240 --> 00:03:58,850 For example it should be a one only one time and but it run twice and it should be three times because 37 00:03:58,910 --> 00:04:00,800 we only have free cost. 38 00:04:00,860 --> 00:04:06,940 You should speak cause in the region Rosen rendering use strict mode when one thing in development. 39 00:04:07,640 --> 00:04:13,260 So a strict method intentionally taboo calls to construct and random efforts to better departed and 40 00:04:13,280 --> 00:04:14,530 unexpected side effect. 41 00:04:15,140 --> 00:04:18,380 So if you want to make a real one. 42 00:04:18,590 --> 00:04:21,620 We have to use a dozen built of. 43 00:04:21,650 --> 00:04:22,640 We ate. 44 00:04:22,670 --> 00:04:30,160 So how can we do that and actually please be aware that there is a we at the irrelevant twos. 45 00:04:30,290 --> 00:04:32,920 So every time you see the car is great. 46 00:04:32,930 --> 00:04:38,550 This is in this I guess is in the development build. 47 00:04:38,840 --> 00:04:41,690 So this is not a part of some build. 48 00:04:41,690 --> 00:04:49,700 If we really want to create a product and build we have to run NPM one field and then the production 49 00:04:50,150 --> 00:04:53,460 build of the we add can be found in here. 50 00:04:53,510 --> 00:05:00,550 Now you will see the color of this icon become blue rather than before is red. 51 00:05:00,890 --> 00:05:03,260 So let's take a look on the console. 52 00:05:03,260 --> 00:05:12,820 Now you can see the constructor only one only one time and other also only one one time only the cat 53 00:05:12,820 --> 00:05:17,540 has three times because there is free cast so you can see it. 54 00:05:17,540 --> 00:05:26,290 Also follow the order of the constructor get derived from pops and then we go to the render render free 55 00:05:26,330 --> 00:05:31,660 cost and then at last is the component it Monk. 56 00:05:32,180 --> 00:05:36,090 So this is a mounting life cycles of. 57 00:05:36,110 --> 00:05:36,650 We add.