DEV Community

loading...
Cover image for What is useState Hook in React

What is useState Hook in React

rahxuls profile image Rahul ・3 min read

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...
}
Enter fullscreen mode Exit fullscreen mode

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); 
Enter fullscreen mode Exit fullscreen mode

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); 
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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; 
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.




Show your support.








💻 Thanks For Reading | Happy Coding 🥂

Discussion

pic
Editor guide
Collapse
ghadersalehi profile image
ghader-Salehi

I think the outer appleHandler method it's not required...