# useState hook

the useState is basically a function but in react we refer to useState as a hook. This is the function which is implemented internally but when called basically returns an array which consists of 2 things:
1) Is the value
2) Is a function

The function helps in changing the value.

Why use useState?

Ok consider that we are printing 100 on the web browser.

If we just take a simple variable as let number=100;
then in that case the number 100 will be printed on the screen. But now if we change the value of the number to lets say 200 inside the component this change will not reflect in the browser. This is because the browser doesn't know that the value has changed

For such purposes and to make react stateful we use the useState component. Now if we mention let [dhruv,useDhruv]=useState(100); Then in that case if we change the value of the dhruv using the useDhruv function then react will notice the change and reload or we can say mount the component again with the updated value. 

Lazy initialization with useState:

Till now we have seen that lets say we have a hook
let [dhruv,setDhruv]=useState(1);

Here inside the useState hook we have passed a primitive value. In general we can pass any value such as arrays objects strings etc. The unique thing here is that we can also pass functions inside the useState hook.

But why we need to pass functions inside.

It is useful when the first time the useState is initalized and heavy computation is performed . Let us better understand it with the help of example:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647963507694/IeNa7eqZO.png)


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647964113940/EML9MZGEB.png)

In the above example when the p tag is clicked again and again every time the console.log is executed because function re-renders every time the state changes . However what if the console.log was a heavy computational task. In such case it would be inefficient to run it repeatedly. Thus in order for the console.log to only execute the first time we use the function as a parameter


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647963969986/xVpG7hulh.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647963951126/b7JJmfTdU.png)

Thus as the function is passed the statement will only be executed once 

We can also pass a function inside the useDhruv function

This syntax goes like this:
useDhruv((oldvalue)=>
{
   return oldvalue+1;
}

Now the question comes on why we need to use the function as an argument inside the useDhruv when the same task can be simply done by the useDhruv(dhruv+1) syntax.

One thing to always remember and is in fact very very important is that we use the functional argument when the new state depends on the old state

Now lets understand why?

Consider the following example:


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647280937218/_VJJWDJTS.png)

In the above code technically as the p tag is clicked first useDhruv should be run and the value of dhruv should update to 2.Then the setTimeout function should execute the callback function after 1 second and the value of dhruv should update to 3. 

However this doesn't happen. This is because as we have passed the variable dhruv in the useDhruv of the setTimeout it just takes the previous value and not the updated value and thus in this case as the previous value is equal to 1 it updates to 2 and thus the component is seen such that it has no changes.

To solve this issue we use the functional component as follows:


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647281244810/UK9E3Efk5.png)

Now when the button is clicked then the value first changes to 2 and then to 3


One more problem:


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647281665902/FNvVqeSHB.png)

In the above case when the button is clicked only the obj1 is now displayed on the screen with the value 2 because we have changed the object completely and now the object just contains one key

The solution for this is :

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647282007279/ycmC2pt9x.png)