React useState hook
Tags: react, hooks, webdev, javascript
Published: 2022-04-12 17:05:03

Before we get into the core of the article, let's go over some key details around React hooks.

### What are Hooks?
Hooks were introduced in the React version 16.8. Hooks are the functions that let the user have access to the state and lifecycle method in the function component. Before the hooks were introduced in React, the `class` component was the only option to access the state and lifecycle methods.  Even though `class` components are no longer required, they can still be found in some legacy code.

> There are no plans to remove classes from React — we all need to keep shipping products and can’t afford rewrites. We recommend trying Hooks in new code. [React doc](https://reactjs.org/docs/hooks-faq.html#do-i-need-to-rewrite-all-my-class-components)

### Rules for using hooks
 - Hooks can only be used with function components.
 - Hooks can not be conditional like inside the `if...else`, `switch` statements.
 - Hooks must only be called at the top level of a component.

### React useState Hook

`useState` hook allows us to track the information of the component between the rendering of the component such information is called the state of the component. State is like the value of the variable declared within the function.


### How to use useState

  - Import useState hook


As `useState` hook is the named export in the React library we can easily import it by destructuring from the React.

```
import {useState} from "react"

```

- How to initialize `useState` hook

`useState` hook is initialized on the top of the component by calling in our function component.


Here again, we are destructuring the returning value.

```
const Counter = () => {

const [count , setCount ] = useState(0)

}

```


It returns the two values :
   1.  "count" is the current state.
   2.  "setCount" is the function that is used to update our state.

> Common naming convention for the `useState` hook is:

> [ variable , setVariable ] = useState() 

> Here "variable"  can be anything.

Finally, we give the initial state to the hook, which can be anything from `object`, `string`, `number`, `array`, `boolean`, or any combination of these. In our case, it is the `number`.

> Initial state =  useState(0)

-  How to read the state 

Our first returning value will be the value of the state. We can use it anywhere in our component to read the state.


```
const Counter = () => {

const [count , setCount ] = useState(0)

return (

<h1> Current value is  {count} </h1>

)}

```

- How to update the state 

We can only update the value of the state using the function returned by the `useState` hook in this case `setCount`.

> Note: Never update the state directly. Example: count= 25 .

```
function increaseCount(){

setCount( prevValue => prevValue+1 )

}

```
Combining the above all code snippets, we get the following codesandbox. Check the `App.js` file of the following codesandbox.

{% embed https://codesandbox.io/embed/usestate-hook-0u4bfp?fontsize=14&hidenavigation=1&theme=dark %}

### Update the Objects in the State

In the above section we discussed how to update the numbers in the state but as explained earlier that `useState` can take  `object`, `string`, `number`, `array`, `boolean`, or any combination of these as the state. So now in the following points, we will learn How to update the Objects in the state?
When the component's state is updated, the entire state of the component is fully overwritten. However, while using objects in the state, we simply want to update the object's specific property and leave the rest of the properties unchanged.

Let's look at how the state update entirely replaces the prior state without using the previous values from the state. 
Here in the function `withoutPrevious` we update the `lastName` property to "Bhardwaj".

```
 function User() {

  // Update without prev values

  const [user, setUser] = useState({
    firstName: "Vansh",
    lastName: "Sharma",
    city: "Delhi"
  });

//  Function to update without prev value
  const withoutPrevious = () => {
    setUser((prev) => {
      return { lastName: "Bhardwaj" };
    });
  };

return (
    <div className="App">
      <h3>
        I am {user.firstName} {user.lastName} from {user.city}.
      </h3>

      <button onClick={withoutPrevious}>
        Update last name without previous values.
      </button>
      
}

// Original  I am Vansh Sharma from Delhi.

// Output  I am Bhardwaj from.
 
```

Now let us look at how to update only the specific property of the object and retaining the actual value of all other properties.
Unlike in the above function here to update the `lastName` in the function `withPrevious` we have used the spread operator to spread the previous value in the new state and overwriting only the `lastName` property.


```
function User() {
 
  //  Update with prev values
  const [user1, setUser1] = useState({
    firstName: "Vansh",
    lastName: "Sharma",
    city: "Delhi"
  });

   // Function to update with prev values
  const withPrevious = () => {
    setUser1((prev) => {
      return { ...prev, lastName: "Bhardwaj" };
    });
  };

  return (
    <div className="App">
      
        I am {user1.firstName} {user1.lastName} from {user1.city}.
      </h3>

      <button onClick={withPrevious}>
        Update last name with previous values.
      </button>
    </div>
  );
}

// Original  I am Vansh Sharma from Delhi.

// Output  I am Vansh Bhardwaj from Delhi.

```
Check out the codesandbox of the above code here. Do check out the `App.js` file in the following codesandbox.

{% embed https://codesandbox.io/embed/objects-in-the-state-e77xfc?fontsize=14&hidenavigation=1&theme=dark %}

That's all for this blog.  Continue reading this React hook series to learn more about React hooks. In the next blog, we'll look at the 'useEffect' hook, which can be used to handle side effect functions in React.
Feel free to leave your valuable feedback in the comments below.


To learn more about React, JavaScript, and Web development, follow me on [Twitter](https://twitter.com/Vanshsh2701).

Reference: W3Schools