Summary

React 19 はパフォーマンス改善のためにいくつかの破壊的変更を含みます。多くのアプリに影響は出ない想定ですが、移行を簡単にするために react@18.3（互換性警告追加）への一時アップグレードと、公式の codemod を使った自動変換を推奨します。

Key Points

• 事前準備
  • まず react@18.3 に上げて非推奨 API の警告を確認する。
  • 新しい JSX トランスフォーム（modern JSX transform）が必須。未有効時に警告が出る。
• インストール（例）
  • npm: npm install --save-exact react@^19.0.0 react-dom@^19.0.0
  • TypeScript: npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0
• 自動変換（codemod）
  • 公式レシピで一括実行: npx codemod @latest react/19/migration-recipe
  • 個別 codemod も用意（replace-reactdom-render、replace-string-ref 等）。
• 重要な破壊的変更（即対応が必要）
  • レンダー内の例外は再スローされなくなった。プロダクションのエラー集約を使う場合はカスタムハンドラ（createRoot/hydrateRoot の onUncaughtError / onCaughtError）を登録する。
  • 削除された API（移行必須）: propTypes / 関数コンポーネントの defaultProps、古い Context (contextTypes/getChildContext)、文字列 refs、module pattern factories、createFactory、react-dom の旧レンダリング API（render/hydrate/unmountComponentAtNode）、ReactDOM.findDOMNode、react-dom/test-utils の一部。
  • テスト: act は react パッケージからインポートするように変更。
• 移行の具体策（短く実践的）
  • ReactDOM.render → createRoot(...).render(...)
  • hydrate → hydrateRoot(...)
  • unmountComponentAtNode → root.unmount()
  • 文字列 refs → ref コールバックあるいは createRef に置換（codemodあり）。
  • propTypes は TypeScript へ移行、または別ライブラリに置換（codemodあり）。
  • Legacy Context は React.createContext + contextType / <Context.Provider> に移行。
  • テストの浅いレンダリングは再考（@testing-library/react 等を推奨）。

References

• アップグレード前に react@18.3 で警告を把握すること。
• 公式 codemod リポジトリと React 19 リリースノートを参照し、CI 上で codemod とテストを走らせてから本番にデプロイすること。