2nd/10_Wiki/Topics/Frontend/Automatic 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-automatic-batching	Automatic Batching (React 18+)	10_Wiki/Topics	verified	self	React Batching Concurrent Batching	none	A	0.9	applied	react batching performance rendering		2026-05-10	pending	language framework TypeScript React 19

Automatic Batching (React 18+)

매 한 줄

"매 setState 매 합쳐서 매 한 번 render". React 18에서 도입된 automatic batching은 모든 update (promise, setTimeout, native event)를 single re-render로 group한다. React 17 이전엔 React event handler 안에서만 batching이었음 — 이제 전부 자동.

매 핵심

매 동작

• 매 동일 tick 안의 setState calls → React가 모아서 하나의 commit 으로 처리.
• 결과: less render, less DOM mutation, less component lifecycle invocation.
• React 19도 동일 model 유지 + Compiler 가 추가 optimization.

React 17 vs 18+

• 17: onClick 안 batching O / setTimeout, Promise.then 안 batching X.
• 18+: 매 모든 context batching O.
• Opt-out: flushSync() 로 immediate render 강제.

매 응용

1. Form state with multiple fields — 매 single render.
2. Async fetch chain — 매 single render after Promise.
3. Concurrent transitions — startTransition + batching.

💻 패턴

React 18 default behavior

import { useState } from 'react';

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState(0);

  async function handleSubmit() {
    const res = await fetch('/api/me');
    const data = await res.json();
    // 18+: 매 3 setState 매 single render
    setName(data.name);
    setEmail(data.email);
    setAge(data.age);
  }

  return <button onClick={handleSubmit}>Load</button>;
}

flushSync to opt out

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCount(c => c + 1);
  });
  // 매 DOM 업데이트 매 done — measure 가능
  const h = listRef.current.scrollHeight;
  flushSync(() => {
    setHeight(h);
  });
}

Custom hook with batched async

function useAsyncForm<T>() {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  async function load(fn: () => Promise<T>) {
    setLoading(true);
    setError(null);
    try {
      const res = await fn();
      // 18+: 매 두 setState 매 single render
      setData(res);
      setLoading(false);
    } catch (e) {
      setError(e as Error);
      setLoading(false);
    }
  }

  return { data, loading, error, load };
}

Reducer alternative

const [state, dispatch] = useReducer(reducer, initial);
// 매 single dispatch 매 multi-field update — natural batching
dispatch({ type: 'SUBMIT_OK', payload: data });

Avoid stale closure with functional updates

// 매 sequential update — 매 함수형 사용
setCount(c => c + 1);
setCount(c => c + 1); // → +2, not +1

Measuring render with Profiler

import { Profiler } from 'react';

<Profiler
  id="Form"
  onRender={(id, phase, actual) => console.log(id, phase, actual)}
>
  <Form />
</Profiler>

매 결정 기준

상황	Approach
Multi-field update	default (let batching work)
DOM measurement between updates	flushSync
Sequential counter update	functional updater
Complex state graph	useReducer
Concurrent UI	startTransition

기본값: do nothing — automatic batching handles it.

🔗 Graph

• 부모: React · Concurrent Features
• 변형: Batching · startTransition
• Adjacent: flushSync · useReducer

🤖 LLM 활용

언제: explain when batching applies, refactor pre-18 code, debug "why is render double" question. 언제 X: actual render count measurement — Profiler / DevTools.

❌ 안티패턴

• 불필요한 flushSync: 매 performance 의 hurt — 마지막 수단.
• Sequential setState with stale value: setCount(count+1); setCount(count+1) → +1.
• Object identity reset: setData({...}) matter — same shallow ref skip.
• Mid-render setState: trigger infinite loop.

🧪 검증 / 중복

• Verified (React 18 RFC, React 19 docs).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — React 18+ batching pattern + flushSync