4.1 React 19 概観
React 19 は 2024 年 12 月 5 日 に公式リリースされました（https://react.dev/blog/2024/12/05/react-19）。長い RC 期間を経て安定版になった背景には、Server Components を含む大きなアーキテクチャ変更があります。この章では、追加された主要 API を一覧で把握して、次章以降の「どこで深掘りするか」を案内します。最初は固有名詞の多さに圧倒されるかもしれませんが、ここでは地図を広げるだけのつもりで読んでください。
追加された主要機能の一覧
公式ブログで発表された機能を、分類して並べてみます。API 名は公式表記のまま書き写しています。
コンポーネントの新しい書き口
| 機能 | 概要 | 掘り下げ |
|---|---|---|
Actions（関数を action に渡すフォーム） | <form action={fn}> で async 関数を渡すと、pending / エラー / reset を React が面倒を見てくれる | 4.2 |
useActionState(action, initialState) | Actions を楽に扱うためのフック。[state, dispatch, isPending] を返す | 4.2 |
useFormStatus() | <form> の中に置いた子コンポーネントから、親フォームの送信状況（pending / data / method / action）を読む | 4.2 |
useOptimistic(value, reducer?) | 楽観的 UI のためのフック。送信中は暫定値を表示し、失敗したら自動で巻き戻る | 4.2 |
use(resource) | Promise または Context から値を取り出す API。条件分岐やループの中でも呼べる（他のフックと違う点） | 4.2 / 4.3 |
サーバー統合
| 機能 | 概要 | 掘り下げ |
|---|---|---|
| Server Components | サーバー側（ビルド時 or リクエスト時）でレンダーされる、新しい種類のコンポーネント | Part 5 |
Server Functions（"use server"） | Client Component から、サーバーで実行される関数を呼び出す仕組み | Part 5 |
DOM 関連の改善
| 機能 | 概要 | 掘り下げ |
|---|---|---|
| ref as a prop | 関数コンポーネントで ref を普通の prop として受け取れる（forwardRef が不要） | 4.5 |
| ref コールバックの cleanup | ref={(node) => { ...; return () => {...}; }} のように後始末関数を返せる | 4.5 |
| Document Metadata | <title> <meta> <link> をコンポーネントの中に書くと、React が自動で <head> に持ち上げる | 本章のみ |
Stylesheet の precedence | <link rel="stylesheet" href="..." precedence="high" /> で読み込み順を管理 | 本章のみ |
| Async Script のサポート | <script async> をどこに書いても React が重複を排除 | 本章のみ |
| Resource Preloading API | react-dom から prefetchDNS / preconnect / preload / preinit が提供される | 本章のみ |
Context と小さな改善
| 機能 | 概要 | 掘り下げ |
|---|---|---|
<Context> を Provider として使える | <MyContext.Provider> と書かず、<MyContext value={...}> で済む | 4.4 |
useDeferredValue(value, initialValue) | 第 2 引数で初回レンダー時の値を指定できる | 4.6 |
エラー報告の改善
createRoot / hydrateRoot に onCaughtError / onUncaughtError / onRecoverableError のオプションが追加され、重複したコンソールエラーが解消されました（公式ブログ「Better Error Reporting」節）。
非推奨・削除された機能
React 19 アップグレードガイド（https://react.dev/blog/2024/04/25/react-19-upgrade-guide）に整理されています。学習時にハマりやすいものを抜粋しておきます。
forwardRef: 将来的に非推奨。関数コンポーネントでrefを prop として直接受け取るスタイルへ移行します。useFormState→useActionStateにリネーム（reactパッケージからインポート）。用途が form に限らないため名前が調整されました。<Context.Provider>: 将来的に非推奨。<Context value={...}>を使います。propTypes/defaultProps: 関数コンポーネントから削除されました。型チェックは TypeScript、既定値は分割代入のデフォルト値で代替します。- Legacy Context（
contextTypes/getChildContext）: 削除。createContextを使います。 - String Ref（
ref="input"）: 削除。コールバック ref かuseRefを使います。 ReactDOM.render/ReactDOM.hydrate: 削除。createRoot/hydrateRootを使います（React 18 から推奨だったものが必須になりました）。findDOMNode: 削除。ref を使います。
TypeScript 側の変更でハマりやすいのが、useRef(initialValue) の引数が必須 になった点です。useRef() のように呼ぶとコンパイルエラーになります。
// 引数省略では通らなくなった
const ref = useRef();
// 引数必須の型定義
const ref = useRef<HTMLInputElement>(null);公式ガイドでは npx codemod@latest react/19/migration-recipe と npx types-react-codemod@latest preset-19 ./path-to-app の 2 つを実行すると、大半が自動移行できると説明されています。
React Compiler
詳しくは 4.6 で扱うので、ここでは位置づけだけ紹介します。React Compiler は Babel プラグイン（babel-plugin-react-compiler）として提供され、コンポーネントを自動でメモ化 してくれます。useMemo / useCallback / memo を手書きで散らす運用から抜け出すのが狙いです。React 17 / 18 / 19 で動作しますが、React 19 との組み合わせが最も素直です。
なぜ React 19 で Actions / use が入ったか
表の中で一番理解に時間がかかるのは Actions と use です。一言でまとめると、「async な UI を書くための標準ツールが揃った」 のが React 19 だと捉えてもらえるとよさそうです。フォームを送信したら「pending を表示」「エラーを表示」「成功したらリセット」「楽観的に UI を更新」—— どのアプリでも書くことになる定型処理を、React 自体が引き受けてくれるようになりました。これによって、状態管理ライブラリやフォームライブラリに頼らず、最小限のコード量で async UI を組めます。
図 4.1.1 React 19 で async UI を組む道具の関係
この図が、4.2 と 4.3 を読み終えたときに頭の中で自然に描けるようになっていれば十分です。急がなくて大丈夫です。
アップグレード観点の注意（概要）
受託案件では、既存の React 17 / 18 プロジェクトをアップグレードする場面が多いはずです。深入りは公式ガイドに任せますが、最低限押さえておきたい順番は次の通りです。
- まず React 18 の最新（18.3 系）に揃える。ここで非推奨 API の警告がコンソールに出始めます。
- 警告を全部つぶす（
Legacy Context/String Ref/propTypes/defaultPropsなど）。 codemodでコード自動修正をかける。- TypeScript の型パッケージ（
@types/react）を更新し、useRefの引数必須化など型エラーを修正する。 react/react-domを 19 にバンプする。