## Live Example (Try It First)

Click the link to explore how `useState` works with batching, closures, and functional updates.
Try clicking quickly and observe how the counter behaves in different scenarios. [Open the live example](https://www.valentinmarko.com/examples/hooks/usestate)

## What is **useState** ?

**useState** is a built in React hook that always you to add state to a functional component. It returns an array containing two values:
1. The current state value.
2. A function that allows you to update that state

Example:


```jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

```

In this example:

- **count** is the current state value.
- **setCount** is the function used to update it.
- the component re-renders every time you call **setCount**.

## How does useState work?
When React renders your component for the first time, it initializes the state with the value you pass to **useState**. On subsequent renders, React preserves and returns the most recent state value, even if the component’s logic runs again.

Each time you update the state using the setter function , React triggers a re-render so your UI always reflects the latest state.

In React, state updates are **batched**. This means that react groups multiple setState calls (which happen during the same task and its microtask) togheter before performing a re-render. This batching helps improve performance by avoiding unnecessary renders.

So when batching happens, it’s recommended to use functional updates if the next state depends on the previous state. This ensures React uses the correct, most recent value.

Using state directly (can lead to incorrect results when batching)


```jsx

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
  // Both updates use the old value of count (0)
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
    {/* On click, count will only increase by 1 instead of 2 */}
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}
```

Because of batching, both updates use the same old value of count, so React only increases it by 1.

Using functional updates (uses the latest value each time)
```jsx
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // Each update receives the latest count value
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      {/* On click, count will correctly increase by 2 */}
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}
```
Here, React uses the most up-to-date value for each update, so the counter correctly increases by 2 after one click.

Incrementing inside setTimeout without functional updates:

```jsx
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1); //  uses the 'count' from when Counter last rendered
    }, 1000);
  };

  return (
    <div>
      {/* Even if you click 5 times quickly (within the 1-second timer interval), 
      it will only go up by 1 */}
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}
```

**What happens:**

- Each time the component renders, React runs the **Counter()** function ,this creates a new closure that holds the current value of **count**.
- When you click, the **setTimeout** callback is created inside that closure, so it “remembers” the **count** value from that render (for example: 0).
- If you click 5 times quickly (within the 1-second timer interval), you create 5 timers — but all of them remember the same old value (0).
- After 1 second, all the timeouts run and call setCount(0 + 1), so the final value is 1, not 5.

You can explore how these examples work by [clicking here](http://localhost:3000/examples/hooks/usestate)

#### Batching across diferent situations

1) Same task ( inside an event handler) →  Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(c => c + 1);
    setCount(c => c + 1);
    // Batched — React will render once
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```

2. Microtask ( inside a Promise or after await) → Still Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = async () => {
    setCount(c => c + 1);
    await Promise.resolve();
    setCount(c => c + 1);
    //  Still batched in React 18+ — one render
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```
3. New task (setTimeout) →  Not Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(c => c + 1);

    setTimeout(() => {
      setCount(c => c + 1);
      //  New task → triggers another render
    }, 0);
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```

4. Multiple updates inside the same timeout →   Batched

```jsx
function Example() {
  const [count, setCount] = useState(0);

  const handleClick = () => {

    setTimeout(() => {
      setCount(c => c + 1);
    setCount(c => c + 1);
      
      //  In the same timeout task → batched togheter
    }, 0);
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
}
```


Managing State in React: useState Hook

How useState hook works in React, how to manage component state, common patterns and best practices.

useState hook in react

Managing State in React: useState Hook