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

---
id: wiki-2026-0508-time-slicing
title: Time Slicing
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [타임 슬라이싱, Concurrent Rendering, React Concurrent]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [react, performance, concurrent, scheduling]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react-19
---

# Time Slicing

## 매 한 줄
> **"매 long render 를 작은 chunk 로 쪼개 매 main thread 의 yield"**. React 18+ Concurrent Rendering 의 core mechanism — `startTransition`, `useDeferredValue`, Suspense 가 매 expose. 2026 React 19 + Activity API 가 매 확장.

## 매 핵심

### 매 동작
- React scheduler 가 매 5ms budget 단위로 work.
- 매 budget exceed 시 `MessageChannel` 로 yield.
- 매 input event / paint 의 우선 처리.
- 매 interruptible — 매 render 가 stale 되면 throw away.

### 매 priority
- **Sync/Discrete** (click, input): 즉시.
- **Continuous** (mouseover, scroll): high.
- **Transition** (`startTransition`): low — interruptible.
- **Idle**: 매 background.

### 매 응용
1. 매 large list filter 의 typing lag 방지.
2. 매 tab switch 의 immediate response.
3. 매 search-as-you-type — stale 결과 throw away.

## 💻 패턴

### `startTransition`
```tsx
import { startTransition, useState } from 'react';

function SearchPage() {
  const [input, setInput] = useState('');
  const [query, setQuery] = useState('');

  return (
    <input
      value={input}
      onChange={(e) => {
        setInput(e.target.value); // 매 urgent — 즉시 반영
        startTransition(() => {
          setQuery(e.target.value); // 매 transition — interruptible
        });
      }}
    />
  );
}
```

### `useTransition` with pending
```tsx
import { useTransition, useState } from 'react';

function TabSwitcher() {
  const [tab, setTab] = useState<'a' | 'b' | 'c'>('a');
  const [isPending, startTransition] = useTransition();

  return (
    <>
      <nav style={{ opacity: isPending ? 0.6 : 1 }}>
        {(['a', 'b', 'c'] as const).map(t => (
          <button key={t} onClick={() => startTransition(() => setTab(t))}>
            {t}
          </button>
        ))}
      </nav>
      {tab === 'a' && <HeavyA />}
      {tab === 'b' && <HeavyB />}
      {tab === 'c' && <HeavyC />}
    </>
  );
}
```

### `useDeferredValue`
```tsx
import { useDeferredValue, useState, memo } from 'react';

function App() {
  const [text, setText] = useState('');
  const deferred = useDeferredValue(text);
  // 매 deferred 는 lag behind — 매 heavy list 가 매 stale value 로 render

  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <SlowList query={deferred} />
    </>
  );
}

const SlowList = memo(function SlowList({ query }: { query: string }) {
  // 매 expensive filter — 매 transition 으로 interruptible
  const items = bigDataset.filter(d => d.includes(query));
  return <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>;
});
```

### React 19 Activity (formerly Offscreen)
```tsx
import { Activity } from 'react';

function TabContainer({ active }: { active: 'a' | 'b' }) {
  return (
    <>
      <Activity mode={active === 'a' ? 'visible' : 'hidden'}>
        <HeavyA />
      </Activity>
      <Activity mode={active === 'b' ? 'visible' : 'hidden'}>
        <HeavyB />
      </Activity>
    </>
  );
  // 매 hidden 매 unmount 안함 — state 보존, 매 background pre-render
}
```

### Manual time slicing (low-level)
```typescript
// 매 React 외부에서 — 매 scheduler/postTask
async function processInChunks<T>(items: T[], fn: (x: T) => void) {
  const CHUNK = 50;
  for (let i = 0; i < items.length; i += CHUNK) {
    items.slice(i, i + CHUNK).forEach(fn);
    if ('scheduler' in window && 'yield' in (window as any).scheduler) {
      await (window as any).scheduler.yield();
    } else {
      await new Promise(r => setTimeout(r, 0));
    }
  }
}
```

### Detecting jank
```typescript
// 매 Long Animation Frame API (Chrome 123+)
const obs = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn('Long task:', entry.duration, 'ms', entry);
    }
  }
});
obs.observe({ type: 'long-animation-frame', buffered: true });
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| 매 typing lag (heavy list) | `useDeferredValue` |
| 매 tab/route switch | `useTransition` + Suspense |
| 매 explicit user-initiated heavy update | `startTransition` |
| 매 hidden tab pre-warm | Activity (React 19) |
| 매 non-React heavy work | `scheduler.yield()` / chunking |

**기본값**: 매 heavy render → `useDeferredValue`. 매 user action → `startTransition`.

## 🔗 Graph
- 부모: [[React]] · [[Concurrent_Rendering]]
- 변형: [[Suspense]]
- 응용: [[useTransition]] · [[useDeferredValue]] · [[startTransition]]

## 🤖 LLM 활용
**언제**: 매 `startTransition` placement, 매 jank diagnosis, 매 deferred value introduction.
**언제 X**: 매 root cause 가 매 algorithm — 매 time slicing 으로 fix 안됨. 매 actual optimization 필요.

## ❌ 안티패턴
- **`startTransition` everywhere**: 매 input 까지 transition → 매 lag 보임.
- **Heavy work in transition without memo**: 매 매번 re-run.
- **Forgetting Suspense boundary**: 매 fallback 안 보임.
- **Time slicing as algorithm fix**: 매 O(n²) 는 여전히 O(n²).

## 🧪 검증 / 중복
- Verified (React 19 docs, React Conf 2024, Andrew Clark talks, 2026).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — React 19 time slicing with Activity API, scheduler.yield |