The useState Hook!

Before React implemented the Hooks, changing state was only possible inside class components.
From React 16.8, we can change the state inside a functional component.

React offers many built-in Hooks:

1. useState,
2. useReducer,
3. useEffect

and much more!

This article will show you how to use the useState Hook inside a functional component.

Before continuing, make sure that you know at least some basics of React and Javascript ES6.

The useState() Hook is just a simple Javascript function that returns two values.

We can store any value type( array, numbers, strings, objects, booleans ).

To make the concept easier to understand, I will build a simple App where the data changes when the user clicks on a button.

1. CREATE A FUNCTIONAL COMPONENT COUNTER.JSX

In React you can define a functional component using the arrow function syntax

const Counter =  () => {
   return(
     <div></div>
   )
}

or like this

function Counter(){
    return(
      <div></div>
    )
}

In this article, I will use the arrow function syntax.

1. IMPORT THE useState HOOK FROM THE REACT LIBRARY

import React, { useState } from ‘react‘

Inside the Counter component, let’s create a button and a paragraph.

The button will increment the counter inside the paragraph tag.

  return(
    <div className=‘App‘>
      <p>Counter:</p>
      <button>Increment Counter</button>
    </div>
  )

3. SET THE STATE

Now that we have our component, we can write the useState() Hook, using the array destructuring ES6 syntax.

The first value( counter ) is the current state, the second value ( setCounter) is the function that we will invoke to update the state.

The argument inside the useState is set to 1, which means that the counter now is equal to 1.

  return(
     const [counter,setCounter] = useState(1)
    <div>
      <p>Counter:{ counter }</p>
      <button>Increment Counter</button>
    </div>
  )

4. OUTPUT AND INCREMENT THE STATE

If you are familiar with javascript, this might be easy for you.

First of all, we pass the onClick events to the button.
The onClick event take a function where we use the setCounter to update the initial counter.

Remember: in React we use curly braces to evaluate a Javascript expression, a variable, a sum of two numbers, a function, and so on.

const Counter = () => {

const[counter,setCounter] = useState(1)

return(
    <div>
      <h1>useState Hook – React</h1>
      <p>Counter: { counter }</p>
      <button onClick={() => setCounter( counter + 1 )}>Increment 
      </button>  
    </div>
  )
}

In our case counter was equal to 1, and we just added + 1 to increment it by one.

Click on the button and you will see!

Good to Know:

You can't use Hooks inside a class components

You can set as much useState as you need inside your component