WEBVTT 00:01.360 --> 00:09.500 Okay, so we already know how to replace some of the functionality with our functional components. 00:09.520 --> 00:14.960 The functionality we have in the class components, but we never had it before with a functional. 00:14.980 --> 00:19.150 So one crucial part of this is what is state. 00:19.420 --> 00:22.240 So we know how to use it when you have use state. 00:22.240 --> 00:26.680 So what else is missing on our functional component? 00:26.950 --> 00:34.540 In the class component, we have an event so we can hook to when a component did mount, for example, 00:34.540 --> 00:37.610 and on component update and so on and so on. 00:37.630 --> 00:44.470 In the functional component, we never had that before, but with hooks we have that ability to actually 00:44.470 --> 00:47.000 control it in a little bit different way. 00:47.020 --> 00:53.290 In my opinion, you have more control with this and I will show you in this video how we can use it. 00:53.290 --> 01:00.770 So first thing, what we need to do is we need to import another function from React and it will be 01:00.770 --> 01:04.070 use effect. 01:04.190 --> 01:08.600 So that function will be similar to what we have here. 01:08.600 --> 01:10.790 So I can put it there. 01:11.990 --> 01:13.520 Use effect. 01:13.820 --> 01:20.120 And then basically this effect, it accepts a callback that means a function. 01:20.120 --> 01:26.900 So I will do an arrow function here and then we will have it. 01:26.900 --> 01:29.720 So we don't need to pass anything here. 01:29.720 --> 01:39.260 What I would like to do is I will just show you if I will console log, let's say we put. 01:40.600 --> 01:46.000 Our youth affect triggers? 01:49.150 --> 01:52.540 So we are here in the component at the moment. 01:52.540 --> 01:56.310 We have a warning and then some other things. 01:56.320 --> 02:03.430 This is coming because we don't have a unique key in our map here, so we'll leave it as it is. 02:03.430 --> 02:09.220 So we're supposed to have something unique and we could add an ID to this or random number. 02:09.220 --> 02:10.390 It doesn't really matter. 02:10.390 --> 02:12.610 What I will do is I will just remove it for now. 02:12.610 --> 02:15.250 And I would like to illustrate you something else. 02:15.250 --> 02:19.150 So we have that use effect, a method in place. 02:19.150 --> 02:24.130 If I will add a number here you can see our use effect triggers. 02:24.130 --> 02:29.350 If I will click another one, you can see this is twice why this is happening. 02:29.350 --> 02:38.770 So every time I change something on my state, one of the states, it will trigger this effect that 02:38.770 --> 02:39.610 means. 02:41.840 --> 02:42.980 I can have it here. 02:42.980 --> 02:47.690 So let's, uh, do something similar here. 02:47.690 --> 02:57.770 And so if I will do that, will make it better to illustrate what is happening at letter. 02:58.610 --> 03:00.890 And then we'll have letters. 03:00.890 --> 03:12.590 So basically, and I will just do similar thing as we had with the numbers, but with a different state. 03:15.260 --> 03:22.460 So if I will come back here, I have other number and other letter. 03:22.490 --> 03:26.690 At the moment I don't display that numbers yet. 03:26.810 --> 03:27.740 That letters. 03:27.740 --> 03:27.950 Yes. 03:27.950 --> 03:31.370 So let me just grab this. 03:32.190 --> 03:35.940 And then maybe I can do it here. 03:35.940 --> 03:39.350 And then I will have letters. 03:40.380 --> 03:43.590 Letter and then letter. 03:43.980 --> 03:45.780 So we'll have it like that. 03:46.290 --> 03:48.140 We'll have numbers and letters. 03:48.150 --> 03:49.230 So I'm here. 03:49.230 --> 03:50.400 I will just remove this. 03:50.430 --> 03:51.600 We can ignore it for now. 03:51.600 --> 03:54.810 So what I can do is I can add a number and add a letter. 03:54.810 --> 03:57.360 So this will add a letter. 03:58.240 --> 04:01.270 Actually we are adding that to our wrong one. 04:01.270 --> 04:07.720 So I will go here and quickly set numbers which shouldn't use this one. 04:07.720 --> 04:11.590 We should use set letters when we use add letters. 04:11.590 --> 04:14.440 So once again, my mistake. 04:15.160 --> 04:15.820 Clear on that. 04:15.820 --> 04:21.430 So if I add a number, I have four and you can see our function trigger. 04:21.430 --> 04:25.300 But if I will add this one, you can see our function trigger. 04:25.300 --> 04:34.780 So basically whatever I change, no matter of which one state this function use effect triggers. 04:34.780 --> 04:39.730 So basically that also triggers when we have a new application. 04:39.730 --> 04:47.350 So whatever our component mode, this is also triggering here you can see our use effect triggers. 04:47.350 --> 04:50.680 So the first time it renders, it prints it. 04:50.680 --> 04:53.650 Every time we change something, it prints it. 04:53.650 --> 04:58.120 So this is basically a working as an update. 04:58.120 --> 05:01.090 So whatever we update our state, we have it. 05:01.090 --> 05:07.600 But the good thing here is that we can control when it's actually trigger. 05:07.600 --> 05:11.590 So this function here, this callback, it's a first argument. 05:11.590 --> 05:19.810 What we can do is we can provide a second argument and I can provide, as you can see here, an array. 05:20.140 --> 05:28.610 So if I will provide an array like this in that array, I can specify which states I should listening 05:28.630 --> 05:29.500 for updates. 05:29.500 --> 05:31.690 If I will provide nothing here. 05:31.690 --> 05:38.260 If I will save it, I can go here and you can see this has been trigger once. 05:38.380 --> 05:41.560 If I will click here, it's not anymore. 05:41.560 --> 05:43.780 If I click here, it's not anymore. 05:43.810 --> 05:45.910 That means it triggers only one. 05:45.910 --> 05:49.300 So that function we have use effect. 05:49.330 --> 05:54.850 It's the same effect as we component did mount first time. 05:54.850 --> 05:55.570 It triggers. 05:55.570 --> 05:58.460 We run wherever it's here and then it's over. 05:58.460 --> 06:00.530 It's not going to listening for anything. 06:00.530 --> 06:03.560 So let's say we would like to trigger this one. 06:03.560 --> 06:10.160 So use our effect triggers only on numbers, right? 06:10.160 --> 06:15.740 So if I want to have it trigger on numbers, what I will need to do is I will take this numbers and 06:15.740 --> 06:17.030 put it array here. 06:17.030 --> 06:23.720 So in this way I use effect only on change numbers. 06:23.930 --> 06:29.960 So if I'll go back here, you can see here this is trigger because we render our numbers. 06:29.960 --> 06:32.300 If I click letter, nothing happen. 06:32.300 --> 06:36.080 If I click number, you can see this triggers on numbers. 06:36.080 --> 06:46.340 So in this use effect, you can specify which values you will be listening for to update and use this. 06:46.340 --> 06:48.380 So I can specify another one. 06:48.380 --> 06:49.250 Letters. 06:51.590 --> 06:52.040 Like that. 06:52.040 --> 06:56.230 So at the moment I'm listening for numbers and letters changes. 06:56.240 --> 07:05.780 So this is trigger because I have it on the first go and it's render and then number triggers letter 07:05.780 --> 07:12.590 triggers so you can see how handy that can be if you want to update something. 07:12.590 --> 07:18.320 So whatever you will have here and whatever change that you will have to change the data. 07:18.320 --> 07:21.050 You can also change it based on some external factors. 07:21.050 --> 07:28.010 For example, you fetch the API, it's getting back and you feel that then you will have a youth effect 07:28.010 --> 07:28.490 to do it. 07:28.490 --> 07:33.920 Or you're looking for a user input that will filled in the fields. 07:33.920 --> 07:38.210 And once this is done, then you can do something with the data. 07:38.390 --> 07:44.840 At the moment we have a dummy console.log here, but in here you can use whatever you want. 07:44.870 --> 07:49.190 The options are limitless at this point because you catch the event. 07:49.670 --> 07:50.570 It's something strange. 07:50.570 --> 07:57.780 You have an access to this state or this state or wherever it is on this component, and you can actually 07:57.780 --> 08:02.730 hook into the event the same way as we hook it with our class based component. 08:02.730 --> 08:05.790 So use effect and use stage. 08:05.790 --> 08:12.840 That's all together, all the functionality that were missing on the functional components and there 08:12.840 --> 08:14.010 are available now. 08:14.010 --> 08:19.650 So we can use basically the same functionality as we had on the class component in the functional.