DEV Community

Cover image for useState() React Hooks(P1)
Danijela.js🛸
Danijela.js🛸

Posted on • Edited on

useState() React Hooks(P1)

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

Explanation:

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 :)

Top comments (7)

Collapse
 
emmabostian profile image
Emma Bostian ✨

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!!

Collapse
 
emmabostian profile image
Emma Bostian ✨

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

Collapse
 
danijelajs profile image
Danijela.js🛸

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

Collapse
 
danijelajs profile image
Danijela.js🛸

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

Collapse
 
mohsin708961 profile image
{{7*7}}

Awesome

Collapse
 
danijelajs profile image
Danijela.js🛸

Thanks!🙏😊

Collapse
 
raajsteve profile image
Rajkumar

Thanks for sharing