In this blog we will understand useState react hook, the working of it, why it is used, how to manages our component state, and how useState manages data.

###  First let us see the format to write useState in our component -

```
export default function MyComponent() {
  const [count, setCount] = useState(0); // initial value set to 0

  return (
    <div>
      <p>This is a P tag</p>
    </div>
  );
}
```

Our Component is a simple JavaScript function and we are exporting it as a default value. We will learn more about default and named export in other blog, for now do understand that this is the format do define our react component. 

For your understanding, you can think of a variable in a function and assigning a value to it, but useState has more functionalities which we will discuss further. UseState is a function itself. 

So this can be thought of a variable in our function MyComponent named count which has a inital value of  0.


```
const [count, setCount] = useState(0);
```

### Let us understand the format of useState -

As I mentioned earlier that useState is a function and it returns an array, and that array has two things, first – a variable name (count in our case) which holds the value and second – is a setter function (setCount in our case) that provides us the functionality to set the value of our state, in our case set the value of count.

#### Before moving further let us see what is **array destructuring** to better understand the syntax of setState hook of react -


```
function f1() {
   return [5, 6];
}

// let abc = f1();

// console.log(abc);
// it will log [5,6]

// we can also write it using array destructuring as ->

// const [value1, value2] = abc;

// console.log(value1); // 5
// console.log(value2); // 6

// this whole things can also be written as ->

const [value1, value2] = f1()

console.log(value1); // 5
console.log(value2); // 6

```

So the syntax of useState is also the same, it uses javascript array destructuring technique to hold the return value of useState.

**Array destructuring technique is used to unpack the value from arrays.**

Understand that we were returning an array from our function f1 


```
function f1() {
  return [5, 6];
}

```

and we choose to name our variables after desrtucturing as value1 and value2, but we could have named it anything,


```
const [value1, value2] = f1()
```

this is again true for our react useState, we can name it anything, like -


```
const [count, setCount] = useState(0); 
const [a, setA] = useState(0);
const [address, setAddress] = useState(0);

```

here react will create 3 states for our component and will hold unique values in each of them, each state value is independent of each other.

In our function f1 we were returning two numbers value but in useState the first is variable which holds the value but  the second is itself a function which helps us to update the value of our state.


### Now Let us understand why we need useState and the working  of it -

**It is very impotant to understand that whenever we call the setState function of our useState the component re-renders, that means in our case our function MyComponent will run again.** 

Lets us understand by an example - 



```
function f2(){
  let count = 10
  count ++
  return count
}

const abc = f2()
console.log(abc);

```
This is a simple javascript function and here we are using let inside our function. Now evertime we call the function f2 we will get output as 11. 

This is how javascript works, when we call a function it loads in memory / call stack and perform the task, so we can say that it is not holding the previous value of data and re assigning it to 10 everytiime we call our function f2 again. 

We earlier saw that when we use the setter function of useState, our component re runs, and so we can say that our component may loose all the updated values of state if we don't use setState.

With useState the updated value is maintained during re-renders or re-run of the component.

So even if we have 3 states in our applications and we updated the 2 states previously, updating the third state will not re assign the initial value to our first two states, it will hold the most recent updated values for them.

## Things to remeber till now is -
- UseState is a function that returns an array
- Returned array has two things: First - the variable that holds the value. Second - a setter function that helps to update the state
- UseState setter function is a async function
- Using setter function we can update the values of our state
- Eveytime we use setter function, our component re-renders
- Usestate holds the previous values of all states during re–renders

Why component re-renders on state change ? 

This happens just to show the most recent values of our state in our html elements, on the UI, without manually re loading the UI. To keep the UI in sync with the component state.

### How REACT manages to keep the recent value of state druing re-renders?

React stores the state value outside our component function and not inside it. 
React re-injects the value on every render using react internal functinalities.
React keeps state in Fibre Nodes (internal react objects)

Fibre is a internal data strucure of react and Fibre tree can be considered as a parallel map of our react application where each node in the fibre tree is an object representing our component.
We will study more about Fibre when we see React re-rendering cycle in our next blogs.

And finally  we can call our setCount function and pass a value to it and that value will our now our updated value of the count. 
We do this by - 


