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

Question

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

YeaHub · Accepted Answer

Часто 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 выполняет в удобный для себя момент.