👉 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 :

➡️ 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.

➡️ 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.

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.

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

Add an Array

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.