2nd/10_Wiki/Topics/Frontend/Lanes Model.md

---
id: wiki-2026-0508-lanes-model
title: Lanes Model
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [React Lanes, React Priority Lanes, Concurrent Lanes]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [react, scheduler, concurrent, lanes]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: javascript
  framework: react
---

# Lanes Model

## 매 한 줄
> **"매 31-bit bitmask 로 매 scheduling priority 를 매 표현 — 매 concurrent React 의 매 심장."**. React 18+ 의 매 Lanes 는 매 expiration time model 을 매 대체. 매 multiple priority 의 매 update 가 매 동시에 매 진행, 매 batch 가 매 lane group 단위. 매 2026 React 19 도 매 동일 model.

## 매 핵심

### 매 Bitmask 정의 (`ReactFiberLane.js`)
- 31 lanes. Bit 0 (rightmost) = 매 highest priority.
- **SyncLane** = `0b0000000000000000000000000000001` — 매 click, input.
- **InputContinuousLane** — 매 drag, scroll.
- **DefaultLane** — 매 useEffect setState 등.
- **TransitionLanes** (16 lanes) — 매 startTransition.
- **RetryLanes** — 매 Suspense retry.
- **IdleLane** — 매 lowest.
- **OffscreenLane** — 매 hidden subtree.

### 매 Lane 연산
- **Merge**: `a | b` — 매 여러 update 의 매 lane 합집합.
- **Subset**: `(a & b) === a` — 매 a 가 매 b 안에.
- **Higher priority**: 매 lower bit. `getHighestPriorityLane = lanes & -lanes`.
- **Pending**: 매 fiber.lanes / fiber.childLanes — 매 자기 + 매 subtree 의 매 pending.

### 매 Lifecycle
1. setState → `requestUpdateLane()` → 매 lane 결정 (event type / context).
2. `markRootUpdated(root, lane)` → root.pendingLanes 에 매 OR.
3. `ensureRootIsScheduled` → 매 highest priority lane 의 매 next render schedule.
4. `performConcurrentWorkOnRoot` → 매 lane subset render. 매 yieldable.
5. Commit 시 매 finishedLanes 를 매 pendingLanes 에서 매 clear.

### 매 응용
1. startTransition — 매 user input 과 매 분리.
2. useDeferredValue — 매 stale value 표시.
3. Suspense retry — 매 별도 lane 으로 매 burst 방지.

## 💻 패턴

### Lane bitmask 기본
```javascript
// React internal
const SyncLane             = /*       */ 0b0000000000000000000000000000001;
const InputContinuousLane  = /*       */ 0b0000000000000000000000000000100;
const DefaultLane          = /*       */ 0b0000000000000000000000000010000;
const TransitionLane1      = /*       */ 0b0000000000000000000000001000000;
const IdleLane             = /*       */ 0b0010000000000000000000000000000;
const OffscreenLane        = /*       */ 0b0100000000000000000000000000000;

function getHighestPriorityLane(lanes) {
  return lanes & -lanes;   // isolate lowest set bit
}
function includesNonIdleWork(lanes) {
  return (lanes & ~IdleLanes) !== 0;
}
```

### startTransition (user code)
```tsx
import { startTransition, useState } from 'react';

const [tab, setTab] = useState('home');
function select(next) {
  startTransition(() => setTab(next));   // → TransitionLane
}
```

### useDeferredValue
```tsx
const [query, setQuery] = useState('');
const deferred = useDeferredValue(query);   // lower priority lane
return <SearchResults q={deferred} />;
```

### Lane assignment by event
```javascript
// React internal: getCurrentEventPriority()
function eventPriorityFromEvent(eventName) {
  switch (eventName) {
    case 'click': case 'input': case 'submit':
      return DiscreteEventPriority;     // → SyncLane
    case 'drag': case 'scroll': case 'mousemove':
      return ContinuousEventPriority;   // → InputContinuousLane
    default:
      return DefaultEventPriority;      // → DefaultLane
  }
}
```

### Render lane subset
```javascript
// performConcurrentWorkOnRoot (simplified)
function renderRootConcurrent(root, lanes) {
  workInProgress = createWorkInProgress(root.current, null);
  workInProgressRootRenderLanes = lanes;
  while (workInProgress !== null && !shouldYield()) {
    performUnitOfWork(workInProgress);
  }
}
```

### Detect priority of update (debug)
```javascript
import { unstable_getCurrentPriorityLevel } from 'scheduler';
console.log(unstable_getCurrentPriorityLevel());
// 1 = Immediate, 2 = User-blocking, 3 = Normal, 4 = Low, 5 = Idle
```

### Suspense retry lane
```javascript
// When boundary catches → throw to nearest Suspense → schedule retry on RetryLane
// User code just renders <Suspense fallback={<Spin/>}><Lazy/></Suspense>
```

## 매 결정 기준
| 상황 | Lane |
|---|---|
| 매 click / input | SyncLane |
| 매 scroll / drag | InputContinuousLane |
| 매 setState in effect | DefaultLane |
| 매 startTransition | TransitionLane |
| 매 Suspense retry | RetryLane |
| 매 hidden subtree pre-render | OffscreenLane |
| 매 background prefetch | IdleLane |

**기본값**: 매 React 가 매 자동 선택. 매 user 는 매 startTransition / useDeferredValue 만 매 명시.

## 🔗 Graph
- 부모: [[React]] · [[React Fiber]]
- 변형:  (legacy) · [[Scheduler]]
- 응용: [[startTransition]] · [[useDeferredValue]] · [[Suspense]]
- Adjacent: [[Concurrent Features|Concurrent Rendering]] · [[Time_Slicing|Time Slicing]]

## 🤖 LLM 활용
**언제**: 매 React internal 분석, 매 perf debug, 매 transition 설계.
**언제 X**: 매 일반 product code — 매 자동 lane 선택 신뢰.

## ❌ 안티패턴
- **모든 setState 를 startTransition**: 매 input 의 매 instant feedback 손실.
- **useDeferredValue 의 매 너무 깊은 위치**: 매 메모이제이션 풀림.
- **Lane 직접 조작 시도**: 매 unstable internal API.
- **Sync 강제 (flushSync) 남발**: 매 concurrent 이점 무.

## 🧪 검증 / 중복
- Verified (React 18/19 source — `ReactFiberLane.js`, Andrew Clark 의 매 RFC).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — 매 lane bitmask + lifecycle |