Що таке батчинг (Automatic Batching)?

ReactJunior~2 хв читання

Що таке batching (батчинг)

Batching (від англ. batch - "пакет, партія") - це механізм, при якому React групує кілька оновлень стану (setState / useState) в один спільний рендер, щоб зменшити кількість перерендерів і підвищити продуктивність.

До React 18 (Legacy batching)

Раніше (до React 18) React вмів групувати (батчити) оновлення тільки всередині синхронних обробників подій React.

Наприклад:

javascript

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
}

React виконає один рендер, тому що обидва setState знаходяться всередині однієї події React (onClick).

Але ось що відбувалося в асинхронних контекстах:

javascript

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);

React 17 і нижче виконають два окремих рендери, тому що батчинг не працював поза React-подіями.

React 18: Automatic Batching

У React 18 батчинг став автоматичним у всіх контекстах - навіть всередині setTimeout, промісів, async/await, fetch, ефектів тощо.

Той самий код тепер працює ефективніше:

javascript

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);

React 18 виконає тільки один рендер, оскільки обидва оновлення автоматично об'єднуються в один пакет (batch).

Що відбувається всередині

Коли викликається setState() (або оновлення useState):

React не оновлює одразу DOM;
він збирає всі зміни, які відбулися "в рамках одного циклу";
потім виконує один спільний рендер і оновлює DOM разом.

Тобто:

javascript

setState() → (React ставить у чергу)
setState() → (React ставить у чергу)
--- батч завершено ---
→ один рендер і commit

Приклад порівняння

Без батчингу (React 17)

javascript

setCount(c => c + 1);  // render #1
setFlag(f => !f);      // render #2

Два окремих перерендерювання → більше витрат і мерехтіння UI.

З батчингом (React 18)

javascript

setCount(c => c + 1);
setFlag(f => !f);
// React об'єднує → один рендер

Один рендер → швидше і плавніше.

Коли батчинг не виконується

Іноді потрібно одразу оновити DOM, минаючи batching - наприклад, щоб миттєво побачити ефект перед наступними оновленнями. Для цього є API:

javascript

import { flushSync } from "react-dom";

flushSync(() => {
  setCount(c => c + 1);
});
// React негайно виконає оновлення (без batching)

Ключові переваги Automatic Batching

Перевага	Опис
Менше перерендерів	Оновлення групуються → менше витрат на віртуальний і реальний DOM
Плавніший інтерфейс	React не блокується на безлічі дрібних оновлень
Менше коду для оптимізації	Не потрібно вручну "об'єднувати" виклики setState
Працює скрізь	Навіть у `setTimeout`, промісах, async-функціях, `fetch` тощо

Підсумок

Automatic Batching - це автоматичне об'єднання кількох викликів setState() в один рендер, незалежно від контексту, щоб підвищити продуктивність і плавність інтерфейсу.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.