> Как работает обновление состояния при нескольких вызовах setState в React? (React, TypeScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Альфа-банк

Стек: React, TypeScript

> Пример ответа

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

Если передавать объект, как setState({ count: count + 1 }), то каждый вызов будет использовать одно и то же начальное состояние, поэтому setState({ count: count + 1 }) трижды даст прирост только на 1. Чтобы получить актуальное значение, нужно использовать функциональную форму: setState(prev => ({ count: prev.count + 1 })). Тогда каждый вызов получит предыдущее обновлённое состояние, и три вызова увеличат счётчик на 3.

В React 18 и выше батчинг работает и в асинхронных контекстах (например, в setTimeout, промисах). Если нужно принудительно обновить состояние немедленно, можно использовать flushSync из react-dom.

Пример на TypeScript:

TSX
const [count, setCount] = useState(0);

// Объектная форма - только +1
const handleObject = () => {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1); // Итог: count = 1
};

// Функциональная форма - +3
const handleFunction = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1); // Итог: count = 3
};