PassFront
  1. PassFront
  2. База знаний
  3. Функции

Зачем нужна функция в качестве аргумента в setState?

Функции

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

Проблема

setState асинхронный и батчит обновления. Прямое использование текущего состояния при нескольких обновлениях подряд даёт неверный результат:

// Плохо — count один и тот же во всех вызовах
setCount(count + 1);
setCount(count + 1);
setCount(count + 1); // итог +1, а не +3!

Все три используют одно (устаревшее) значение count.

Решение — функциональное обновление

Передать функцию, получающую актуальное предыдущее значение:

setCount((prev) => prev + 1);
setCount((prev) => prev + 1);
setCount((prev) => prev + 1); // итог +3 ✓

React применяет функции последовательно, каждая получает результат предыдущей.

Когда нужна функция

  • Новое состояние зависит от предыдущего (счётчики, toggle, накопление).
  • Несколько обновлений подряд в одном обработчике.
  • Обновление в асинхронном коллбэке/замыкании, где текущее значение может устареть:
setTimeout(() => setCount((prev) => prev + 1), 1000); // актуальное значение

Когда можно без функции

Когда новое значение не зависит от старого:

setName('Bob'); // прямое значение — ок

Коротко для собеседования

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

Другие вопросы раздела