Функция 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).