2nd/10_Wiki/Topics/AI_and_ML/useTransition.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-usetransition	useTransition	10_Wiki/Topics	verified	self	React useTransition Concurrent Transitions startTransition Hook	none	A	0.9	applied	react hook concurrent performance react-19		2026-05-10	pending	language framework typescript React 19

useTransition

매 한 줄

"매 useTransition 의 핵심 = 'state update 의 non-urgent 로 mark 의 UI 의 freeze 의 prevent'.". React 18 (2022) 의 introduction 의 since 매 concurrent rendering 의 user-facing API. 2026 React 19 era 매 Actions 의 native integration 의 하여 매 async server mutation 의 also 의 cover.

매 핵심

매 Signature

const [isPending, startTransition] = useTransition();
// startTransition: (action: () => void | Promise<void>) => void
// isPending: boolean — true while transition in progress

매 Mechanism

• Urgent updates: typing, click, hover — 매 immediate render.
• Transition updates: filter, search, navigation — 매 startTransition 의 wrap → low priority.
• React 의 scheduler 의 urgent first 의 process, transition 의 interrupt 의 가능 if 매 새 urgent update 의 arrive.
• isPending: 매 spinner / skeleton 의 show 의 used.

매 React 19 추가

1. Async actions: startTransition(async () => { await save(); }) 의 native support.
2. useActionState: form action 의 transition 의 자동 wrap.
3. useOptimistic: optimistic UI 의 transition pending 동안.

💻 패턴

Pattern 1: Search filter (urgent input + transition list)

import { useState, useTransition } from 'react';

function SearchableList({ items }: { items: string[] }) {
  const [query, setQuery] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setQuery(value); // urgent

    startTransition(() => {
      // expensive filter — non-urgent
      setFilteredItems(items.filter(i => i.toLowerCase().includes(value.toLowerCase())));
    });
  };

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <span>Filtering...</span>}
      <ul>{filteredItems.map(i => <li key={i}>{i}</li>)}</ul>
    </>
  );
}

Pattern 2: Tab switching (heavy children)

function TabContainer() {
  const [tab, setTab] = useState<'home' | 'reports' | 'analytics'>('home');
  const [isPending, startTransition] = useTransition();

  const switchTab = (next: typeof tab) => {
    startTransition(() => setTab(next));
  };

  return (
    <>
      <nav>
        <button onClick={() => switchTab('home')}>Home</button>
        <button onClick={() => switchTab('reports')}>Reports</button>
        <button onClick={() => switchTab('analytics')}>Analytics</button>
      </nav>
      <div style={{ opacity: isPending ? 0.5 : 1 }}>
        {tab === 'home' && <Home />}
        {tab === 'reports' && <HeavyReports />}
        {tab === 'analytics' && <HeavyAnalytics />}
      </div>
    </>
  );
}

Pattern 3: React 19 async action

function SaveButton({ data }: { data: FormData }) {
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);

  const handleSave = () => {
    startTransition(async () => {
      try {
        await fetch('/api/save', { method: 'POST', body: data });
      } catch (e) {
        setError((e as Error).message);
      }
    });
  };

  return (
    <>
      <button onClick={handleSave} disabled={isPending}>
        {isPending ? 'Saving...' : 'Save'}
      </button>
      {error && <p role="alert">{error}</p>}
    </>
  );
}

Pattern 4: useActionState (React 19) 의 wrap

import { useActionState } from 'react';

async function submitForm(prev: State, formData: FormData): Promise<State> {
  const res = await fetch('/api/contact', { method: 'POST', body: formData });
  return res.ok ? { ok: true } : { ok: false, error: 'Failed' };
}

function ContactForm() {
  const [state, action, isPending] = useActionState(submitForm, { ok: false });
  // useActionState 의 internally 의 useTransition 의 use
  return (
    <form action={action}>
      <input name="email" />
      <button disabled={isPending}>Send</button>
      {state.error && <p>{state.error}</p>}
    </form>
  );
}

Pattern 5: Standalone startTransition (no isPending needed)

import { startTransition } from 'react';

// outside component — useful for event handlers in stores
function navigateTo(path: string) {
  startTransition(() => {
    router.push(path);
  });
}

Pattern 6: Combine 의 with Suspense

function ProductPage({ id }: { id: string }) {
  const [currentId, setCurrentId] = useState(id);
  const [isPending, startTransition] = useTransition();

  return (
    <>
      <button onClick={() => startTransition(() => setCurrentId('next'))}>
        Next
      </button>
      <Suspense fallback={<Skeleton />}>
        <ProductDetails id={currentId} />
      </Suspense>
      {isPending && <Spinner overlay />}
    </>
  );
}
// Suspense 의 fallback 의 X show — old UI 의 stays 의 while transition pending

Pattern 7: Prevent unwanted suspense boundaries

// useDeferredValue 의 vs useTransition decision:
// - You control where state is set → useTransition
// - State 의 from props / external → useDeferredValue
const [isPending, startTransition] = useTransition();
startTransition(() => setQuery(input)); // I own setQuery

매 결정 기준

상황	Approach
Heavy filter / sort 의 input 의 reactive	useTransition
Tab / route switching with heavy children	useTransition + Suspense
Async server mutation (React 19)	useTransition (async) or useActionState
State 의 owned externally (props)	useDeferredValue
Throttle / debounce	setTimeout — useTransition 의 X

기본값: useTransition for any expensive state update 의 user-initiated.

🔗 Graph

• 부모: Concurrent-React
• 변형: useDeferredValue · useOptimistic
• Adjacent: Suspense

🤖 LLM 활용

언제: refactor expensive synchronous update 의 transition / migrate React 18→19 의 useActionState 의 detection. 언제 X: 매 actual user perception 의 measurement 의 X — 매 React DevTools Profiler 의 use.

❌ 안티패턴

• Wrap urgent updates: input value setter 의 transition 의 wrap → laggy typing.
• Throttle replacement: useTransition 의 throttle 의 X — 매 single batch 의 latest 의 commit, not 의 rate-limit.
• Side effects in startTransition: API call 의 directly (React 18) — React 19 async action 의 use.
• Forgetting isPending: 매 user feedback 의 missing → perceived freeze.
• Wrap synchronous side effects: localStorage write 의 transition 의 wrap 의 useless.

🧪 검증 / 중복

• Verified: react.dev/reference/react/useTransition (React 19), React 19 release notes.
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — canonical useTransition reference (React 19)