“useState”: The most commonly used hook in React

Disclaimer:

I recently started my journey in React and I haven’t used class components in react. So my views are strictly for the functional components in react.

---

useState

useState is one of the most commonly used hooks in react, and also one of the most important ones. It enables you to add state function components. Calling useState inside a function component generates a single piece of state associated with that component. It’s especially useful for local component states, but larger projects might require additional state management solutions.

---

What is state? and why is it important?

In any react application there is a need to maintain some kind of a value, be it whether the button was clicked or not, the menu toggle is open or not, is the user logged in, etc. That value can be considered as a state for that particular object (button, menu toggle, user logged, and so on). Since we work with various react components which are rendered depending on the logic, we need to store that state value somewhere which isn’t affected by a new render, that’s where useState comes into the picture.

usestate syntax

Before we start using useState, we need to import it from react using import { useState } from ‘react’
Once imported we can simply use the hook by calling it: useState()

---

What are the arguments of useState?

useState takes the initial value of the state as an argument. This argument value can be of any type (boolean, string, number, or object). The initial value will be assigned only on the initial render. You can pass it directly as shown:
const buttonState = useState(‘off’)

---

What does useState return?

useState returns an array with two values:

• Current value of the state
• A function which can be used to update the state

We generally use array destructing to get both the values,
const [stateValue, setStateValue] = useState(‘off’)

---

How to update the state value?

We can use the useState provided function to update the set value: setStateValue(‘on’)
Here I updated the initial state value of ‘off’ to ‘on’ using the provided function.

However, the update function doesn’t update the value right away. Rather, it enqueues the update operation. That is why, if you try to print the updated value right after the update function, you will still see the old value as the state value. After, re-rendering the component, the argument of useState will be ignored and this function will return the most recent value.

You can also use the previous value to update the state, you just need to pass a function that receives the previous value and returns a new value:
setStateValue(prev => prev + value)

---

Using object as a state variable

As mentioned above you could assign any type of initial value to useState. We will be diving deeper into using objects as a state value since this can be a little confusing sometimes. There are two things you need to keep in mind while using an object as a state value:

• The importance of immutability
• The updating function returned by useState doesn’t merge objects

About the first point, if you update the state with the same value as the current state then react will not trigger a re-render.

And about the second point, consider you defined the initial state as {message:’ ‘, id: 1} but when you update the state, you only updated message value (because that’s what you need). React will not merge the old id value to the new state. In fact, the new state will look like this {message: ‘new message’}, the id property will be lost. So irrespective of what needs to be updated, you need to update the entire object in order to preserve the values. This makes useState very complicated to use when handling multiple states. We can create individual states as per our needs, but there are better options for that.

---

Feel free to drop in a comment if you would like to see some examples on how to use useState in practice. If you are interested in understanding how useReducer (more powerful state management in react) works, then you can read my post about it here.