Для чего используется функциональное обновление состояния (передача функции в setState с аргументом prev), а не просто count + 1?

Проблема асинхронности setState

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

Как работает функциональное обновление

Функциональная форма setCount(prev => prev + 1) передает в setState функцию, которая получает предыдущее состояние (prev) в качестве аргумента. React гарантирует, что этот prev будет самым актуальным значением на момент выполнения обновления, даже если было несколько последовательных вызовов.

Пример с множественными вызовами

// Неправильно: может привести к неверному результату
const handleClick = () => {
  setCount(count + 1); // count = 0
  setCount(count + 1); // count = 0 (все еще 0 из замыкания)
  // Итог: count = 1, а ожидалось 2
};

// Правильно: каждый вызов использует актуальное значение
const handleClick = () => {
  setCount(prev => prev + 1); // prev = 0 -> 1
  setCount(prev => prev + 1); // prev = 1 -> 2
  // Итог: count = 2
};

Когда это особенно важно

• При множественных последовательных обновлениях состояния в одном обработчике события.
• При работе с асинхронными операциями (setTimeout, fetch), где замыкание может захватить устаревшее значение.
• При использовании хука useState в функциональных компонентах, где эта проблема также актуальна.

Вывод

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