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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-batching	Batching	10_Wiki/Topics	verified	self	Update Batching Render Batching	none	A	0.9	applied	batching performance rendering reactive		2026-05-10	pending	language framework TypeScript 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

function update() {
  setA(1);
  setB(2);
  setC(3);
  // 매 single render
}

Vue 3 batched watcher

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

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)

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

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

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