2nd/10_Wiki/Topic_Programming/Frontend/Batching.md

---
id: wiki-2026-0508-batching
title: Batching
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Update Batching, Render Batching]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [batching, performance, rendering, reactive]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript
  framework: React/Vue/Svelte
---

# Batching

## 매 한 줄
> **"매 여러 update 매 한 번 처리"**. Batching은 multiple state changes를 single update cycle로 묶어 redundant rendering/computation을 줄이는 reactive UI 의 core optimization. 2026 모든 mainstream framework (React, Vue, Svelte, Solid) 에서 default behavior.

## 매 핵심

### 매 batching 이 필요한 이유
- 매 setState 매 separate render → DOM mutation N times.
- 매 batching → microtask/tick 까지 모아 single commit → DOM mutation 1 time.
- Layout thrashing 방지, paint 횟수 감소.

### Framework comparison
- **React 18+**: 매 모든 context automatic.
- **Vue 3**: nextTick scheduler — sync write, async render.
- **Svelte 5 (runes)**: microtask flush.
- **Solid**: `batch()` explicit + signal-based fine-grained update.

### 매 응용
1. Form multi-field update.
2. Async fetch result write.
3. Animation frame scheduling.

## 💻 패턴

### React 18+ implicit batching
```tsx
function update() {
  setA(1);
  setB(2);
  setC(3);
  // 매 single render
}
```

### Vue 3 batched watcher
```ts
import { ref, watchEffect, nextTick } from 'vue';

const count = ref(0);
watchEffect(() => console.log(count.value));

count.value++;
count.value++;
count.value++;
await nextTick();
// 매 console.log 매 한 번
```

### Solid explicit batch
```tsx
import { batch, createSignal } from 'solid-js';

const [a, setA] = createSignal(0);
const [b, setB] = createSignal(0);

batch(() => {
  setA(1);
  setB(2);
}); // 매 single update
```

### Custom batcher (vanilla JS)
```ts
class Batcher {
  private queue = new Set<() => void>();
  private scheduled = false;

  schedule(fn: () => void) {
    this.queue.add(fn);
    if (!this.scheduled) {
      this.scheduled = true;
      queueMicrotask(() => this.flush());
    }
  }

  private flush() {
    for (const fn of this.queue) fn();
    this.queue.clear();
    this.scheduled = false;
  }
}
```

### RAF-based animation batching
```ts
let pending: (() => void)[] = [];
let frameId: number | null = null;

function scheduleAnimation(fn: () => void) {
  pending.push(fn);
  if (frameId === null) {
    frameId = requestAnimationFrame(() => {
      const fns = pending;
      pending = [];
      frameId = null;
      for (const f of fns) f();
    });
  }
}
```

### Database write batching
```ts
class WriteBatcher {
  private buffer: Record[] = [];
  private timer: NodeJS.Timeout | null = null;

  add(r: Record) {
    this.buffer.push(r);
    if (!this.timer) {
      this.timer = setTimeout(() => this.flush(), 50);
    }
    if (this.buffer.length >= 1000) this.flush();
  }

  private async flush() {
    if (this.timer) { clearTimeout(this.timer); this.timer = null; }
    const batch = this.buffer.splice(0);
    if (batch.length) await db.insertMany(batch);
  }
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| React UI | Default automatic batching |
| Solid signal | Explicit `batch()` |
| Vanilla DOM | `queueMicrotask` 또는 RAF |
| API write throttling | timer + size threshold |
| Need immediate flush | `flushSync` (React) / explicit await |

**기본값**: framework default, only override when necessary.

## 🔗 Graph
- 부모: [[Performance]]
- 변형: [[Automatic Batching]]
- Adjacent: [[Throttling]]

## 🤖 LLM 활용
**언제**: framework batching behavior 설명, custom batcher prototyping, batching vs debouncing 구분.
**언제 X**: real perf measurement — Profiler / Chrome DevTools.

## ❌ 안티패턴
- **Force flush 남용**: synchronous render 강제 → 매 batching benefit 의 lost.
- **State variable explosion**: 5+ useState → useReducer / Object state.
- **Async loop 안 setState**: 매 await 마다 매 separate batch — group with Promise.all.
- **No throttle on rapid event**: scroll/resize raw — RAF / debounce.

## 🧪 검증 / 중복
- Verified (React 18 RFC, Vue 3 reactivity guide, Solid docs).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — generic batching across frameworks |