2024.12.13 React

React 19とは？18からの変更点・新機能とReact Compiler・最新バージョンを解説

React 19は2024年12月5日に安定版が公開されたメジャーバージョンで、2026年7月時点の最新安定版は19.2系（19.2.7）です。目玉はフォーム送信と非同期処理を一元化する「Actions」、forwardRefを不要にする「refのprop化」、そして手動メモ化を自動化するReact Compiler（2025年10月に1.0安定版）の3点にほぼ集約されます。React 18からの移行は破壊的変更を含みますが、公式のcodemodで大半を自動化できます。この記事ではReact 19で何が変わったのか、18との違い、最新バージョンまでの追加機能、アップグレード手順を一次情報に沿って整理します。

まとめ：React 19の要点

  • React 19.0は2024年12月5日リリース。現行の最新安定版は2025年10月1日リリースの19.2系（2026年7月時点で19.2.7）。
  • ReactにLTS（長期サポート版）の制度はなく、常に最新安定版が推奨。旧メジャーのドキュメントのみ18.react.devのように保管される。
  • 最大の変更はActions。useActionState・useFormStatus・useOptimisticでフォーム送信中の保留・エラー・楽観的更新をまとめて扱える。
  • refをpropとして直接渡せるようになり、関数コンポーネントでforwardRefが不要に。
  • React Compilerが2025年10月7日に1.0（安定版）。useMemo・useCallback・React.memoの手動メモ化が原則不要になる。
  • 18→19はpropTypes・関数コンポーネントのdefaultProps・文字列refの廃止など破壊的変更あり。types-react-codemodで移行する。

React 19の位置づけと現行バージョン

React 19は、Suspenseやトランジションを前提とした「非同期を含むUI」を標準機能として書けるように整えたメジャーバージョンです。バージョン番号を追う前に、まず現在どの版を入れるべきかを押さえます。

リリース日と現在の最新バージョン

安定版19.0.0は2024年12月5日に公開されました。その後もマイナー・パッチが続き、2026年7月時点の最新は19.2系です。主要な節目は次のとおりです。

バージョン リリース日 位置づけ
16.8.0 2019-02-06 Hooks導入
18.3.1 2024-04-26 18系の最終
19.0.0 2024-12-05 19系の安定版
19.1.0 2025-03-28 Owner Stacks等
19.2.0 2025-10-01 Activity等を追加
19.2.7 2026-06-01 19.2系の最新パッチ

新規に入れるならreact@19（実体は19.2系）で問題ありません。バージョンの正確な一覧は公式のバージョン一覧ページが一次情報です。

ReactにLTSブランチがない理由

「react lts version」で探す人がいますが、ReactはNode.jsやJavaのようなLTS（長期サポート）ブランチを持ちません。サポート対象は事実上「最新安定版」の1系統で、古いメジャーに個別のセキュリティ延長は提供されません。新しいメジャーが出ると旧版のドキュメントだけが18.react.devのようなアーカイブとして残ります。したがって「どの版を長く使えるか」ではなく、「最新安定版に追従し続けられるか」で採用を判断するのが実態に合っています。

React 18からReact 19への主な変更点

検索でも「react 18 19 違い」が多く、移行時に一番知りたいのはここです。機能の対応関係を先に一覧で示します。

項目 React 18 React 19
フォーム送信 onSubmit＋手動state Actions（form action属性）
送信中の状態 自前でloading管理 useFormStatus／useActionState
ref受け渡し forwardRef必須 refをpropで直接
Promiseの読み取り useEffect＋state useフック
メタデータ react-helmet等 コンポーネント内に直接記述
手動メモ化 useMemo／useCallback React Compilerで自動化
propTypes 利用可 廃止（無視される）

削除・非推奨になったAPIと移行の注意点

React 19では以前から非推奨だった機能がまとめて削除されました。18から上げるときに実際に手を入れる可能性が高いのは次の点です。

  • propTypesの廃止：propTypesによる型チェックは削除され、記述しても無視されます。型検査はTypeScriptへ移行します。
  • 関数コンポーネントのdefaultProps廃止：ES6のデフォルト引数に置き換えます（クラスコンポーネントのdefaultPropsは残ります）。
  • 文字列refの廃止：ref="input"形式は使えず、コールバックrefかuseRefに移行します。
  • レガシーContextの廃止：contextTypes／childContextTypesは削除。createContextベースに統一します。

