Cover image for useState() React Hooks(P1)

useState() React Hooks(P1)

danijelajs profile image Danijela.js🛸 Updated on ・1 min read

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:

Alt Text


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:

Alt text of image

I hope I helped at least one person :)

Posted on by:

danijelajs profile



FrontEnd developer React.js/JavaScript/CSS/HTML/ Redux/JQuery/Firebase/Next.js/Git/etc. 📩𝙙𝙖𝙣𝙞𝙟𝙚𝙡𝙖𝙛𝙪𝙨𝙠𝙤@𝙮𝙖𝙝𝙤𝙤.𝙘𝙤𝙢


Editor guide

Nice post!! You can also combine the react default and named imports like this!

import React, {useState} from “react”

I’m on my phone so sadly no back ticks. But nice job!!


Also might be worth noting that the hooks have to be the first thing in the function :) that confused me when I was starting!


You are right, I'll add that to the article! 😊


Thanks! Yeah, I know, it's just "a thing" I do without even thinking about it. 😅




Thanks for sharing