2nd/10_Wiki/Topics/Architecture/Time_Slicing.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-time-slicing	Time Slicing	10_Wiki/Topics	verified	self	타임 슬라이싱 Concurrent Rendering React Concurrent	none	A	0.9	applied	react performance concurrent scheduling		2026-05-10	pending	language framework typescript 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

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

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

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)

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)

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

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