これらは公式のtypes-react-codemodで大半を自動変換できます。個々のフックの使い分けを整理したい場合は、ReactのuseRefの使い方（useStateとの違い・DOM参照）も合わせて確認してください。

React 19の主な新機能

19.0で追加された機能のうち、実装で触れる機会が多いものを意図ごとに整理します。

Actions：フォーム送信と非同期処理の一元化

Actionsは、<form>のaction属性に非同期関数を渡すだけで、送信中の保留状態・エラー・成功後の更新までReactが面倒を見る仕組みです。関連する新フックは役割が分かれています。

  • useActionState：アクションの実行結果と保留状態を1つのstateとして受け取る（旧useFormStateの後継）。
  • useFormStatus：親フォームの送信中状態を子コンポーネントから参照する。
  • useOptimistic：サーバー応答を待たずにUIを先行更新し、確定後に差し替える楽観的更新。
function UpdateName() {
  const [error, submitAction, isPending] = useActionState(
    async (previous, formData) => {
      const err = await updateName(formData.get("name"));
      return err ?? null;
    },
    null
  );
  return (
    <form action={submitAction}>
      <input name="name" />
      <button disabled={isPending}>更新</button>
      {error && <p>{error}</p>}
    </form>
  );
}

バリデーションやフォーム構築をライブラリで補いたい場合は、React Hook Formの使い方・バリデーションとの併用も選択肢になります。

useフック：PromiseとContextの読み取り

useはPromiseやContextの値を読み取る新しいフックです。従来のフックと違い、条件分岐やループの中でも呼べるのが特徴で、Suspenseと組み合わせて非同期データの読み込みを宣言的に書けます。ContextをuseContextの代わりにuse(Context)で読むこともできます。

refのprop化とドキュメントメタデータ対応

関数コンポーネントでrefを直接propとして受け取れるようになり、forwardRefのラップが不要になりました。さらに、コンポーネント内に書いた<title>・<meta>・<link>をReactが自動で<head>へ引き上げます。react-helmetのような外部ライブラリなしでページ単位のメタデータを管理でき、SEO面の実装が簡潔になります。

Server Componentsとサーバーアクションの安定化

サーバー側でレンダリングしクライアントにJSを送らないServer Componentsと、フォームからサーバー関数を直接呼ぶServer Actionsが、19で正式なAPIとして安定しました。ただしこれらはNext.jsなどServer Componentsに対応したフレームワーク上での利用が前提です。仕組みと使い分けはReact Server Components（RSC）とは？サーバー・クライアントの違いで実装例とともに解説しています。

React Compiler（1.0安定版）でuseMemo・useCallbackが不要に

「react 19 usecallback」で検索される背景には、React Compilerの登場があります。React CompilerはReact 19と同時期にベータ公開され、2025年10月7日に1.0（安定版）に到達しました。コンポーネントとフックを解析し、必要なメモ化を自動で挿入するビルド時ツールです。

これにより、再レンダリング最適化のために手動で書いていたuseMemo・useCallback・React.memoは原則不要になります。既存のこれらの記述はそのまま動きますが、新規コードでは「まず書かない」が基本方針に変わります。導入はBabelプラグイン（babel-plugin-react-compiler）を追加し、コンパイラ由来のLintルールを含むeslint-plugin-react-hooksの推奨設定を使う流れです。React 17・18でもreact-compiler-runtime経由で使えますが、フックのルールに忠実なReact 19が最も相性が良いとされています。

設定手順やuseMemoとの違いはReact Compilerとは？自動メモ化の仕組みと導入方法で詳しく扱っています。

React 19.1・19.2で追加された機能

