Hooks are special functions that let you “hook into” React features. They don’t work inside classes, just in functional components.
useState() lets you add state to a functional component.
- Always use hooks at the beginning of a React function.
- Don't call hooks inside loops, conditions or nested functions.
- You can use multiple useStates and variables.
- The only argument we pass to useState() is the initial value.
- useState() is returning the variable and the function that updates it.
Now, a basic counter example:
We have to import the useState() hook.
As you can see, we have a variable called count, and a function that updates that variable, setCount(). The initial value of the count is 0.
We are displaying the count in a h1 tag.
The first button has a click event that fires the setCount() function, which will add 1 on every click.
The second button is using the same function on click, but this time, it's going to subtract 1.
And this is the end result:
I hope I helped at least one person :)