Suggest an edit

Improve this article

Refine the answer for “What is batching?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What is batching in simple words

**Batching (grouping)** is a React mechanism in which **several state updates triggered almost at the same time are combined into one shared render**.

> The goal is to **avoid unnecessary re-renders** and improve the application's **performance**.

---

## Example without batching (if it did not exist)

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

Without batching React would take three steps:

1. Changed count -> re-render
2. Changed text -> re-render
3. Changed isOpen -> re-render

Total: **3 re-renders in a row**, which is very inefficient.

---

## Example with batching (what React actually does)

React "accumulates" all `setState` calls while a single event is being handled (for example `onClick`, `onChange`, etc.),
and once it finishes it updates all states **in one go** and does **a single render**:

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

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

console.log("Re-render!");
  return <button onClick={handleClick}>Click</button>;
}
```

On a click React will call `console.log("Re-render!")` only **once**,
because the updates are grouped (batched).

---

## How it works under the hood

When you call `setState()`:

1. React **adds the update** to the component's internal queue (`updateQueue`).
2. It **marks the component** as "needing a re-render".
3. But the actual re-render **does not run immediately** - it waits until:
  - the event handler finishes,
  - the microtask finishes (if the updates came from a `Promise`, `setTimeout`, etc. in React 18+).
4. After that React **applies all the updates in one pass** and **renders once**.

---

## Important: batching comes in different levels

### React < 18 (the old behavior)

Batching worked **only inside React's synchronous events**:

```javascript
onClick, onChange, onSubmit, ...
```

But if an update happened inside `setTimeout` or a `Promise`,
React **did not group** them:

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

// React 17 -> will be 2 re-renders
// React 18 -> will be 1 re-render
```

---

### React 18 and "automatic batching"

Starting with React 18 batching is enabled **in every context**:

- inside `setTimeout`
- inside `fetch`
- inside `async/await`
- inside promises and effects

Now **all state updates that happen within one event or task are combined automatically.**

---

## What React actually does during batching

You can picture it like this:

```javascript
const updates = [];

function setState(updateFn) {
  updates.push(updateFn);
  scheduleRender(); // React waits for the current phase to end
}

function scheduleRender() {
  // after the event / microtask finishes
  applyAllUpdates(); // applies all updates at once
}
```

---

## Summary

| What | Description |
|---|---|
| Definition | A mechanism that combines several state updates into one render |
| Why | To avoid unnecessary re-renders and speed up the interface |
| Where it kicks in | In React 18+ - everywhere (events, timers, async) |
| How many re-renders for 5 `setState` in a row | Just **1** |
| How it works | React accumulates updates and applies them as one batch |

---

## Example for clarity

```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("Button clicked!");
  };

console.log("Re-render!");
  return <button onClick={handleClick}>Click</button>;
}
```

- On a single click you will see:

```javascript
  Button clicked!
  Re-render!
  ```
(only 1 re-render)
- Without batching (if this were React 16):
there would be **2 re-renders in a row**

---

## Key point

> **Batching is "combining state updates into one render".**
>
> Thanks to this, React stays fast even if a single event
> calls a dozen `setState()` in a row.
</content>

Markdown · drag & drop images · ⌘B / ⌘I shortcuts627 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.