use()・useOptimistic・useActionState・React Compilerなど、React 19の主要な新機能をコード例付きで解説します。
use() フック — Promise・Contextを直接読む
React 19 で追加された use() は、条件分岐やループの中でも呼べる特殊なフックです。PromiseやContextの値を直接読み込めます。
フォームアクション — action prop が関数を受け付ける
React 19 ではフォームの action 属性に非同期関数を渡せるようになりました。useActionState・useFormStatus と組み合わせることでシンプルなフォーム処理が実現します。
useOptimistic — 楽観的UI更新
APIのレスポンスを待たずに先にUIを更新する「楽観的更新」を簡単に実装できます。エラー時は自動的に元の状態に戻ります。
ref を通常の props として渡せる
React 19 では forwardRef が不要になりました。ref を通常の props のように受け取れます。
Context.Provider の簡略化
<Context.Provider> の代わりに <Context> を直接 Provider として使えるようになりました。
ドキュメントメタデータのコンポーネント内設定
React 19 では <title>・<meta>・<link> をコンポーネントの中に直接書けるようになりました。React DOM が自動的に <head> に移動します。
リソースプリロード API
フォント・スクリプト・スタイルシートのプリロードをコンポーネント内から制御できる API が追加されました。
React Compiler（React Forget）
手動での useMemo・useCallback の記述が不要になるコンパイラ。ビルド時にReactが自動的に最適化します。
React 19 は 2024年12月にリリース。Next.js 15 で標準サポートされています。 詳細は React 公式ブログ を参照してください。