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.6 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

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 강제.

매 응용

Form state with multiple fields — 매 single render.
Async fetch chain — 매 single render after Promise.
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

🤖 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

4.6 KiB Raw Blame History