```
setCound(10)
```
now since we used the setter function of useState our component wil re-render and now the count will have a value 10 instead of 0.  


```
const [count, setCount] = useState(0);
```
The initial value passed here that is 0 is updated to 10 now.

## Few Important Points -

- **SetState is an async function call**, that means doing console.log(state) will not immediatly show the new value but after a new render. 

- **SetState happens in Batch**, that means calling setState multiple times at once will not set or change the state multiple times. for ex -  

```
<button
  onClick={() => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }}
>
Button
</button>

```
calling this 4 times inside a button click function will not change it values 4 times, but will happen in batches, and since all are the same values, our state will only be changed once, the value will increment by 1 only  once and not 4 times.

- **State updates can also be functional**, that means the new value is dependent on previous value. in such case we pass a callback to setstate function, for ex -  

```
setCount(prevCount => prevCount + 1)
// safe for race conditions
```

so if I re write our previous state change of 4 times in this way, we can get the expected output.

```
<button
  onClick={() => {
    setCount((d) => d + 1);
    setCount((e) => e + 1);
    setCount((f) => f + 1);
  }}
>
Button
</button>

```

here all setState functions are depending on the previous value and so we well get the expected output of 3. 

- **SetState in the case of reference data type** behaves differenly, we know in javaScript reference data type is only objects but we will try to understand it with arrays and objects. 

**To Note -** react state is immutable that means we should not directly change / mutate the state value manually. but we should always create a new copy of the original data and make changes to it and then finally set the new copied data as the new state.

And to ask why ? is because when we directly mutate the state, the reference of the data remains same and then react considers it as the same data without any changes to it ans so react does not re-render our state. 

**Again to note** - React check the refernce value of the data to check whether the state change happened or not. so if the reference remains the same, the re-render will not happen. 

This below code is wrong - 

```
export default function MyComponent() {
  const [listOfNum, setListOfNum] = useState([1, 2]);

  console.log("count", listOfNum);

  return (
    <button
      onClick={() => {
        listOfNum.push(5);
        setListOfNum(listOfNum);
      }}
    >
      Button
    </button>
  );
}

```
here the reference remains the same and so the re render will not happen, the correct way is below -


```
<button
  onClick={() => {
    setListOfNum([...listOfNum, 5]);
  }}
>
  Button
</button>

```

this is how we should deal with the array data type. 

Now lets take an object example - 

The following code is wrong 


```
export default function MyComponent() {
  const [userData, setUserData] = useState({ name: "abc", age: 10 });

  console.log("count", listOfNum);

  return (
    <button
      onClick={() => {
        setUserData({ name: "xyz" });
      }}
    >
      Button
    </button>
  );
}

```
When we do setstate this way it delete all other properties of our objects and only update it with name. in our case in the updated userData object we did not get the age property. 

The correct way is - 


```
<button
  onClick={() => {
    setUserData({ ...userData, name: "xyz" });
  }}
>
  Button
</button>
  );

```
Do check the **spred operator (...value)** used in both cases, it is used to do a **shallow copy** of the original data, importantly create a new reference of the data which react can see as a new data (new reference) and perform re renders. 

- **We can lazily initialize our state** - 

We know that inital value of state is used only when the component loads for the first time. 

```
function getSomeValue(){
// compute heavy data
return  heavy data
}

const [count, setCount] = useState(getSomeValue());

```
in above case getSomeValue function will execute on every re-render even though react does not need the return values on re-render, it already has a state value. during first load it is good but during re render it does heavy computations task which is not required. 

So we can rewrite the above code in such a way that getSomeValue runs only once during the initial load of the component. for that we can do -

```
const [count, setCount] = useState(()=>getSomeValue());

```
here it is a function call and will only run on the first load. 

we can use lazy initialization of our state for any blocking, synchronous task. 

I hope you all understood what is useState hook in React.js. 

Do also check the [useEffect](https://www.ranuvijay.me/blogs/react-useeffect-how-to-use-it) blog

And other [React.Js](https://www.ranuvijay.me/blogs/categories/react-js) topics

Thanks


useState is used to maintain the state of our data in our React component, here we will learn what is usestate and how it is used.

What is useState in react.js

Contact Me

I want to hear from you