Hi, today we are going to talk about one of the most important hooks that React has, which is the useState, and the one that is most commonly used if the project has interactivity and you need to update the state of a specific component. First of all you may be wondering
but what are hooks : they are special functions that allow us to use React features with functional components.
what is useState : it is a hook that allows us to add a state to a functional component.
let’s take a better look at an example so you can understand it better.
we import the css styles to center and color it
we create a CounterApp constant with an arrow function that returns with the return a div to which we add an app class to style it.
we add a h2 for the title in this case it says counter
an empty h3 there will go the number that will show on screen our counter, as we are inserting javascript we put it between braces {}.
we put a button with a one class to give it style and to this we put a +1 to know what the button does.
we close the app div
finally we have to export the default counterApp to be able to visualize it.
with this we already have the basic structure of our counter now we are going to add more functionality.
to our button we add an onClick event that will make that when we give click to the button +1 it fires the function handelAdd.
the constant handelAdd has an arrow function in which for now I pass the event and it returns a console.log with the event.
now it is time to work with the hook useState
- import this react hook in the following way:
now that we have already imported useState inside the constant CounterApp we are going to add a constant, that constant is going to be an array with 2 important elements we open brackets and inside we pass counter and setCounter we close brackets we put an equal to useState we open brackets and we put zero that is the initial number of our state (zero is going to be the initial number of counter), we close brackets.
The code would look like this:
Let’s explain this, what is each thing:
counter : the value that we want to use as the state, for example our application has a state that is counter that is a state that we are going to save, we are going to use and we are going to update.
setCounter: is a function that will allow us to update it.
Always by convention set is used, for example if we have
const [name, setName] = useState();
with the function setCounter we will be able to update the counter number.
now what we want to do when the +1 button is clicked in this case we want to increase the counter by one (I want to add 1) and then I want to assign that value to the state of my component (my application).
how can we do it, with the two elements that we have just created, in this way:
we use this function we call it, what value we are going to pass as an argument, the new value that we are going to assign to the counter, in this case it is going to be counter +1 we are going to update it and this call to the function is going to update that state and it is only going to update what is necessary, due to this change in the user interface, all this update happens automatically, it re-renders what needs to be rendered.
Now we have our button working, let’s add one to reset it to zero.
let’s add a new button with the class one so that it has the same styles that the previous button also we will put an onClick event to which we will pass the function handelReset.
let’s call the function setCounter, this is the function that we have to call every time we want to update the counter in this case as argument to make a reset of our counter we will pass zero.
what happens if we want to make a subtract button, in this case it would be equal to the addition button
I hope it helps you to understand a little bit more about the React useState hook,
if you like it, follow me for more programming content and share to reach more people.
Thanks
Top comments (0)