What is useState Hook in React
Tags: react, codenewbie, javascript, webdev
Published: 2021-01-04 02:59:07


**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: 

```javascript
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: 

```javascript
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: 

```javascript
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: 

```javascript
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

```javascript
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: 

```javascript
<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. 

<hr>
Show your support. 
<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> 
<img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>
<hr>
💻 Thanks For Reading | Happy Coding 🥂