What is useState() in React?

useState is a built-in React Hook that lets you add and manage state in functional components.

It returns a pair: the current state value and a function to update it.

1. Stateful Value & Setter

   • When you call const [value, setValue] = useState(initial), React keeps track of value across renders.
   • Calling setValue(newValue) schedules an update—React re-renders the component with the new state.

2. Initial State

   • The argument you pass to useState becomes the initial state on the first render.

   • You can also pass a function to lazily compute a heavy initial value:

     JS

3. Immutable Updates & Batching

   • State updates via the setter don’t mutate the existing state; they create a new state value.
   • React may batch multiple state updates in event handlers for performance.

4. Functional Updates

   • If the new state depends on the previous one, pass a function to the setter:

     JS

   • Ensures you always update based on the latest value, avoiding stale closures.

5. Multiple State Variables

   • You can call useState multiple times to manage independent pieces of state.
   • This encourages splitting complex state into smaller, more focused variables.