2nd/10_Wiki/Topic_Programming/Architecture/Fiber_Architecture.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-fiber-architecture	Fiber Architecture	10_Wiki/Topics	verified	self	React Fiber Reconciler	none	A	0.9	applied	react frontend reconciliation		2026-05-10	pending	language framework typescript 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 (개념)

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 (개념)

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)

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)

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)

// 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

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
• 응용: Suspense · useTransition · useDeferredValue · Streaming SSR
• Adjacent: Virtual DOM과 Reconciliation · 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) 정리