What is useState Hook in React

useState Hook in React - A complete guide to managing states with useState Hook in react.

What is useState hook?

You're already familiar with the concept of states in react (Ig not, refer this series).

Earlier we could declare a state variable only in the class-based component. The useState hook allows us to use states in a Function Component.

WHat does caalling useState() do ?

In simple terms, it declares the "state variable".
Syntax:

import React. { useState } from 'react'; 

const App = () => {
    // Declare a new state variable, which we'll call "apples"
    const [apples. setApples] = useState(0); 

    // Other codes...
}

The argument passed to useState Hook ("0" in this case) is the initial state. This essentially means apples = 0. The setApples is a function that can be used to change the value of apples.

What is happening here?

Whenever we call useState, it returns an array with exactly two elements. The first one is the state variable and the second is the function to update the state variable. So we can also write:

1 const apples = useState(0); 

In this case, apples are an array with exactly two elements. We can access the store variable as apples [0] and the functions to update apples [0] and the function to update apples [0] as apples [1]. Since we know that useState always return exactly two elements, we can use array destructuring to get:

1 const [apples, setApples] = useState(0); 

It is not necessary to name the second element as setApples. we can call it whatever we want. But the convention is to name it like that as it makes the code much readable.

But why do we need a function to update the state variable?

In vanilla JavaScript you can update the variable as:

let apples = 0; 
apples - apples + 1; 

But this is not allowed in React. In react, whenever you want to update the apples variable (or any other state variable), you need to call the setApples (or whatever you name it) function.

How to update the state variable?

Let's see this example

import React, { useState } from "react"; 

const App = () => {
    // Declare the state variable 
    const [apples, setApples] = useState(0); 
    //Function to handle the update
    const appleHandler = () => {
        const appleHandler = () => {
            setApples(apples + 1); //Update the number of apples
        }

        return (
            <div>
             {/*Display the number of apples*/}
             <p>{apples} Apples</p>
             <button>onClick={appleHandler}> Increase Apples</button>
            </div> 
        ); 
        //Button
    }; 
}; 

export default App; 

Here you can see that we are using a button (line 16) to call the reference of appleHandler (you can give any name you want) function, which calls the setApples function to update the value of apples.

Note that onClick event calls only the reference of appleHandler function. We cannot use parenthesis ( like: appleHandler() ), nor we can use setApples directly to update the state, because that will execute the function as soon as the DOM is rendered and send the code into infinte loop. We only want to execute appleHandler when the button is clicked. We can also do this by using an anonymous function as:

<button onClick={() => setApples(apples + 1)}>Increase Apples </button>

Line 16 in the previous examples can be replaced by this above code and will work the same. However, it is a good practice to use handler functions to change the state.