WEBVTT 00:01.440 --> 00:02.040 Okay. 00:02.370 --> 00:11.130 In this movie, I will show you how we can use lifecycle methods and what the lifecycle methods are. 00:11.250 --> 00:16.650 So basically, wherever we render, we use our component. 00:16.650 --> 00:20.400 So like in this case, this is class based component. 00:20.400 --> 00:26.400 So the function has no way to use any of the state or lifecycle methods. 00:26.400 --> 00:28.200 So I will close this. 00:28.200 --> 00:32.340 And as I said, the functions are for you simple use case. 00:32.340 --> 00:33.000 So whatever. 00:33.000 --> 00:35.130 We need to have something more complex. 00:35.130 --> 00:45.570 We'll use the class based one and whatever we use like this one, this is our component inside our app.js 00:45.570 --> 00:49.410 and then we can hook into the lifecycle methods. 00:49.410 --> 00:53.510 And if I will start typing here component you can see here. 00:53.520 --> 00:56.010 Com Ponent. 00:57.810 --> 01:01.270 We have a few options and this. 01:02.380 --> 01:07.660 Matters here that built in methods inside this component. 01:07.660 --> 01:13.600 So they are available straight away and we can implement them if we need them. 01:13.600 --> 01:16.360 So basically, what are these? 01:16.390 --> 01:24.490 We have different life cycles of our components, so component might be render and might be attached 01:24.490 --> 01:33.760 to our page and the attach later on and we'll have different things that will happen during his life. 01:34.300 --> 01:43.930 So we have, for example, did catch did mount did update will mount will receive props will unmount 01:43.930 --> 01:45.310 and will update. 01:45.310 --> 01:52.300 So basically that is depend when this com this function will be trigger. 01:52.300 --> 02:02.810 So if we want to have something after our component was mount and did mount, then we can use this this 02:02.810 --> 02:09.320 function did mount and then we can do something about it and then we can for example, will receive 02:09.350 --> 02:09.800 props. 02:09.800 --> 02:17.540 So once we receive props, we can set this, for example, stage to props and so on and so on. 02:17.540 --> 02:22.880 And then it will be the same when actual our component is dying. 02:22.880 --> 02:28.040 So whatever it will be detached from, the page will have, will mount and so on. 02:28.370 --> 02:38.420 So for example, I will use Componentdidmount here and that's a normal function, the method inside 02:38.420 --> 02:39.230 our class. 02:39.230 --> 02:51.710 And let's say I can do the way I've done this before, set state, I will clear my name so my state 02:51.710 --> 02:55.190 is let's do it like this. 02:55.190 --> 03:00.380 So my state at the beginning of of this component, life is empty. 03:00.380 --> 03:07.670 So if I will save it now and I can see here not anything the field because the name is empty so I can 03:07.670 --> 03:14.480 do componentdidmount and whatever this component will mount, I can do set state name to. 03:17.360 --> 03:19.460 My name, for example. 03:20.870 --> 03:22.820 And you can see my name is here. 03:22.820 --> 03:29.300 So component mount first and then this trigger, this function. 03:29.300 --> 03:36.920 And then inside that function I set my state name to my name and it is here. 03:36.920 --> 03:47.540 So all that lifecycle methods component like you can see here, that's different stages of our life, 03:47.540 --> 03:54.350 of our component and you can use it depends on what functionality you would like to achieve. 03:54.380 --> 04:03.020 So very common practice is if, if you need to fetch some data from from external API or something, 04:03.020 --> 04:05.990 whatever, you will mount your component. 04:05.990 --> 04:11.990 You can do it with Componentdidmount because you know you have all the elements in place and then you 04:11.990 --> 04:18.540 can fetch the data here and then you can fetch the state and then state will be reflected on the page. 04:18.540 --> 04:25.380 So all of that method, sometimes you need to if you use the observable, for example, you need you 04:25.380 --> 04:32.820 can subscribe to some observable when you did mount and then you unsubscribe when you when you will 04:32.820 --> 04:35.280 unmount so components. 04:35.280 --> 04:38.940 So you will do will unmount like this. 04:40.200 --> 04:49.920 So you might have a soup subscribe here and then you later on when you will just about to kill that 04:49.920 --> 04:50.430 component. 04:50.430 --> 04:52.260 You can do unsubscribe. 04:55.460 --> 04:55.970 Like that. 04:55.970 --> 04:59.750 That's, uh, of course, pseudocode, because we don't have any observables here. 04:59.750 --> 05:05.350 But that will be an option, a use case for that component lifecycle. 05:05.360 --> 05:14.720 So as I said here, we can hook it to a lifecycle events and then we can use it in the way we want to 05:14.720 --> 05:15.380 have it. 05:15.410 --> 05:17.300 That's how we can implement it. 05:17.300 --> 05:19.460 And you don't have to do it. 05:19.460 --> 05:24.830 And then you just create that method whenever it's useful for you.