В React setState не обновляет состояние сразу, потому что обновления состояния могут быть асинхронными и объединяться для оптимизации производительности — это называется батчинг (batching).

Почему так происходит:

React группирует несколько вызовов setState в один, чтобы избежать лишних повторных рендеров.
Обновления состояния ставятся в очередь и применяются вместе, после чего происходит один рендер.

Что такое батчинг:

Это процесс объединения нескольких обновлений состояния и эффектов в одну операцию.
Позволяет повысить производительность, уменьшая количество рендеров.

Пример:

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

  function handleClick() {
    setCount(count + 1);
    setCount(count + 2);
    // Оба вызова будут объединены, и итоговое значение будет count + 2, а не count + 3
  }

  return <button onClick={handleClick}>{count}</button>;
}

Чтобы получить актуальное состояние при нескольких обновлениях, используют функцию обновления:

setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 2);

Таким образом, батчинг — это механизм оптимизации, который делает обновления состояния более эффективными, но требует учитывать асинхронность setState.

Почему setState не обновляет значение сразу? Что такое батчинг?