WEBVTT 00:01.360 --> 00:01.960 Okay. 00:01.960 --> 00:08.950 In this video I will be talking about hooks and I will explain what a hooks are and how we can actually 00:08.950 --> 00:09.520 use it. 00:09.550 --> 00:16.660 Hooks are very new additions to react and there is a big hype on the hooks now because they allow you 00:16.660 --> 00:24.670 to use something like you can always use in a class components, but inside our functional component. 00:24.700 --> 00:31.360 So basically that opens a completely new world and I will show you how that works in this video. 00:31.360 --> 00:36.250 So first thing, what I will do is I will create a new component here. 00:36.250 --> 00:38.650 Let's name it for example, numbers. 00:39.670 --> 00:46.030 JS And I will create a new component there and let's clean it up a little bit. 00:46.030 --> 00:49.720 So we have App.js here and we have a lot of things here. 00:49.720 --> 00:57.130 So instead of printing all of that, I will just create a, I will just import new component. 00:57.130 --> 00:59.230 So I will clear it for now here. 00:59.230 --> 01:02.690 And let's create a new component here to. 01:03.530 --> 01:07.870 Show how the hooks works, I will create a normal function component. 01:07.870 --> 01:08.830 So I will do. 01:08.860 --> 01:10.720 Import, react. 01:10.720 --> 01:12.580 And we've done that before. 01:14.620 --> 01:18.640 And then I will do from React. 01:20.150 --> 01:20.930 Like that. 01:20.930 --> 01:23.150 And then I will create a function. 01:23.330 --> 01:25.460 I will create an arrow function here. 01:25.460 --> 01:32.960 So I will do a constant and I can do numbers is equal to and then arrow function like that. 01:33.110 --> 01:35.960 It can be also with a function keyword. 01:35.990 --> 01:37.760 It doesn't really matter. 01:37.760 --> 01:40.340 So here I can do return. 01:47.960 --> 01:53.690 H one numbers and then what I can do is export. 01:56.800 --> 01:58.990 Default numbers. 02:01.250 --> 02:01.970 I like that. 02:01.970 --> 02:03.630 And then I will import it. 02:03.650 --> 02:13.870 So here I can import, I will just copy that and that will be numbers from numbers like that. 02:13.880 --> 02:20.180 So we have numbers here and I will just input it inside here. 02:20.180 --> 02:25.700 So what we have is we have that numbers here and there is nothing complicated in there. 02:25.700 --> 02:29.960 So we just load our new component in the app.js. 02:29.990 --> 02:38.000 I will close the app.js here and on that component we can work on the hooks and I will show you how 02:38.000 --> 02:39.020 the hooks works. 02:39.020 --> 02:47.060 Basically, as I said before, Hooks allows you to use similar things as we can use in the component. 02:47.060 --> 02:48.470 In the functional component. 02:48.470 --> 02:54.170 This is functional because in fact we have a function and this is normal variable which represents a 02:54.170 --> 02:54.740 function. 02:54.740 --> 02:59.600 So I could have the the function keyword here and use it as a function. 02:59.600 --> 03:06.330 But I said that before that in the function components, I can't use the state for example, but in 03:06.330 --> 03:12.180 the newest version of React, we can actually use state in functional component using hooks. 03:12.180 --> 03:13.950 So how can we do that? 03:13.950 --> 03:15.690 First we need to import. 03:17.630 --> 03:19.310 Youth state. 03:20.110 --> 03:27.580 And that's a function that we can import also from React and use it in our functional component here. 03:27.580 --> 03:32.980 So what I will do is I will use a state and that's a function. 03:33.250 --> 03:42.700 So what I can do with that function, basically I can provide a value that I will use in my state. 03:42.700 --> 03:48.790 So for example, let's say I will have an array of few numbers so I can do one. 03:50.180 --> 03:52.880 Two and let's say three. 03:57.100 --> 04:03.820 So we have that and that is that's allowing me to use a state and it will be similar to the state class 04:03.820 --> 04:04.720 component. 04:04.900 --> 04:12.440 So what this means is we can actually initiate state on that component. 04:12.460 --> 04:14.350 So how can we use it? 04:14.380 --> 04:16.360 At the moment there is no way we can use it. 04:16.390 --> 04:18.070 We just initialize that. 04:18.070 --> 04:26.890 So what we can do is we can actually create a constant, an array and we can assign this to state. 04:26.890 --> 04:33.010 So what we can put in that array, we can deconstruct whatever is coming back from this state. 04:33.010 --> 04:39.340 And there is a two things that are coming back from state, the initial value or the current value, 04:39.340 --> 04:43.050 and also a method to update the value. 04:43.060 --> 04:53.620 So what we can have here is we would like to keep our numbers here so I can do numbers and that's our 04:53.620 --> 04:55.870 current value of our state. 04:55.870 --> 05:05.390 And another method will be set numbers so we can name it whatever we like. 05:05.420 --> 05:06.920 It doesn't have to be. 05:06.920 --> 05:08.870 I will make a little bit more space here. 05:09.290 --> 05:11.840 It doesn't have to be numbers or set numbers. 05:11.840 --> 05:21.440 Basically what I'm trying to name, I'm using convention that the first value in the array is the number 05:21.890 --> 05:24.020 or whatever represents the data. 05:24.020 --> 05:27.950 And and the second one is set because we will use that function. 05:27.950 --> 05:33.710 Actually, this is one is function to set something to update this state. 05:34.130 --> 05:34.610 Okay. 05:34.610 --> 05:37.160 So how can we actually use it? 05:37.160 --> 05:40.250 Let's create a new map. 05:40.250 --> 05:45.830 So I will refer to numbers and then I will map through the result of this. 05:45.830 --> 05:51.710 And let's say it's a number and then we'll go through all the records there. 05:51.710 --> 05:53.150 We've done that before. 05:53.150 --> 05:57.320 So what we need to do is we need to print some values. 05:57.320 --> 05:58.730 So I will return. 05:59.330 --> 06:01.460 Let's say we can return. 06:02.960 --> 06:15.500 H4 and inside we can do a number that what I want to do and but we need to have a wrapping container 06:15.500 --> 06:15.860 here. 06:15.860 --> 06:18.500 So we'll just wrap it inside the div. 06:24.910 --> 06:26.770 So I will have it like that. 06:27.460 --> 06:29.070 It's not complaining anymore. 06:29.080 --> 06:31.210 And then we have that. 06:31.240 --> 06:32.770 We should put the key here. 06:32.770 --> 06:35.010 But at this point it's not important. 06:35.020 --> 06:43.150 So what we are having here is we loop through our numbers and that numbers is actually coming from this 06:43.150 --> 06:46.710 function use state and we provide the initial value one, two, three. 06:46.720 --> 06:47.770 So I will save it. 06:47.770 --> 06:50.830 Now let's see what we have. 06:50.860 --> 06:54.520 So in fact, we have one, two, three printed here. 06:54.520 --> 06:57.190 So our state is working fine. 06:57.190 --> 07:01.690 So how can we actually update our state if we have it here? 07:01.690 --> 07:06.280 So this is the way we refer to our state, which is number because that's the constant. 07:06.280 --> 07:09.760 It is the first object in our array. 07:09.790 --> 07:14.740 This is the current state and the second one is the method to update it. 07:14.740 --> 07:17.050 So let's create a new method. 07:17.050 --> 07:20.650 So we'll say add number. 07:22.610 --> 07:24.830 And I will make an arrow function here. 07:27.980 --> 07:28.490 Like that. 07:28.490 --> 07:30.040 So we have a new method here. 07:30.050 --> 07:32.120 I can actually do a constant. 07:32.660 --> 07:35.090 And so we have that method. 07:35.090 --> 07:38.090 I will create a button. 07:40.010 --> 07:42.050 And then I do on click. 07:44.320 --> 07:47.740 I can say add a number. 07:49.820 --> 07:52.910 So we'll unclick we will trigger this function. 07:52.910 --> 07:55.460 And in this function we can do something. 07:55.460 --> 07:57.430 So what can we actually do? 07:57.440 --> 08:07.030 I can use set numbers and that's going to be our function to actually update the state. 08:07.040 --> 08:14.270 So what we need to do is we need to in here, we need to provide some kind of value. 08:14.270 --> 08:19.070 So if I will provide a value here that will be the same value we have array here. 08:19.070 --> 08:23.660 So I will provide an array and let's say I will do four. 08:23.960 --> 08:28.520 So if I will update it now we have one, two, three and then I have button. 08:28.520 --> 08:30.530 Actually I should put something here. 08:30.530 --> 08:32.960 So add a number. 08:35.210 --> 08:36.890 So we have had our number here. 08:36.890 --> 08:44.090 If I click it here, you can see my entire state has been changed to four. 08:44.090 --> 08:49.160 And why that happened because I use set numbers and that's my new array. 08:49.160 --> 08:56.390 So what I need to do is basically I need to get whatever it's there and concatenate the four at the 08:56.390 --> 08:57.080 end of it. 08:57.080 --> 09:04.190 So what I can do is I can use a newest edition of the JavaScript so I can spread the numbers into an 09:04.190 --> 09:06.140 array and add four at the end. 09:06.140 --> 09:11.900 So if I will do it now, if I will do add number, you can see four is here. 09:12.050 --> 09:22.130 So basically what we are having in this simple example is a full use state example of react hooks. 09:22.430 --> 09:28.490 So going through that again, what we have, we need to import use state from React. 09:28.490 --> 09:35.370 Then we can use functional components and we'll use use state function in the state function, we can 09:35.370 --> 09:38.340 provide an initial value of that. 09:38.340 --> 09:43.170 This can can come from anywhere, it can come from props or whatever you like. 09:43.170 --> 09:48.000 And then and actually this assign we have a deconstruction here. 09:48.000 --> 09:54.180 So the first element is the current state and the second one is the method to update it. 09:54.180 --> 10:02.370 And then we can in our return, we can use the current state like here, that's the variable name we 10:02.370 --> 10:03.090 have here. 10:03.090 --> 10:09.510 And also we can use method this one to do it, but we need to remember that if we would like to update 10:09.510 --> 10:15.990 it something, we also need to provide the initial value so we can use this one and then add something 10:15.990 --> 10:16.740 to it. 10:16.740 --> 10:19.680 Or we can first working on the numbers. 10:19.680 --> 10:24.120 Once we have it, then we can put it in the numbers method. 10:24.120 --> 10:28.080 So in fact we are not really limited to only one state. 10:28.080 --> 10:34.290 What I could have is I could have another one, which is, for example, letters. 10:35.730 --> 10:40.350 And set letters use state. 10:42.260 --> 10:46.700 A, B, C, and so on. 10:46.730 --> 10:51.680 At the moment we see that green thing because we don't use it and we just initialize it. 10:51.680 --> 10:59.360 But this use state can be used with different pieces of information and you will have it one block of 10:59.360 --> 11:04.260 information for, for one kind of data you would like to store in your state. 11:04.280 --> 11:06.540 So this is how it's working. 11:06.560 --> 11:08.540 There is a big hype on this. 11:09.650 --> 11:11.420 React hooks now. 11:11.420 --> 11:18.860 So it might be very convenient to know that this is another method to deal with the state and you don't 11:18.860 --> 11:21.290 need to use a class component anymore.