react19-concurrent-patterns

React 19 の並行処理パターン

React 19 では、移行作業を補完する新しい API が導入されました。このスキルでは、次の 2 つの点を扱います。

1. 維持 移行時に壊してはならない、既存の React 18 の並行処理パターン
2. 採用 移行の安定後に導入する価値のある、新しい React 19 の API

パート 1 維持：移行後も残すべき React 18 の並行処理パターン

これらのパターンは React 18 のコードベースに存在しており、誤って削除したり、壊したりしてはなりません。

createRoot R18 Orchestra による移行が済んでいる場合

R18 Orchestra の実行が済んでいる場合は、ReactDOM.render → createRoot への移行が完了しています。正しく移行されていることを確認してください。

// CORRECT React 19 root (same as React 18):
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

useTransition 移行不要

React 18 の useTransition は React 19 でも同じように動作します。移行中にこれらのパターンを変更しないでください。

// React 18 useTransition  unchanged in React 19:
const [isPending, startTransition] = useTransition();

function handleClick() {
  startTransition(() => {
    setFilteredResults(computeExpensiveFilter(input));
  });
}

useDeferredValue 移行不要

// React 18 useDeferredValue  unchanged in React 19:
const deferredQuery = useDeferredValue(query);

コード分割のための Suspense 移行不要

// React 18 Suspense with lazy  unchanged in React 19:
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <LazyComponent />
    </Suspense>
  );
}

---

パート 2 React 19 の新しい API

これらは、移行後のクリーンアップスプリントで採用する価値があります。移行中には導入せず、まず移行を安定させてください。

各新しい API の詳しいパターンについては、以下を参照してください。

• references/react19-use.md プロミスとコンテキストのための use() フック
• references/react19-actions.md Actions、useActionState、useFormStatus、useOptimistic
• references/react19-suspense.md データ取得のための Suspense（新しいパターン）

移行時の安全ルール

React 19 への移行中は、以下の並行モードのパターンには一切手を加えないでください。

# Verify nothing touched these during migration:
grep -rn "useTransition\|useDeferredValue\|Suspense\|startTransition" \
  src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

移行ツールがこれらのファイルを変更していた場合は、変更内容を確認してください。移行で変更されるべきなのは React API の表層（forwardRef、defaultProps など）のみであり、並行モードのロジックは変更されるべきではありません。