Summary

React 18 は段階的導入可能な新しい並行レンダラーと、それを使うための新しいルート API を導入します。本稿はエンジニア向けに実務的な移行手順と注意点をまとめたものです。まずパッケージを更新してください:

• npm: npm install react react-dom
• yarn: yarn add react react-dom

Key Points

• createRoot に移行

  • 既存の ReactDOM.render は廃止。react-dom/client の createRoot(container).render(<App />) に置き換える。アンマウントは root.unmount()。
  • サーバーサイドのハイドレーションは hydrateRoot(container, <App />) に変更。

• レンダリングコールバックの置き換え

  • 旧 render のコールバックは Suspense 下で期待通りに動かないため、useEffect 等で副作用を処理するように書き換える。

• 自動バッチング

  • createRoot 利用時はすべての更新が自動でバッチされる（タイムアウト・Promise・ネイティブイベント含む）。即時更新が必要な場合は flushSync を使用してオプトアウト。

• サーバー側レンダリング API の更新

  • Node のストリーミングは renderToPipeableStream へ移行。エッジ環境用に renderToReadableStream を導入。既存の renderToString / renderToStaticMarkup は Suspense のサポートが限定的。

• TypeScript 定義の更新

  • @types/react と @types/react-dom を最新に更新。children を明示する等、型が厳格化された変更に対応する必要あり。自動移行スクリプトを活用。

• ライブラリ向け新API

  • 外部ストア対応の useSyncExternalStore、スタイル注入向けの useInsertionEffect、および startTransition / useDeferredValue / useId などの並行対応 API を確認・採用。

• Strict Mode の開発時チェック

  • 開発時にコンポーネントを一度アンマウント→再マウントして副作用の堅牢性を検査。問題が出る場合は移行中に一時的に StrictMode を外して修正する。

• テスト環境の設定

  • createRoot に切り替えたテストで act(...) 警告が出たら、テストセットアップで globalThis.IS_REACT_ACT_ENVIRONMENT = true を設定。

• ブラウザサポート

  • Internet Explorer はサポート外。IE サポートが必要な場合は移行計画を検討する。

Recommended migration flow

• 依存更新 (react, react-dom, @types/*) → createRoot/hydrateRoot に置換 → テストと Strict Mode を実行 → 型およびライブラリ互換性の修正 → 本番リリース。

短い手順で段階的に進め、問題は都度修正してから Strict Mode を再度有効にすることを推奨します。