The useState hook in React JS for state management

Last update: 01 - 11 - 2023

What is a state in React JS?

A state is a default value of a variable or a component of our application. It can be global (a state that will cover the whole app) or individual (a state that will affect a specific component).

The default values of a state can be any data type: strings, numbers, objects, arrays or booleans.

This data can have any type of information depending on the case or it can start with an "empty" value that can be filled depending on the user's interaction. Like filling out a form or a click event.

{/* Examples */}

const [string, setString] = useState("")
const [string2, setString2] = useState("Default values as a string")

const [number, setNumber] = useState(0)
const [number2, setNumber2] = useState(10)

const [object, setObject] = useState({})
const [object2, setObject2] = useState({prop:"value"})

const [array, setArray] = useState([])
const [array2, setArray2] = useState([index1, index2])

const [boolean, setBoolean] = useState(true)

1. 1️⃣ The information flow is unidirectional

This means that the data to be passed between components will only be passed from father to son using Props.

2. 2️⃣ Changing a state generates a render in the component where it is used.

Thanks to the Virtual DOM, React will detect the change in the specific component where the change was made and will not re-render the entire page for that change.

3. 3️⃣ States are not directly modified

For this purpose, we use the function provided by the useState hook.

4. 4️⃣ A component can be stateless

It can display information statically with HTML and CSS.

How to change a state?
Using the useState hook to define a state in a React JS application

To use the useState hook it must be imported in the component where we are going to use it.

import { useState } from 'react'

Within the component, forceUser in this case, the use of the state is defined with the following syntax:

const forceUser  = ( ) => {

   const [lightSaber, setLightSaber] = useState("")

   return (
      <>
      </>
   )

}

export default forceUser

The first index of this unstructured array (lightSaber) is the variable containing the value of the component's state.

The second index is the function that will modify the state of the variable. By convention it is named with the prefix "set" plus the name of the variable we want to modify (setLightSaber).

The function useState represents the initial value of the component state, in this example it is initialized as an empty string ("").

⚠NOTE:⚠ The correct way to modify the state of a component is by using the state function (setLightSaber("jedi")) and not by direct assignment (lightSaber = "jedi").

Now to make clear the state change in React let's see this example complete with the lightsaber where the default state is "off", "jedi" takes the color blue and "sith" takes the crimson color. 😁

import React from 'react'
import { useState } from 'react'
import './lightsaber.css'

const forceUser  = ( ) => {

   const [lightSaber, setLightSaber] = useState("off")

   const offSaber = ( ) => {
      setLightSaber("off")
   }

   const jediSaber = ( ) => {
      setLightSaber("jedi")
   }

   const sithSaber = ( ) => {
      setLightSaber("sith")
   }

   return (
      <>
         <div className={lightSaber}></div>

         <button onClick={offSaber}>Off</button>
         <button onClick={jediSaber}>Jedi</button>
         <button onClick={sithSaber}>Sith</button>
      </>
   )

}

export default forceUser

In this case the styles of the lightsaber are changed by states.

⚠NOTE⚠: Using the state function directly will create an infinite rendering loop. For this case we used another function that calls the state function in order to make the change in this example.

Output: