React 19 は『開発体験の大改善』
React 19 はコンパイラ最適化と新フック追加で、開発体験が大きく改善されました。本記事では編集部の視点で、深掘りした活用を公開情報をもとに整理します。React 学習ロードマップ もご参考に。
主要な新機能
(1) React Compiler：自動メモ化。(2) use フック：Promise/Context 直接使用。(3) Actions：Server Actions と統合。(4) useOptimistic：楽観的UI。(5) useFormStatus：フォーム状態。
React Compiler
(1) 自動的に memo/useCallback 適用。(2) 手動最適化不要(公開情報をもとに)。(3) Babel プラグイン。(4) opt-in：段階的導入可。(5) パフォーマンスバグ削減。React パフォーマンス もご参考に。
use フック
(1) 条件分岐内で使える。(2) Promise を resolve。(3) Context を直接取得。(4) Suspense と統合。(5) Server Components で威力。
Actions と Form 統合
(1) action prop に関数。(2) useFormStatus：状態取得。(3) useFormState：state 管理。(4) useOptimistic：楽観的更新。(5) Progressive Enhancement。Next.js Server Actions もご参考に。
その他の改善
(1) Document Metadata：title/meta 直接記述可能。(2) Stylesheet：自動ロード。(3) preload/preinitAPI。(4) Refs as Props：forwardRef 不要。(5) Error Boundary 改善。
マイグレーション
(1) v18 → v19 移行ガイド。(2) 非推奨APIの整理。(3) React Compiler は別途有効化。(4) StrictMode の挙動変化。(5) npm packageのアップデート確認。Next.js App Router もご参考に。
React Compiler 採用のリアル
(1) 大幅なパフォーマンス改善。(2) 手動 useMemo/useCallback 削減。(3) 初期は ESLint 警告増。(4) 段階導入：file/component 単位。(5) テストで検証必須。
失敗しがちなパターン
(1) React Compiler 全力導入で予期せぬ挙動。(2) use フック 過剰使用。(3) 非推奨 API 残存。(4) 古いライブラリ非対応。(5) テスト不足。対策は、(1)段階導入、(2)Server Components 中心、(3)定期 codemod、(4)依存性検証、(5)Compiler テスト、です。