Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке batching?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

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

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

---

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

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

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

1. Змінив count -> перерендер
2. Змінив text -> перерендер
3. Змінив 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()`:

1. React **додає оновлення** до внутрішньої черги компонента (`updateQueue`).
2. Він **позначає компонент** як "такий, що потребує перемальовування".
3. Але сам ререндер **не запускається одразу** - він чекає, поки:
  - закінчиться обробник події,
  - закінчиться мікротаска (якщо оновлення прийшли з `Promise`, `setTimeout` тощо в React 18+).
4. Після цього 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()` підряд.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати562 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.