2nd/10_Wiki/Topic_Programming/Frontend/Diffing Algorithm.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-diffing-algorithm	Diffing Algorithm	10_Wiki/Topics	verified	self	VDOM Diff Reconciliation	none	A	0.9	applied	react vue vdom reconciliation		2026-05-10	pending	language framework JavaScript React/Vue

Diffing Algorithm

매 한 줄

"매 VDOM diff = O(n) heuristic — 매 same-level node 의 비교 + key-based identity.". 매 React/Vue/Preact 모두 매 Levenshtein-style O(n³) 의 회피하기 위해 매 두 가정 (1) 다른 type = subtree 교체, (2) key가 child identity 의 hint. 매 React 19 (2024) Fiber + concurrent rendering, Vue 3.4 patchFlag-driven static hoist 의 진화.

매 핵심

매 두 가정 (Heuristics)

1. 매 different element type ⇒ subtree 의 unmount + 재생성.
2. 매 stable key ⇒ list reconciliation 의 identity hint.

매 알고리즘

• React = Fiber tree, work loop가 매 cooperative scheduling 가능 (concurrent mode).
• Vue 3 = compiled patchFlag (static / dynamic 분류) + LIS (Longest Increasing Subsequence) for keyed list.
• Svelte/Solid = 매 VDOM 없음 — 매 fine-grained reactivity 의 directly DOM 의 patch.

매 응용

1. Keyed list — 매 stable key가 매 reorder cost 의 minimize.
2. Conditional render — 매 ternary가 매 type swap 의 발생.
3. Concurrent rendering — 매 high-priority update가 매 low-priority interrupt.

💻 패턴

1. Stable key (correct)

// CORRECT — id is stable identity
items.map((item) => <Row key={item.id} item={item} />)

// WRONG — index changes when list reorders
items.map((item, i) => <Row key={i} item={item} />)

2. Type swap forces unmount

{condition ? <div>A</div> : <span>A</span>}
// span/div type 다름 → subtree unmount + remount
// 같은 component reuse 원하면 같은 type 유지:
<div>{condition ? 'A' : 'B'}</div>

3. React Fiber priority lanes (19)

import { useTransition } from 'react';

const [isPending, startTransition] = useTransition();

const onChange = (e) => {
  setInput(e.target.value); // urgent
  startTransition(() => {
    setFilter(e.target.value); // can be interrupted
  });
};

4. Vue 3 patchFlag (compiled)

<!-- Source -->
<div>
  <span>{{ msg }}</span>
  <span class="static">hi</span>
</div>

<!-- Compiled (simplified) -->
<!-- 첫 span has patchFlag = 1 (TEXT) → diff only text -->
<!-- 두번째 span hoisted as static — 매 diff 건너뛰기 -->

5. Vue keyed list w/ LIS

<TransitionGroup tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.label }}</li>
</TransitionGroup>
<!-- Vue calculates LIS to minimize DOM moves -->

6. React.memo + structural equality

const Row = React.memo(({ item }: { item: Item }) =>
  <div>{item.label}</div>,
  (prev, next) => prev.item.id === next.item.id && prev.item.label === next.item.label,
);

7. Solid/Svelte alternative (no diff)

// Solid — fine-grained reactivity, no VDOM
import { createSignal } from 'solid-js';
const [count, setCount] = createSignal(0);
// JSX compiles to direct DOM ops; only `count()` text node updates
return <div>count: {count()}</div>;

8. Avoid layout-impacting reorder

// Stable order with key — only reorder DOM, no remount
<>{sorted.map((u) => <UserCard key={u.id} user={u} />)}</>
// Each UserCard preserves its instance (state, refs) on reorder.

매 결정 기준

상황	Approach
List render	매 stable id key — index X.
Heavy filter + input	useTransition + deferredValue.
Static UI	Vue patchFlag / React.memo.
Maximum perf	Solid / Svelte (skip VDOM).
Type-switch UI	wrap in same outer type to preserve children.

기본값: 매 React 19 + Suspense + Transition + 매 stable key.

🔗 Graph

• 부모: Virtual DOM과 Reconciliation · Reconciliation
• 변형: React Fiber · Vue Reactivity
• 응용: Animation

🤖 LLM 활용

언제: 매 keyed-list bug 의 explain, 매 type-swap unmount 의 진단. 언제 X: 매 specific framework internal — 매 source code 의 read.

❌ 안티패턴

• Index as key with reorder: 매 wrong identity → state mix.
• Random key per render: 매 매 unmount + remount.
• Inline objects/arrays as deps: 매 referential change → memo bypass.
• Massive un-keyed list: 매 O(n) DOM ops 매 frame.

🧪 검증 / 중복

• Verified (react.dev reconciliation, vuejs.org renderer, Solid docs).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — VDOM diff + Fiber + Vue patchFlag