2nd/10_Wiki/Topics/Frontend/Diffing Algorithm.md

---
id: wiki-2026-0508-diffing-algorithm
title: Diffing Algorithm
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [VDOM Diff, Reconciliation]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [react, vue, vdom, reconciliation]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript
  framework: 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)
```jsx
// 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
```jsx
{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)
```jsx
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)
```html
<!-- 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
```html
<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
```typescript
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)
```typescript
// 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
```jsx
// 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|Virtual DOM]] · [[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 |