2nd/10_Wiki/Topics/Architecture/Fiber_Architecture.md

---
id: wiki-2026-0508-fiber-architecture
title: Fiber Architecture
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [React Fiber, Reconciler]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [react, frontend, reconciliation]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react
---

# Fiber Architecture

## 매 한 줄
> **"매 reconciliation 을 interruptible 한 unit 으로 쪼갠다"**. 매 React 16 (2017) 에서 stack reconciler 를 대체 — 매 work loop 가 매 fiber node 단위로 yield 가능하므로 매 concurrent rendering, Suspense, transitions 의 토대. 2026 React 19 의 Server Components, Actions, `use` hook 모두 매 fiber tree 위에서 동작.

## 매 핵심

### 매 fiber node
- 매 React element 1:1 의 mutable bookkeeping object.
- 매 `child / sibling / return` pointer 로 tree linkage (매 array 가 아닌 linked list).
- `pendingProps`, `memoizedProps`, `memoizedState`, `effectTag`, `lanes`.
- 매 두 tree: **current** (committed) + **workInProgress** (next render) — 매 double buffering.

### 매 work loop
1. **Render phase** (interruptible) — 매 beginWork → completeWork DFS, 매 frame budget 만료 시 yield.
2. **Commit phase** (synchronous) — 매 DOM mutation, ref attach, layout effect.
3. **Lanes** — 매 priority bitmask (Sync, Default, Transition, Idle).

### 매 응용
1. `useTransition` / `useDeferredValue` — 매 low-priority lane.
2. Suspense boundary — 매 throw promise → fallback render.
3. Server Components (RSC) — 매 server fiber 의 serialize.
4. Concurrent rendering / time slicing.

## 💻 패턴

### Fiber node 의 shape (개념)
```ts
type Fiber = {
  type: any; key: string | null;
  child: Fiber | null; sibling: Fiber | null; return: Fiber | null;
  alternate: Fiber | null; // current ↔ workInProgress
  pendingProps: any; memoizedProps: any; memoizedState: any;
  flags: number; // Placement | Update | Deletion
  lanes: number; childLanes: number;
  stateNode: any; // DOM node | class instance
};
```

### Work loop (개념)
```ts
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {
    workInProgress = performUnitOfWork(workInProgress);
  }
}
function performUnitOfWork(fiber: Fiber): Fiber | null {
  const next = beginWork(fiber.alternate, fiber, renderLanes);
  if (next === null) return completeUnitOfWork(fiber);
  return next;
}
```

### useTransition (React 19)
```tsx
import { useTransition, useState } from "react";

export function Search() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<string[]>([]);
  const [isPending, startTransition] = useTransition();

  return (
    <>
      <input value={query} onChange={e => {
        setQuery(e.target.value);                       // sync lane
        startTransition(() => setResults(filter(e.target.value))); // transition lane
      }}/>
      {isPending ? <Spinner/> : <List items={results}/>}
    </>
  );
}
```

### Suspense + use (React 19)
```tsx
import { Suspense, use } from "react";

function Profile({ promise }: { promise: Promise<User> }) {
  const user = use(promise); // 매 throw 시 Suspense fallback
  return <h1>{user.name}</h1>;
}

export default () => (
  <Suspense fallback={<Skeleton/>}>
    <Profile promise={fetchUser()}/>
  </Suspense>
);
```

### Server Component (RSC)
```tsx
// app/page.tsx — 매 server fiber, payload 로 serialize
export default async function Page() {
  const posts = await db.posts.findMany();
  return <PostList posts={posts}/>; // 매 client 로는 RSC payload 전송
}
```

### useDeferredValue
```tsx
const deferred = useDeferredValue(query); // 매 stale value 로 render, urgent update 우선
```

### Lane priority debug (React DevTools)
```
Profiler tab → Highlight transitions → 매 어느 lane 에서 commit 됐는지 확인
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| 즉시 반영 input | 직접 setState (sync lane) |
| 무거운 list filter | startTransition (transition lane) |
| Async data 의 render | Suspense + use |
| Server-only data fetch | RSC (`async function Page`) |
| Stale UI 허용 + responsive | useDeferredValue |

**기본값**: React 19 + RSC (Next.js App Router), client side 는 transition + Suspense.

## 🔗 Graph
- 부모: [[React]] · [[Reconciliation]]
- 변형: [[React Server Components — 경계 의식]] · [[Concurrent Features|Concurrent Rendering]]
- 응용: [[Suspense]] · [[useTransition]] · [[useDeferredValue]] · [[Streaming SSR]]
- Adjacent: [[Virtual DOM과 Reconciliation|Virtual DOM]] · [[Hydration]]

## 🤖 LLM 활용
**언제**: 매 jank 진단, transition vs sync 결정, Suspense boundary 위치 reasoning.
**언제 X**: 매 non-React framework — 매 Vue / Svelte / Solid 는 매 다른 reconciler.

## ❌ 안티패턴
- **Sync setState in event for heavy work**: 매 main thread block.
- **Suspense without boundary**: 매 root crash — 매 ErrorBoundary + Suspense pair.
- **useTransition for urgent input**: 매 typing latency 발생.
- **Mutating fiber internals**: 매 React 의 internal — 매 forward-compat 보장 X.
- **Effect 의 setState loop**: 매 무한 render — 매 dependency 정확히.

## 🧪 검증 / 중복
- Verified (React 19 release notes, Andrew Clark *fiber* RFC, React docs 2026, Vercel RSC docs).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — fiber + lanes + React 19 (RSC, use, transition) 정리 |