2nd/10_Wiki/Topics/Frontend/Concurrent Features.md

---
id: wiki-2026-0508-concurrent-features
title: Concurrent Features (React 18+)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [React Concurrent Mode, useTransition, useDeferredValue]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [react, concurrent, performance, frontend]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript
  framework: React 19
---

# Concurrent Features (React 18+)

## 매 한 줄
> **"매 render 매 interruptible 하다"**. React 18 부터 매 concurrent renderer — `useTransition`, `useDeferredValue`, `Suspense`, automatic batching, streaming SSR 매 모두 매 high-priority update 가 low-priority 를 preempt 가능한 architecture 위에 build.

## 매 핵심

### 매 핵심 features
- **Automatic batching**: promise / setTimeout / native event 모두 batch.
- **`startTransition` / `useTransition`**: 매 non-urgent state update marking.
- **`useDeferredValue`**: input 매 lag 없이 expensive list 매 deferred.
- **`Suspense`**: data fetching boundary, fallback UI.
- **Streaming SSR**: `renderToPipeableStream` (Node), `renderToReadableStream` (Edge).
- **`useId`**: SSR-safe unique id.
- **`use()` hook (React 19)**: unwrap promise/context inside render.

### 매 priority levels
1. Sync / urgent (user input).
2. Default (most state updates).
3. Transition (`startTransition`).
4. Idle.

### 매 응용
1. 매 typeahead search — input snappy + results deferred.
2. Tab switching — 매 stale UI keeps interactive.
3. Streaming page render — 매 fastest paint then progressively fill.

## 💻 패턴

### useTransition for non-urgent updates
```tsx
import { useState, useTransition } from 'react';

function Filter({ items }: { items: Item[] }) {
  const [query, setQuery] = useState('');
  const [filtered, setFiltered] = useState(items);
  const [isPending, startTransition] = useTransition();

  const onChange = (v: string) => {
    setQuery(v); // urgent — input responds immediately
    startTransition(() => {
      setFiltered(items.filter((i) => i.name.includes(v))); // non-urgent
    });
  };

  return (
    <>
      <input value={query} onChange={(e) => onChange(e.target.value)} />
      {isPending && <Spinner />}
      <List items={filtered} />
    </>
  );
}
```

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

function Search({ items }: { items: Item[] }) {
  const [query, setQuery] = useState('');
  const deferred = useDeferredValue(query);
  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <SlowList items={items} query={deferred} />
    </>
  );
}

const SlowList = memo(({ items, query }: { items: Item[]; query: string }) => {
  return <ul>{items.filter((i) => i.name.includes(query)).map((i) => <li key={i.id}>{i.name}</li>)}</ul>;
});
```

### Suspense boundary
```tsx
import { Suspense } from 'react';

function App() {
  return (
    <Suspense fallback={<Skeleton />}>
      <UserProfile id={42} />
      <Suspense fallback={<PostsSkeleton />}>
        <Posts userId={42} />
      </Suspense>
    </Suspense>
  );
}
```

### use() hook (React 19)
```tsx
import { use, Suspense } from 'react';

function Profile({ promise }: { promise: Promise<User> }) {
  const user = use(promise); // 매 unwrap inside render
  return <h1>{user.name}</h1>;
}

// caller
<Suspense fallback={<Spinner />}>
  <Profile promise={fetchUser(42)} />
</Suspense>
```

### Streaming SSR (Node)
```ts
import { renderToPipeableStream } from 'react-dom/server';

server.get('/', (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, {
    bootstrapScripts: ['/main.js'],
    onShellReady() { res.statusCode = 200; pipe(res); },
    onError(err) { console.error(err); },
  });
});
```

### Automatic batching across async
```tsx
function handleClick() {
  // React 18+: 매 둘 다 single render
  setTimeout(() => {
    setCount((c) => c + 1);
    setFlag((f) => !f);
  }, 0);
}
```

### flushSync for opt-out
```tsx
import { flushSync } from 'react-dom';

flushSync(() => setItems(next)); // 매 sync flush — DOM ready
scrollToBottom(); // 매 새 item 매 already mounted
```

## 매 결정 기준
| 상황 | Feature |
|---|---|
| Slow filter blocks input | `useTransition` or `useDeferredValue` |
| Async data in component tree | `Suspense` + `use()` |
| Need DOM after update | `flushSync` |
| SSR slow first byte | streaming SSR |
| Pre-React-18 codebase | upgrade first |

**기본값**: input UI 매 lag → `useDeferredValue`. Bigger state cascade → `useTransition`.

## 🔗 Graph
- 부모: [[React]] · [[Performance]]
- 변형: [[Suspense]] · [[Server-Components]] · [[Streaming-SSR]]
- 응용: [[Remix]]
- Adjacent: [[Code-Splitting]]

## 🤖 LLM 활용
**언제**: 매 input lag, expensive list, async-heavy tree, SSR perf.
**언제 X**: 매 trivial UI, 매 add-only sync state.

## ❌ 안티패턴
- **`startTransition` for urgent input**: 매 input 매 still feel laggy.
- **No `Suspense` boundary 위 `use()`**: 매 throws 매 above-tree fallback 까지 propagate.
- **Mixing `flushSync` everywhere**: 매 defeats concurrent benefits.

## 🧪 검증 / 중복
- Verified (react.dev official docs).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — React 18/19 concurrent features + patterns |