Почему значение state не обновляется сразу после setState?

Почему setState асинхронен?

React использует асинхронное обновление состояния для повышения производительности. Вместо того чтобы перерисовывать компонент после каждого вызова setState, React собирает все изменения в один пакет (batching) и применяет их за один раз. Это позволяет избежать лишних перерисовок и улучшить отзывчивость интерфейса.

Как это работает на практике?

Когда вы вызываете setState, React не сразу изменяет state. Вместо этого он добавляет запрос на обновление в очередь. После завершения текущего обработчика событий (например, клика) React обрабатывает все накопленные запросы и обновляет состояние, вызывая повторный рендер компонента.

// Пример: состояние не обновляется сразу
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // Выведет 0, а не 1
  };

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

Как получить актуальное состояние?

Если вам нужно выполнить действие после обновления состояния, используйте:

• Колбэк в setState (для классовых компонентов): this.setState({ count: this.state.count + 1 }, () => console.log(this.state.count))
• Хук useEffect (для функциональных компонентов): useEffect(() => { console.log(count); }, [count]);
• Функциональную форму setState, если новое состояние зависит от предыдущего: setCount(prev => prev + 1);

Вывод

Асинхронность setState — это особенность React, направленная на оптимизацию. Понимание этого механизма помогает избежать ошибок при работе с состоянием и правильно использовать колбэки или эффекты для обработки обновлений.