Що таке batching?

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

Що таке batching простими словами

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

Ціль - уникнути зайвих перемальовувань і підвищити продуктивність застосунку.

Приклад без batching (якби його не було)

javascript

setCount(count + 1);
setText("Hello");
setIsOpen(true);

Без batching React робив би три кроки:

Змінив count -> перерендер
Змінив text -> перерендер
Змінив isOpen -> перерендер

Разом: 3 перерендери підряд, що дуже неефективно.

Приклад з batching (як React робить насправді)

React "накопичує" всі виклики setState, поки виконується одна подія (наприклад, onClick, onChange тощо), і після завершення одним махом оновлює всі стани та робить один рендер:

javascript

function Example() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  const handleClick = () => {
    setCount(c => c + 1);
    setText("Updated");
  };

  console.log("Перерендер!");
  return <button onClick={handleClick}>Клік</button>;
}

При кліку React викличе console.log("Перерендер!") лише один раз, тому що оновлення згруповані (batched).

Як це працює під капотом

Коли ти викликаєш setState():

React додає оновлення до внутрішньої черги компонента (updateQueue).
Він позначає компонент як "такий, що потребує перемальовування".
Але сам ререндер не запускається одразу - він чекає, поки:

закінчиться обробник події,
закінчиться мікротаска (якщо оновлення прийшли з Promise, setTimeout тощо в React 18+).

Після цього React застосовує всі оновлення за один прохід і рендерить один раз.

Важливо: batching буває різних рівнів

React < 18 (старе поведінка)

Batching працював лише в синхронних подіях React:

javascript

onClick, onChange, onSubmit, ...

Але якщо оновлення відбувалося всередині setTimeout або Promise, React не групував їх:

javascript

setTimeout(() => {
  setCount(c => c + 1);
  setCount(c => c + 1);
}, 0);

// React 17 -> буде 2 перерендери
// React 18 -> буде 1 перерендер

React 18 і "automatic batching"

Починаючи з React 18 batching увімкнено в усіх контекстах:

всередині setTimeout
всередині fetch
всередині async/await
всередині промісів і ефектів

Тепер усі оновлення стану, що відбулися в рамках однієї події або таска, об'єднуються автоматично.

Що React реально робить при batching

Це можна уявити так:

javascript

const updates = [];

function setState(updateFn) {
  updates.push(updateFn);
  scheduleRender(); // React чекає закінчення поточної фази
}

function scheduleRender() {
  // після закінчення події / мікротаски
  applyAllUpdates(); // застосовує всі оновлення одразу
}

Підсумок

Що	Опис
Визначення	Механізм, який об'єднує декілька оновлень стану в один рендер
Навіщо	Щоб уникнути зайвих перерендерів і прискорити інтерфейс
Де спрацьовує	В React 18+ - скрізь (події, таймери, async)
Скільки перерендерів при 5 `setState` підряд	Всього 1
Як працює	React накопичує оновлення і застосовує їх одним пакетом

Приклад для наочності

javascript

function BatchingDemo() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

  const handleClick = () => {
    setA(x => x + 1);
    setB(x => x + 1);
    console.log("Кнопку натиснуто!");
  };

  console.log("Перерендер!");
  return <button onClick={handleClick}>Click</button>;
}

При одному кліку ти побачиш:

javascript
Кнопку натиснуто! Перерендер!

(всього 1 перерендер)

Без batching (якби це був React 16): було б 2 перерендери підряд

Ключова думка

Batching - це "об'єднання апдейтів стану в один рендер".

Завдяки цьому React залишається швидким, навіть якщо в одній події викликається десяток setState() підряд.

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

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

Premium

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