Асинхронный или синхронный setState в React?

Часто setState называют асинхронным, но это упрощение не совсем точное.

Как React обрабатывает setState

При вызове setState или setCount:

• React планирует обновление

• несколько обновлений могут быть объединены

• реальный рендер выполняется позже

Пример:

setCount(count + 1);
console.log(count); // старое значение

Это происходит потому, что React ещё не применил обновление.

Батчинг обновлений

React группирует обновления:

• внутри обработчиков событий

• внутри эффектов

• в асинхронном коде (в современных версиях)

Это уменьшает количество рендеров и повышает производительность.

Функциональная форма setState

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

setCount(prev => prev + 1);

React гарантирует, что prev — последнее значение.

Важный вывод

setState:

• не блокирует выполнение кода

• не гарантирует немедленное обновление

• подчиняется стратегии оптимизации React

Вывод

setState нельзя строго назвать ни синхронным, ни асинхронным. Это запланированное обновление, которое React выполняет в удобный для себя момент.