Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

4.4 KiB

Raw Blame History

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

title

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.

매 응용

Form multi-field update.
Async fetch result write.
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

4.4 KiB Raw Blame History