Introduction to useState

I've been working with React Hooks for some time now and I thought about writing a quick and simple post on how to use useState.

Let us get started

First of all, we need to import useState from react

import React, { useState } from 'react'

Take into account the following function:

import React, { useState } from 'react'

function Steps() {
  return (
    <div>
      Today I've walked 0 steps.
    </div>
  )
}

Alright, we want to control the amount of steps we've walked today, for that we can use the useState method, let us take a look:

import React, { useState } from 'react'

Take into account the following function:

import React, { useState } from 'react'

function Steps() {
  const [steps] = useState(0)

  return (
    <div>
      Today I've walked {steps} steps.
    </div>
  )
}

What are we doing here?

• Creating a new state called steps and its default value is 0
• We're printing our steps value in our function

Control

Now we want to control the value of steps, with useState you can destructure another prop, so, currently we have const [steps], we will get another method from there, let us change that to const [steps, setSteps].

Now we've introduced setSteps, with this we can control the value of steps, let us create a button to handle an onClick function to set the steps to 10, try it out

import React, { useState } from 'react'

function Steps() {
  const [steps, setSteps] = useState(0)
  const increaseSteps = () => setSteps(10)

  return (
    <div>
      Today I've walked {steps} steps.

      <button onClick={() => increaseSteps()}>
        Increase steps
      </button>
    </div>
  )
}

When you click on our new button the steps should increase to 10, great.

We can do better

We might want to increase the steps by 1, not 10. You might be thinking it's as simple as changing 10 with 1, give it a try, I'll wait.

It only goes to 1 right? 🤷‍♂️

Nothing to worry, we'll fix it right now, change the increaseSteps() function:

const increaseSteps = () => setSteps(steps + 1)

What are we doing? We're getting the value of steps and increasing it by one.

You can also create another button to decrease the value, similar function but using -1:

const decreaseSteps = () => setSteps(steps - 1)

Result

I've spiced things a little bit with styling and an emoji 🙂

You can check the final code in this Codesandbox

If you liked this post consider following me on Twitter, appreciate it 🙂