useState() Hooks In react , How it Works ?
Tags: webdev, javascript, programming, beginners
Published: 2024-06-09 07:05:43

👉 **useState() Hooks In React**

useState() hooks is a function that allows you to add a state in functional components. When you call useState() hooks, it returns an array with two elements.

➡️ **State Variable:** The current value of the state.

➡️ **State Updater Function:** This function allows you to update the state variable.

**👉 Example :** 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tv0gu74pdvno7y15bz6.png)

➡️ **state:** The current state value.

➡️ **setState :** A function to update the state.

➡️ **initialState :** The initial value of the state.

**Key Points 👍 :** 

➡️ **Initialization:** When the component first renders, useState(initialState) sets up a state variable (state) and a function (setState) to update that state. The initialState can be any type of value: number, string, object, array, etc.

➡️ **State Variable:** The state variable holds the current state value. React keeps track of this variable internally and ensures it stays consistent across re-renders.

➡️ **State Setter Function:** The setState function allows you to update the state. When you call this function with a new value, React schedules a re-render of the component, during which the state variable is updated with the new value.

➡️ **Re-rendering:** When the state is updated, React re-renders the component to reflect the new state. This means the component function is called again, but the state variable will now hold the updated value.

➡️ **Multiple State Variables:** You can use multiple useState hooks within a single component to manage different state variables independently, providing greater flexibility and readability.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtn1p64d53fjq0ifld1p.png)

➡️ **Functional Updates:** Sometimes you need to update the state based on the previous state. In such cases, you can pass a function to the setState function. This function receives the previous state and returns the new state.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czb3yqymdxjfcxesxyh9.png)

By using the functional form of setState, you ensure that the state update is based on the previous state, which is particularly important when updates depend on the previous state value

➡️ **Lazy Initialization:** If the initial state is the result of an expensive computation, you can pass a function to useState. This function will be called only once to compute the initial state.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7l5bqailp2uj381tll6.png)

By using this approach, you ensure that the expensive computation to determine the initial state is performed only once, rather than on every re-render of the component.

👉 **Handling Objects and Arrays**

When dealing with objects or arrays, you should remember that useState does not automatically merge updates. Instead, you need to manage merging state updates manually.

_**Updating an Object**_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kukag22qy8jhxr1dpki0.png)

_**Add an Array**_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfaffoz5w4jpq1iyoagt.png)

useState is a versatile and powerful hook for managing state in functional components, providing an easy-to-use API that aligns with React's declarative nature. It simplifies state management, enhances readability, and contributes to more maintainable and scalable React applications.