How to work with useState Hook in React

React hooks are very useful functions provided in React functional component and one of them is useState hook. We have also covered other hooks like useEffect, useContext.

What is useState Hook

Let’s imaging you need a place to store some counting and want the component view to update automatically when this value is updated. In this kind of context, we can make use of a stateful variable to hold such a role.

useState Hook helps us to create a stateful variable together with a function to update the state. This state is then associated with the component it is placed in.

This hook returns and array of variable where the first one is the placeholder for the state and the second variable is a function we can call to update that very state.

In the example below, ‘fruitCount’ is the variable to store the variable state and ‘setFruitCount’ is the function we will use to update the state. 100 is the initial value we will set to the variable state.

import React, { useState } from 'react';

const [fruitCount, setFruitCount] = useState(100);
setFruitCount(50);

Official useState documentation.

How to declare useState Hook

Above, we have seen a very simple example of a declaration. But we can also have other variable types that it can automatic infer to at the time of assignment.

import React, { useState } from 'react';

// Number Data Type
const [fruitCount, setFruitCount] = useState(100);
const [weight, setWeight] = useState(56.7);

// Object Data Type
const [fruitsBasket, setFruitBasket] = useState({apple: 5, orange: 10});

// Array Data Type
const [numberList, setNumberList] = useState([1,2,3]);

// String Data Type
const [fruitName, setFruitName] = useState('Some Awesome Fruit');

console.log(fruitCount); 
// 100
console.log(weight); 
// 56.7
console.log(fruitsBasket); 
// {apple: 5, orange: 10}
console.log(numberList); 
// [1,2,3]
console.log(fruitName); 
// Some Awesome Fruit

How to update a state

The is multiple ways a state can be updated but the most common we can see is where user triggering some changes. In the below example, we have 2 button that will increment or decrement the fruitCount via button click. This will in-turn update the state base on existing state value.

import React, { Fragment, useState } from 'react';

const fruitComponent = () => {
  // Set the fruitCount to the default value of 100

  const [fruitCount, setFruitCount] = useState(100);

  // Increment fruitCount by one each time when this function is triggered. The display will update automatically after this update is completed

  const increment = () => {
    setFruitCount(fruitCount + 1);
  };

  // Decrement fruitCount by one each time when this function is triggered. The display will also update automatically

  const decrement = () => {
    setFruitCount(fruitCount - 1);
  };

  return (
    <Fragment>
      <span>Number of fruits: {fruitCount}</span>
      <button onClick={() => increment()}> + </button>
      <button onClick={() => decrement()}> + </button>
    </Fragment>
  );
}

By making use of other es6 techniques, we can also update complex data structure like an object. Here is an example when we want to only update the pear count and changing the other counts.

const [fruitsBasket, setFruitBasket] = useState({apple: 5, orange: 10, pear: 20});


setFruitBasket({
  ...fruitsBasket,
  pear: 30
});

Conclusion

With the use of useState hook, we can we do wonders to our web application knowing that the view will automatically be update after the state change.