useTransition や useDeferredValue といった並行(Concurrent)機能とは何ですか?

Question

Accepted Answer

Concurrent React は、レンダリング作業を**中断・一時停止・優先順位付け**できます。一部の更新を**緊急でないトランジション**としてマークすることで、重い再レンダリングが保留中でも、緊急の更新(入力など)の応答性を保てます。

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // URGENT: keep the input snappy
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // NON-URGENT: can be interrupted
  });
}
// isPending lets you show a subtle "updating…" indicator
```

**なぜこれが役立つのか:** 巨大なリストのフィルタリングはコストが高い処理です。トランジションを使わないと、React は数千行を再レンダリングする間、入力をブロックするため、タイピングが遅く感じられます。高コストな更新を `startTransition` で包むことで、React は入力の更新を高優先度に保ち、別のキーを打つと進行中のフィルタリングレンダリングを**破棄**できます。古くてカクついたフレームが生じません。

## useDeferredValue

セッターを制御できない場合の、よりシンプルな代替手段です。値の「遅延した」コピーを提供します:

```jsx
const deferredQuery = useDeferredValue(query); // updates after urgent work settles
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## いつ使うか

これらは、素早いユーザー入力によって駆動される**高コストで緊急でない UI 更新**に使います。大規模データセットに対する入力に応じた検索、重いコンテンツを描画するタブ切り替え、大きなフィルタ/ソート済みのテーブルなどです。シンプルなアプリでは不要であり、レンダリングが目に見える入力遅延を引き起こすほど重い場合にこそ真価を発揮します。