2nd/10_Wiki/Topics/Frontend/Lanes Model.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-lanes-model	Lanes Model	10_Wiki/Topics	verified	self	React Lanes React Priority Lanes Concurrent Lanes	none	A	0.9	applied	react scheduler concurrent lanes		2026-05-10	pending	language framework javascript 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 기본

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

import { startTransition, useState } from 'react';

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

useDeferredValue

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

Lane assignment by event

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

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

Detect priority of update (debug)

import { unstable_getCurrentPriorityLevel } from 'scheduler';
console.log(unstable_getCurrentPriorityLevel());
// 1 = Immediate, 2 = User-blocking, 3 = Normal, 4 = Low, 5 = Idle

Suspense retry lane

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