> Что такое batching в React и зачем он нужен (React)

Короткий ответ

Batching в React - это механизм группировки нескольких вызовов setState или dispatch в одно обновление, чтобы избежать лишних повторных рендеров. Без batching каждый setState вызывал бы отдельный render, что снижает производительность. React автоматически батчит обновления внутри обработчиков событий и хуков, а с React 18 - также в setTimeout, промисах и колбэках.

Подробное объяснение

Batching (пакетирование) - это оптимизация, при которой React собирает несколько обновлений состояния в один пакет и выполняет один рендер вместо нескольких. Это критически важно для производительности, так как каждый рендер - дорогостоящая операция, включающая сравнение виртуального DOM и обновление реального.

До React 18 batching работал только внутри синхронных обработчиков событий React (onClick, onChange и т.д.). В асинхронном коде (setTimeout, fetch, промисы) обновления не батчились - каждый setState вызывал отдельный рендер. Начиная с React 18, batching включён по умолчанию для всех обновлений, включая асинхронные, благодаря новому алгоритму автоматического пакетирования.

Механизм работает так: React помечает начало транзакции, собирает все вызовы setState внутри неё, а в конце выполняет один рендер с последним значением состояния. Если нужно отключить batching (редкий случай), используется flushSync.

На практике

Batching особенно важен в сложных компонентах с множеством обновлений состояния за один обработчик. Например, при отправке формы, где нужно сбросить несколько полей - все setState соберутся в один render. Это снижает нагрузку на браузер и улучшает отзывчивость интерфейса.

В React 18 batching работает везде, но есть нюанс: если обновления происходят в разных микрозадачах (например, в разных .then()), они могут не сбатчиться. Для принудительного батчинга в таких случаях можно использовать unstable_batchedUpdates из react-dom.

Пример кода

JSX
// До React 18 - только в обработчиках событий
function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // Один render - batching работает
}

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // Два render - batching не работал до React 18
}, 1000);

// React 18 - batching везде
function handleAsync() {
  fetch('/api').then(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
    // Один render - batching работает
  });
}

// Отключение batching (редко)
import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => setCount(c => c + 1));
  flushSync(() => setFlag(f => !f));
  // Два отдельных render
}

Как отвечать на собеседовании

Начни с краткого определения batching как механизма группировки обновлений. Объясни, зачем это нужно - для производительности, чтобы избежать лишних рендеров. Упомяни разницу между React 17 и 18: раньше batching работал только в обработчиках событий, теперь везде. Приведи простой пример с двумя setState в одном обработчике. Если спросят про flushSync, скажи, что это для редких случаев, когда нужно немедленно обновить DOM.

Что проверяет интервьюер

• Понимание жизненного цикла React и механизма рендера
• Знание оптимизаций производительности
• Осведомлённость о различиях версий React (17 vs 18)
• Умение объяснить, как batching влияет на поведение приложения
• Понимание разницы между синхронным и асинхронным кодом в контексте React

Типичные ошибки

• Утверждение, что batching работает только в обработчиках событий (устарело для React 18)
• Путаница между batching и debouncing/throttling - это разные механизмы
• Мысль, что batching объединяет значения setState в одно - на самом деле каждый setState выполняется, но рендер один
• Игнорирование того, что batching не работает между разными микрозадачами (разные .then)
• Использование flushSync без реальной необходимости - это антипаттерн для большинства случаев