> Синхронная или асинхронная функция setState в React и почему (React, TypeScript)

Метод setState в React работает синхронно внутри обработчиков событий React и асинхронно в остальных случаях (например, в setTimeout, нативных DOM-событиях, промисах). Это связано с механизмом пакетной обработки (batching) обновлений.

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

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

const handleClick = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  console.log(count); // 0 (асинхронно)
};
// После рендера count станет 2, а не 1

В setTimeout или нативных событиях пакетная обработка отключается, и setState работает синхронно:

TSX
setTimeout(() => {
  setCount(prev => prev + 1);
  console.log(count); // Уже обновлённое значение (синхронно)
}, 0);

В React 18 с автоматическим batching (createRoot) все вызовы setState стали асинхронными, включая setTimeout и промисы, что упрощает поведение. Однако в legacy-режиме (ReactDOM.render) поведение остаётся прежним.

Итог: setState - асинхронный в контексте React (для оптимизации), но может быть синхронным вне его. Для получения актуального состояния используйте функциональную форму setState(prev => ...) или useEffect.