Simple `useState()` in React

Simple useState() in React

This is a hands-on code tutorial on creating react components and using hooks.

View the final product here

Little knowledge of react or just the basics will take you through the tutorial.

Clone my repo to go through the code snippets or simply start by creating a new react app using the create-react-app.

Creating A New React App:

# create a new react app
npx create-react-app usestate-react
# move into the new app's directory
cd usestate-react
# start the app to see of everything is okay
npm start

Cloning My Repo

GitHub Repo Link

Cloning using git:

git clone [e-mail]:ChrisAchinga/usestate-demo.git

Cloning using gh:

gh repo clone ChrisAchinga/usestate-demo

The Counter Component

In the src/components create a new file, Counter.js.
To see the component in action, we have to import it in the App.js file in src folder.

At the top of the file (src/App.js), add the import statement:

import Counter from './components/Counter'

Now update the App() function to use the Counter component:

const App = () => {
  return (
    <>
      <main>
        <Counter />
      </main>
    </>
  )
}

PS: I love using arrow functions and fragments in react

Your final App.js file should look like the one below here:

import Counter from './components/Counter'
import './App.css'

const App = () => {
  return (
    <>
      <main>
        <Counter />
      </main>
    </>
  )
}

export default App

Let's create our Counter component that will have a button, which when clicked, updates the initial number by 1.

Let's do this line by line: (get it, kind of a joke though)

First, we import useState() from react:

import { useState } from 'react'

Since we will need to update the button every time it is clicked, we will need react hooks to do that.
The useState() is simply a react hook

Secondly, we create the component function that will display the button:

const Counter = () => {
  return (
    <>
      <button>0</button>
    </>
  )
}

Don't forget to export the module at the bottom of the file:

export default Counter

Run the app to see if everything is upto set.

There should be a big button with a small zero (LOL - No Styles intended), just like this:

Third step: let's set up the hook in the Counter component:

A useState() hook syntax would be simply:

const [state, setstate] = useState(initialState)

It's a simple destructuring syntax.

The state will be the initial value set by the parameter in the useState(), which in this case a Zero (0). The setstate will be a function that will be executed to update the state, after an event or a trigger.

So back to our file: src/components/Counter.js let's update with the useState() hook:

const [initial, updater] = useState(0)

We set the initial to 0 (useState(0)) and then we have the function that will be executed when the button is clicked to update the initial value to the number of times it has been clicked, the updater in this case.

Your Counter.js file should be:

import { useState } from 'react'

const Counter = () => {
  const [initial, updater] = useState(0)
  return (
    <>
      <button>0</button>
    </>
  )
}

export default Counter

Fourth step is to create the updater fucntion, which is an easy one here:

While still in the Counter() function, just above the return keyword, add the following function:

const clickEvent = () => updater(initial + 1)

This is same as :

function clickEvent() = {
    updater(initial + 1)
}

So the clickEvent() function will use the updater that we declared in the hook. It simply take the initial value and adds one to it.

Stuck? Don't worry, this is how your file should be like up to now:

import { useState } from 'react'

const Counter = () => {
  const [initial, updater] = useState(0)
  const clickEvent = () => updater(initial + 1)
  return (
    <>
      <button>0</button>
    </>
  )
}

export default Counter

Now let's update our button to use the hook:

We'll make the button more dynamic by removing the hard coded 0 and make it more static. Here's how:

<>
  <button>{initial}</button>
</>

We are replacing the 0 with a variable that will be updated every time we click the button.

Our final step will be adding the onClick function, which will be telling the button what to do when it is clicked.

What we want to happen is for the clickEvent() function to run every time we click the button.

So here's what we do:

<>
  <button onClick={clickEvent}>{initial}</button>
</>

We are telling react to run the clickEvent() function every time we click on the button.

Our Counter component is now ready!

import { useState } from 'react'

const Counter = () => {
  const [initial, updater] = useState(0)
  const clickEvent = () => updater(initial + 1)
  return (
    <>
      <button onClick={clickEvent}>{initial}</button>
    </>
  )
}

export default Counter

So in a summary:

We created a component, added a button that shows the number of times it's been clicked, using the useState hook. Cool isn't it?

NOTE:

I set my js environment linting with prettier not to use semi-colon