Okay.
In this video I will be talking about hooks and I will explain what a hooks are and how we can actually
use it.
Hooks are very new additions to react and there is a big hype on the hooks now because they allow you
to use something like you can always use in a class components, but inside our functional component.
So basically that opens a completely new world and I will show you how that works in this video.
So first thing, what I will do is I will create a new component here.
Let's name it for example, numbers.
JS And I will create a new component there and let's clean it up a little bit.
So we have App.js here and we have a lot of things here.
So instead of printing all of that, I will just create a, I will just import new component.
So I will clear it for now here.
And let's create a new component here to.
Show how the hooks works, I will create a normal function component.
So I will do.
Import, react.
And we've done that before.
And then I will do from React.
Like that.
And then I will create a function.
I will create an arrow function here.
So I will do a constant and I can do numbers is equal to and then arrow function like that.
It can be also with a function keyword.
It doesn't really matter.
So here I can do return.
H one numbers and then what I can do is export.
Default numbers.
I like that.
And then I will import it.
So here I can import, I will just copy that and that will be numbers from numbers like that.
So we have numbers here and I will just input it inside here.
So what we have is we have that numbers here and there is nothing complicated in there.
So we just load our new component in the app.js.
I will close the app.js here and on that component we can work on the hooks and I will show you how
the hooks works.
Basically, as I said before, Hooks allows you to use similar things as we can use in the component.
In the functional component.
This is functional because in fact we have a function and this is normal variable which represents a
function.
So I could have the the function keyword here and use it as a function.
But I said that before that in the function components, I can't use the state for example, but in
the newest version of React, we can actually use state in functional component using hooks.
So how can we do that?
First we need to import.
Youth state.
And that's a function that we can import also from React and use it in our functional component here.
So what I will do is I will use a state and that's a function.
So what I can do with that function, basically I can provide a value that I will use in my state.
So for example, let's say I will have an array of few numbers so I can do one.
Two and let's say three.
So we have that and that is that's allowing me to use a state and it will be similar to the state class
component.
So what this means is we can actually initiate state on that component.
So how can we use it?
At the moment there is no way we can use it.
We just initialize that.
So what we can do is we can actually create a constant, an array and we can assign this to state.
So what we can put in that array, we can deconstruct whatever is coming back from this state.
And there is a two things that are coming back from state, the initial value or the current value,
and also a method to update the value.
So what we can have here is we would like to keep our numbers here so I can do numbers and that's our
current value of our state.
And another method will be set numbers so we can name it whatever we like.
It doesn't have to be.
I will make a little bit more space here.
It doesn't have to be numbers or set numbers.
Basically what I'm trying to name, I'm using convention that the first value in the array is the number
or whatever represents the data.
And and the second one is set because we will use that function.
Actually, this is one is function to set something to update this state.
Okay.
So how can we actually use it?
Let's create a new map.
So I will refer to numbers and then I will map through the result of this.
And let's say it's a number and then we'll go through all the records there.
We've done that before.
So what we need to do is we need to print some values.
So I will return.
Let's say we can return.
H4 and inside we can do a number that what I want to do and but we need to have a wrapping container
here.
So we'll just wrap it inside the div.
So I will have it like that.
It's not complaining anymore.
And then we have that.
We should put the key here.
But at this point it's not important.
So what we are having here is we loop through our numbers and that numbers is actually coming from this
function use state and we provide the initial value one, two, three.
So I will save it.
Now let's see what we have.
So in fact, we have one, two, three printed here.
So our state is working fine.
So how can we actually update our state if we have it here?
So this is the way we refer to our state, which is number because that's the constant.
It is the first object in our array.
This is the current state and the second one is the method to update it.
So let's create a new method.
So we'll say add number.
And I will make an arrow function here.
Like that.
So we have a new method here.
I can actually do a constant.
And so we have that method.
I will create a button.
And then I do on click.
I can say add a number.
So we'll unclick we will trigger this function.
And in this function we can do something.
So what can we actually do?
I can use set numbers and that's going to be our function to actually update the state.
So what we need to do is we need to in here, we need to provide some kind of value.
So if I will provide a value here that will be the same value we have array here.
So I will provide an array and let's say I will do four.
So if I will update it now we have one, two, three and then I have button.
Actually I should put something here.
So add a number.
So we have had our number here.
If I click it here, you can see my entire state has been changed to four.
And why that happened because I use set numbers and that's my new array.
So what I need to do is basically I need to get whatever it's there and concatenate the four at the
end of it.
So what I can do is I can use a newest edition of the JavaScript so I can spread the numbers into an
array and add four at the end.
So if I will do it now, if I will do add number, you can see four is here.
So basically what we are having in this simple example is a full use state example of react hooks.
So going through that again, what we have, we need to import use state from React.
Then we can use functional components and we'll use use state function in the state function, we can
provide an initial value of that.
This can can come from anywhere, it can come from props or whatever you like.
And then and actually this assign we have a deconstruction here.
So the first element is the current state and the second one is the method to update it.
And then we can in our return, we can use the current state like here, that's the variable name we
have here.
And also we can use method this one to do it, but we need to remember that if we would like to update
it something, we also need to provide the initial value so we can use this one and then add something
to it.
Or we can first working on the numbers.
Once we have it, then we can put it in the numbers method.
So in fact we are not really limited to only one state.
What I could have is I could have another one, which is, for example, letters.
And set letters use state.
A, B, C, and so on.
At the moment we see that green thing because we don't use it and we just initialize it.
But this use state can be used with different pieces of information and you will have it one block of
information for, for one kind of data you would like to store in your state.
So this is how it's working.
There is a big hype on this.
React hooks now.
So it might be very convenient to know that this is another method to deal with the state and you don't
need to use a class component anymore.