多くの解説記事は19.0時点で止まっていますが、実際に入るのは19.2系です。19.0以降で加わった主な機能を押さえておくと、最新版で書く際の判断がぶれません。

  • Owner Stacks（19.1）：開発時のエラースタックに、どのコンポーネントがレンダリングしたかの情報を加え、原因箇所を追いやすくする。
  • Activityコンポーネント（19.2）：UIの一部をvisible／hiddenで切り替え、非表示部分を事前レンダリングしつつ更新を後回しにできる。
  • useEffectEvent（19.2）：Effect内の「イベント的な処理」を切り出し、不要な依存変更での再実行を防ぎつつ常に最新のprops・stateを参照する。
  • cacheSignal（19.2）：Server Componentsでcache()の寿命が尽きたタイミングを検知し、不要になった処理を中断・後始末できる。
  • Partial Pre-rendering（19.2）：静的部分を事前生成してCDNから配信し、動的部分を後からprerender()／resume()で埋める。
  • Performance Tracks（19.2）：Chrome DevToolsにReactの処理・優先度・コンポーネントの描画を可視化する専用トラックを追加。

React 19へのアップグレード手順

「react 19 npm」で調べる移行作業の流れは次のとおりです。いきなり本番で上げず、依存ライブラリの対応状況を先に確認します。

# reactとreact-domを19へ
npm install react@19 react-dom@19

# 型と破壊的変更の大半を自動変換
npx types-react-codemod@latest preset-19 ./src
  1. 依存の確認：利用中のUIライブラリやルーターがReact 19に対応済みか確認する（未対応だと実行時エラーの原因になる）。
  2. codemodの適用：types-react-codemodのpreset-19で型定義や非推奨APIをまとめて変換する。
  3. 手動対応：propTypesのTypeScript化、文字列refのコールバックref化など、codemodで拾えない箇所を直す。
  4. 動作確認：テストと開発ビルドで警告を確認し、段階的に反映する。

React 19はJSXの新しい変換（2020年導入）が前提です。多くの環境では既に有効なので影響は限定的ですが、古い設定のプロジェクトでは変換設定の更新が必要になります。

React 19採用の判断基準（新規は19.2・既存18は動機次第）

結論として、新規プロジェクトはReact 19（19.2系）を選ぶのが妥当です。Actions・refのprop化・React Compilerはいずれも記述量を減らす方向の変更で、18に留まる積極的な理由は少なくなりました。AstroとReactの違いと使い分けのように、そもそもReactが最適かを検討する場面はありますが、Reactを使うなら最新安定版が基準です。

一方で、既存の18アプリを急いで上げる必要はありません。上げるべきなのは、Server ComponentsやActionsを使いたい、あるいはReact Compilerでメモ化のメンテナンスから解放されたい、という具体的な動機がある場合です。逆に、対応が済んでいない古いUIライブラリに強く依存しているプロジェクトは、依存側の更新を待ってから移行する方が安全です。React Compiler自体も「必ず入れるもの」ではなく、再レンダリング最適化の手間が課題になっているチームから段階的に導入するのが現実的です。

よくある質問

Reactの最新バージョンは何ですか？

2026年7月時点の最新安定版は19.2系です（例：19.2.7、2026年6月1日リリース）。npm install react@latestで19.2系が入ります。正確な一覧は公式のバージョンページで確認できます。

React 18と19の違いは何ですか？

最も大きいのはActionsによるフォーム・非同期処理の標準化、refのprop化（forwardRef不要）、React Compilerによる自動メモ化です。加えてuseフックやドキュメントメタデータのネイティブ対応が追加され、propTypesや文字列refなどが廃止されました。

React 19ではuseMemoやuseCallbackを書かなくてよいですか？

React Compilerを導入すれば、手動のuseMemo・useCallbackは原則不要です。既存の記述は動作しますが、新規コードではまず書かず、コンパイラに任せるのが基本になります。導入していない環境では従来どおり手動メモ化が必要です。

React 19へアップグレードは必要ですか？

必須ではありません。ReactにLTSはなく最新安定版が推奨されますが、既存18アプリはActionsやServer Componentsを使いたい、依存ライブラリが19対応済み、といった条件が揃ってから移行すれば十分です。

React Compilerは必ず使う必要がありますか？

いいえ。React Compilerはオプトインで、導入しなくてもReact 19は動作します。再レンダリング最適化の手間を減らしたいプロジェクトから段階的に導入する位置づけです。あわせて、jQuery 4.0についても解説しています。

関連記事

資料請求

RELATED POSTS 関連記事

一覧へ戻る