Как работает batching обновлений состояния в React?

Question

Accepted Answer

## Контекст

**Batching** — механизм, при котором React группирует несколько обновлений состояния (`setState` / сеттеры `useState`) и применяет их за **один** рендер, а не рисует UI после каждого вызова. Меньше работы = быстрее и стабильнее интерфейс.

```jsx
function handleClick() {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // React 18+: обычно один рендер на оба обновления
}
```

### Что изменилось в React 18

Раньше автоматический batching надёжно работал в основном внутри React-событий. С React 18 automatic batching расширен на обновления внутри промисов, `setTimeout`, нативных обработчиков и т.п. Если нужно принудительно промыть DOM между обновлениями (редкий кейс: замер layout сразу после set) — `flushSync`.

```js
import { flushSync } from 'react-dom';

flushSync(() => setCount((c) => c + 1));
// DOM уже обновлён — можно измерять
```

### Связь с другими вопросами

Объясняет, почему два `setX` не дают два рендера и почему чтение state сразу после set всё ещё «старое»: обновление планируется, а не применяется синхронно в той же строке. Для опоры на предыдущее значение используйте `setX(prev => ...)`.

**Итог:** batching склеивает обновления в один рендер; в React 18 он шире; `flushSync` — осознанное исключение.