loading...
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

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

Discussion

pic
Editor guide
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🛸 Author

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

Collapse
danijelajs profile image
Danijela.js🛸 Author

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🛸 Author

Thanks!🙏😊

Collapse
raajsteve profile image
Rajkumar

Thanks for sharing