PassFront
  1. PassFront
  2. База знаний
  3. Асинхронность и Event Loop

Функция setState синхронная или асинхронная?

Асинхронность и Event Loop

`setState` в React ведёт себя асинхронно: React не применяет изменение немедленно, а планирует его и объединяет обновления в пакет (batching) до следующего рендера.

Почему «асинхронно»

setState/сеттер хука не меняет состояние сразу — сразу после вызова старое значение ещё актуально:

const [count, setCount] = useState(0);
function handle() {
  setCount(count + 1);
  console.log(count); // всё ещё 0 — не обновилось синхронно
}

React накапливает обновления и применяет их пакетом перед перерисовкой.

Batching

Несколько setState в одном обработчике объединяются в один перерендер:

setCount(count + 1);
setFlag(true);
// один ре-рендер, а не два

С React 18 батчинг работает и в промисах, setTimeout, нативных событиях.

Проблема с зависимостью от предыдущего значения

Из-за батчинга это даст +1, а не +3:

setCount(count + 1);
setCount(count + 1);
setCount(count + 1); // count один и тот же

Правильно — функциональное обновление:

setCount((c) => c + 1);
setCount((c) => c + 1); // +2, использует актуальное значение

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

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

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