2nd/10_Wiki/Topics/Frontend/동시성 렌더링 (Concurrent Rendering).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-동시성-렌더링-concurrent-rendering	동시성 렌더링 (Concurrent Rendering)	10_Wiki/Topics	verified	self	Concurrent React useTransition Suspense Time Slicing	none	A	0.95	applied	frontend react concurrent suspense transitions		2026-05-10	pending	language framework typescript react

동시성 렌더링 (Concurrent Rendering)

매 한 줄

"매 render를 interruptible 하게". React 18+ 의 핵심 — render 작업을 chunk 로 쪼개서 user input 처리 우선. useTransition, Suspense, useDeferredValue 가 API. React 19 에서 Server Components / Actions 와 결합되어 SSR/streaming 의 표준이 됨.

매 핵심

매 무엇이 concurrent 인가

• 기존 (legacy): render 시작하면 매 끝까지 sync — 그 사이 user input X.
• Concurrent: render 를 작은 chunk 로 — frame budget (5ms) 다 쓰면 yield → user input 처리 → 재개.
• 결과: typing/scroll 중에도 heavy render 가 막지 않음.

매 핵심 API

• useTransition: state update 를 "transition" 으로 mark — interruptible, lower priority.
• useDeferredValue: value 의 stale version 을 사용 — debounce 와 비슷하지만 schedule-aware.
• Suspense: async boundary — use(promise) / lazy() 와 결합.
• startTransition: hook 외부에서 transition 사용.
• <Activity> (React 19+): hidden sub-tree 의 mount 유지 + render 안 함.

매 응용

1. Filter / search (타이핑 안 끊김).
2. Tab switching (heavy tab content async load).
3. Route navigation (이전 page 보여주며 next page prepare).
4. Streaming SSR (renderToReadableStream).

💻 패턴

useTransition for filter

function ProductList({ allProducts }: { allProducts: Product[] }) {
  const [query, setQuery] = useState('');
  const [filtered, setFiltered] = useState(allProducts);
  const [isPending, startTransition] = useTransition();

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setQuery(e.target.value); // 매 high priority — input 즉시 반영
    startTransition(() => {
      setFiltered(allProducts.filter(p => p.name.includes(e.target.value)));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      <div style={{ opacity: isPending ? 0.5 : 1 }}>
        {filtered.map(p => <Row key={p.id} product={p} />)}
      </div>
    </>
  );
}

useDeferredValue for chart

function Dashboard({ filter }: { filter: string }) {
  const deferred = useDeferredValue(filter);
  // 매 chart re-render 는 typing 후에 처리됨.
  return <ExpensiveChart filter={deferred} />;
}

Suspense + use() (React 19)

function User({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise); // 매 promise 대기 → Suspense 가 fallback
  return <h1>{user.name}</h1>;
}

<Suspense fallback={<Skeleton />}>
  <User userPromise={fetchUser(id)} />
</Suspense>

Streaming SSR (Next.js / Remix)

// app/page.tsx
export default async function Page() {
  return (
    <>
      <Header /> {/* 매 즉시 stream */}
      <Suspense fallback={<Skeleton />}>
        <SlowFeed />  {/* 매 준비 되는대로 stream */}
      </Suspense>
    </>
  );
}

Route transition with startTransition

import { startTransition } from 'react';

function NavLink({ to }: { to: string }) {
  const navigate = useNavigate();
  return (
    <a onClick={(e) => {
      e.preventDefault();
      startTransition(() => navigate(to));
    }}>...</a>
  );
}

Activity (React 19) for tab persistence

<Activity mode={activeTab === 'feed' ? 'visible' : 'hidden'}>
  <Feed /> {/* 매 hidden 시 unmount X — state 보존, render 비용 0 */}
</Activity>

Avoiding tearing — useSyncExternalStore

const value = useSyncExternalStore(
  store.subscribe,
  store.getSnapshot,
  store.getServerSnapshot
);
// 매 concurrent rendering 중 store value 일관성 보장.

Optimistic update with useOptimistic (React 19)

function Likes({ post }: { post: Post }) {
  const [optimisticLikes, addLike] = useOptimistic(post.likes, (s, _) => s + 1);

  async function handleLike() {
    addLike(null); // 매 즉시 UI 반영
    await fetch(`/like/${post.id}`, { method: 'POST' });
  }

  return <button onClick={handleLike}>{optimisticLikes} likes</button>;
}

useActionState + form (React 19)

function Form() {
  const [state, action, isPending] = useActionState(submitAction, { error: null });
  return (
    <form action={action}>
      <input name="email" />
      <button disabled={isPending}>Submit</button>
      {state.error && <p>{state.error}</p>}
    </form>
  );
}

매 결정 기준

상황	Approach
Typing → heavy filter	useTransition + filter 결과 stale 표시.
Heavy chart depends on input	useDeferredValue.
Async data	Suspense + use(promise).
SSR	streaming + Suspense.
Tab UI	<Activity> hidden mode.
Form submission	useActionState + useOptimistic.

기본값: React 19 + Suspense (data) + useTransition (heavy state) + useDeferredValue (derived heavy).

🔗 Graph

• 부모: React · Rendering
• 변형: Suspense · Streaming SSR · Server Components
• 응용: useTransition · useDeferredValue · useOptimistic
• Adjacent: Time Slicing · Fiber · useSyncExternalStore

🤖 LLM 활용

언제: heavy render block UX, async data, streaming SSR, optimistic UX. 언제 X: 매 trivial render, sync logic only, React < 18.

❌ 안티패턴

• startTransition for input value: 매 typing 의 setQuery 도 transition 으로 → input lag. value 는 즉시, derived state 만 transition.
• Suspense without error boundary: error 시 무한 fallback — 매 ErrorBoundary 필수.
• useDeferredValue + setState in effect: deferred 를 dep 로 → infinite loop.
• Mixing legacy + concurrent: ReactDOM.render → ReactDOM.createRoot 로 migrate.
• Side effect in render: concurrent 에서 render 가 여러 번 — pure 해야 함.
• Read mutable external in render: useSyncExternalStore 사용 — tearing 방지.

🧪 검증 / 중복

• Verified (React 19 docs, "React Internals" Dan Abramov, react.dev/learn).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — React 19 (use, Activity, useOptimistic, useActionState)