[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,93 +2,197 @@
|
||||
id: wiki-2026-0508-flushsync
|
||||
title: flushSync
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [flushSync, React flushSync, sync flush]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [react, react-dom, flushSync, batching, escape-hatch]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: typescript
|
||||
framework: react-19
|
||||
---
|
||||
|
||||
# [[flushSync|flushSync]]
|
||||
# flushSync
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
`flushSync`는 [[React 18|React 18]]에서 도입된 API로, React가 상태 업데이트를 즉각적이고 동기적으로 강제 적용하도록 만드는 메서드입니다 [1-3]. 이 메서드를 사용하면 React 18의 기본 동작인 자동 배칭([[Automatic Batching|Automatic Batching]])에서 예외적으로 벗어나 즉시 리렌더링을 유발할 수 있습니다 [2, 3]. 그러나 과도하게 사용할 경우 배칭을 통한 성능 향상 이점을 무효화할 수 있으므로, DOM 측정이나 즉각적인 폼 업데이트처럼 필수적인 경우에만 제한적으로 사용해야 합니다 [2, 4].
|
||||
## 매 한 줄
|
||||
> **"매 React 18+ 의 automatic batching 우회 — 즉시 synchronous flush 강제"**. 매 React 18 의 default 가 모든 update 를 batch — 매 일부 case (third-party DOM lib, scrollIntoView after state change, focus management) 에서 즉시 flush 필요. 매 escape hatch — 매 misuse 시 perf 손해.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
* **개념 및 역할:** React 18부터는 성능 최적화를 위해 여러 상태 업데이트를 단일 리렌더링으로 묶는 자동 배칭(Automatic [[Batching|Batching]])이 기본적으로 적용됩니다 [5-7]. 하지만 ReactDOM에 포함된 `flushSync()` 메서드를 사용하면 이 자동 배칭을 의도적으로 우회(Opt-out)하여, 특정 상태 업데이트 시 React가 업데이트를 동기적으로 처리하고 즉시 리렌더링하도록 강제할 수 있습니다 [1, 3].
|
||||
* **적절한 사용 사례(Use Cases):** `flushSync`는 사용자가 변경 사항을 지연 없이 즉각적으로 보아야 하는 매우 긴급한 업데이트에 사용됩니다 [2].
|
||||
* 사용자의 입력 지연을 방지하기 위해 폼(Form) 값을 즉시 업데이트할 때 [2].
|
||||
* 상태 변경 직후 특정 DOM 요소에 포커스(Focus)를 주거나, DOM 요소의 크기/위치를 측정(Measure)해야 할 때 [2].
|
||||
* **사용 방법:** 상태 업데이트 로직을 래핑하여 사용합니다. (예: `flushSync(() => { setValue(''); });`) [2].
|
||||
* **성능 관련 주의사항:** 자동 배칭은 렌더링 횟수를 줄여 성능을 향상시키는 핵심 기능이므로, `flushSync`를 남용하면 이러한 성능상 이점이 무효화될 수 있습니다 [4]. 따라서 가급적 드물게(sparingly) 사용해야 합니다 [4].
|
||||
## 매 핵심
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[Automatic Batching|Automatic Batching]], React 18, [[startTransition|startTransition]]
|
||||
- **Projects/Contexts:** DOM Element Measurement, Form Value Synchronization
|
||||
- **Contradictions/Notes:** React 18의 상태 업데이트 제어 방식 중 `flushSync`는 업데이트를 즉시 동기적으로 강제(Force synchronously)하는 반면, `[[startTransition|startTransition]]`은 업데이트를 비긴급(Non-urgent)으로 지정하여 더 높은 우선순위 작업(타이핑, 클릭 등)에 메인 스레드를 양보한다는 점에서 상반된 목적을 가집니다 [1, 2].
|
||||
### 매 왜 필요한가
|
||||
- **React 18 automatic batching**: 매 setState 매 promises, timers, native event 까지 batch.
|
||||
- **Pre-batch read pattern**: 매 setState 후 즉시 DOM read/manipulation 가정한 legacy code 매 깨짐.
|
||||
- **Third-party libs**: 매 d3, jQuery plugin, chart lib 의 imperative DOM 의 sync state 필요.
|
||||
- **scroll after mount**: 매 list 의 새 item 추가 후 scrollIntoView — batch 하면 DOM 미반영.
|
||||
- **focus after state change**: 매 modal open + input focus — batch 하면 input 가 not yet rendered.
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-25*
|
||||
### 매 동작
|
||||
- `flushSync(callback)` — 매 callback 안의 모든 update 를 sync flush, 매 반환 직후 DOM 업데이트 완료.
|
||||
- 매 callback 외부의 다른 pending update 까지 함께 flush (warning 로그).
|
||||
- 매 expensive — 매 break 의 batching benefit (multiple re-renders).
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### 매 응용
|
||||
1. List 추가 후 scrollIntoView (chat, log).
|
||||
2. Modal open + auto-focus input.
|
||||
3. d3/Canvas 의 React state → imperative draw.
|
||||
4. Print preview, screenshot 의 specific state 보장.
|
||||
5. Document.title sync update (browser tab 즉시 반영).
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
## 💻 패턴
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
### Scroll to bottom — chat
|
||||
```tsx
|
||||
import { flushSync } from 'react-dom';
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
function Chat() {
|
||||
const [messages, setMessages] = useState<string[]>([]);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
const addMessage = (msg: string) => {
|
||||
flushSync(() => {
|
||||
setMessages(prev => [...prev, msg]);
|
||||
});
|
||||
// 매 이 시점에 DOM 이미 update — scrollIntoView 가능
|
||||
containerRef.current?.scrollTo({
|
||||
top: containerRef.current.scrollHeight,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
};
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
|
||||
- **과거 데이터와의 충돌:** 없음
|
||||
- **정책 변화:** 없음
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
return <div ref={containerRef}>{messages.map(...)}</div>;
|
||||
}
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### Modal open + auto-focus
|
||||
```tsx
|
||||
function App() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
const openModal = () => {
|
||||
flushSync(() => setOpen(true));
|
||||
// 매 modal 의 input 가 rendered — focus 가능
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
return (
|
||||
<>
|
||||
<button onClick={openModal}>Open</button>
|
||||
{open && <Modal><input ref={inputRef} /></Modal>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
### Imperative Canvas / D3 sync
|
||||
```tsx
|
||||
function Chart({ data }: { data: number[] }) {
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const [renderedData, setRenderedData] = useState(data);
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
useEffect(() => {
|
||||
flushSync(() => setRenderedData(data));
|
||||
// 매 React 의 SVG 업데이트 후 d3 manipulation
|
||||
d3.select(svgRef.current).selectAll('rect').transition()...;
|
||||
}, [data]);
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
return <svg ref={svgRef}>{/* React renders rects */}</svg>;
|
||||
}
|
||||
```
|
||||
|
||||
### Print / Screenshot — specific state
|
||||
```tsx
|
||||
const handlePrint = () => {
|
||||
flushSync(() => {
|
||||
setIsPrintMode(true); // 매 hide menu, expand all sections
|
||||
});
|
||||
window.print();
|
||||
setIsPrintMode(false); // 매 normal flush, no need flushSync
|
||||
};
|
||||
```
|
||||
|
||||
### List item 추가 후 measure
|
||||
```tsx
|
||||
function List() {
|
||||
const [items, setItems] = useState<Item[]>([]);
|
||||
const lastRef = useRef<HTMLLIElement>(null);
|
||||
|
||||
const add = (item: Item) => {
|
||||
flushSync(() => setItems(prev => [...prev, item]));
|
||||
// 매 마지막 item 의 height 측정 가능
|
||||
const height = lastRef.current?.getBoundingClientRect().height;
|
||||
console.log('New item height:', height);
|
||||
};
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
### Document title sync
|
||||
```tsx
|
||||
function NotificationCenter({ count }: { count: number }) {
|
||||
const incrementBadge = () => {
|
||||
flushSync(() => setCount(c => c + 1));
|
||||
// 매 doc.title 즉시 update — browser tab 표시
|
||||
document.title = `(${count + 1}) Inbox`;
|
||||
};
|
||||
// ...
|
||||
}
|
||||
// 매 alternative: useEffect 로 title sync — 더 idiomatic.
|
||||
```
|
||||
|
||||
### React 19 — useTransition 과 비교
|
||||
```tsx
|
||||
const [pending, startTransition] = useTransition();
|
||||
|
||||
// 매 startTransition: low priority, batched, interruptible
|
||||
startTransition(() => setBigList(newData));
|
||||
|
||||
// 매 flushSync: high priority, sync, immediate
|
||||
flushSync(() => setBigList(newData));
|
||||
|
||||
// 매 둘 다 같이 사용 X — 의미 충돌.
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| List 추가 후 scrollIntoView | `flushSync`. |
|
||||
| Modal open + focus | `flushSync` + ref.focus(). |
|
||||
| Document.title sync | useEffect (idiomatic) 또는 flushSync. |
|
||||
| Performance optimization | useTransition (반대 방향). |
|
||||
| Simple state update | 매 plain setState (자동 batch). |
|
||||
|
||||
**기본값**: 매 setState (batching). 매 imperative DOM 의 즉시 sync 필요할 때만 `flushSync`.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[React]] · [[ReactDOM]]
|
||||
- 변형: [[useTransition]] · [[startTransition]] · [[Automatic Batching]]
|
||||
- 응용: [[scrollIntoView]] · [[Imperative Focus]] · [[D3 Integration]]
|
||||
- Adjacent: [[useLayoutEffect]] · [[useImperativeHandle]] · [[Batching]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: chat scroll-to-bottom, modal auto-focus, third-party imperative DOM sync, list 추가 후 measure 의.
|
||||
**언제 X**: 매 일반 state update (batch 가 더 빠름), useTransition 으로 충분한 case, 매 useEffect 로 처리 가능한 side effect.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **모든 setState 에 flushSync**: 매 batching benefit 소멸 — 매 perf 저하.
|
||||
- **render 중 호출**: 매 `flushSync` inside render — error. 매 event handler / effect 에서만.
|
||||
- **async 안에서**: 매 `await fetch(); flushSync(() => setX())` — 매 동작하나 매 batching 의 의미 없음 (async 가 이미 micro-task break).
|
||||
- **useEffect 대체로 사용**: 매 `flushSync` 매 sync flush 강제 — `useEffect` 의 lifecycle 의 대체 X.
|
||||
- **Suspense 의 children update**: 매 Suspense boundary 의 sync flush 매 hydration mismatch 위험.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (React docs flushSync, React 18 release notes, Dan Abramov 의 RFC).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — flushSync use-cases, scroll/focus patterns, useTransition 비교 추가 |
|
||||
|
||||
Reference in New Issue
Block a user