11 人が閲覧(直近 30 日) React

Reactの最新バージョンは19.3|React 19の新機能・18との違いと確認・更新方法

Reactの最新バージョンは19.3|React 19の新機能・18との違いと確認・更新方法

Reactの最新バージョンは19.3系で、2026年10月26日時点のnpmのlatestは19.3.1(2026年10月14日公開)です。React 19自体は2024年12月5日に19.0.0が出たメジャーバージョンで、その後19.1・19.2・19.3とマイナー版で機能が足されてきました。ReactにはLTS(長期サポート版)の制度がなく、新規開発では、利用するフレームワークやライブラリが対応する最新の安定版を候補にします。この記事では、バージョン履歴、React 18との違い、19.1〜19.3で増えた機能、バージョンの確認方法と更新手順を、npmの公開記録と手元での実行結果に沿って整理します。

まとめ:Reactの最新バージョンと確認・更新の要点

  • 最新は19.3.1(2026年10月14日)。19.3.0は2026年9月9日に出て、<ViewTransition>とFragment Refsが安定版になった。
  • React 19.0.0は2024年12月5日。マイナー版の間隔は113日・187日・343日で、パッチの公開間隔も一定ではない。
  • LTSは無い。ただし19.0・19.1・19.2の各系列にも修正版が同日に出ており、npmにはbackportタグ(現在19.1.10)がある。React 18は2024年4月26日の18.3.1が最後。
  • 18から19の大きな違いはActions、use、refのprop化、Contextのプロバイダ化、メタデータの巻き上げ。propTypesや文字列refは削除された。
  • 手元の版はnpm ls react、実行中の版はReact.version、公開中の最新はnpm view react versionで確認する。
  • 更新はreactとreact-domを同じ版にそろえる。ずれるとnpmがERESOLVEで止まり、--forceで入れても実行時に「Incompatible React versions」で落ちる。

Reactのバージョン履歴(16.8から19.3まで)

公式のReact Versionsページは「Latest version: 19.3」と書きますが、下のリリース一覧には19.3.0(2026年9月9日)も掲載されていますが、一部のパッチ版は載っていません。19.2.8・19.2.9・19.3.1は欠けているので、正確な最新版と公開日はnpm registryの記録で確かめます。下表の日付はnpmの公開日(UTC)です。

主要リリースの一覧

バージョン 公開日 主な内容
16.8.0 2019-02-06 Hooks導入
17.0.0 2020-10-20 新しいJSX変換
18.0.0 2022-03-29 並行レンダリング
18.3.1 2024-04-26 18系の最終版
19.0.0 2024-12-05 Actions・use・RSC安定化
19.1.0 2025-03-28 Owner Stack
19.2.0 2025-10-01 Activity・useEffectEvent
19.3.0 2026-09-09 ViewTransition・Fragment Refs
19.3.1 2026-10-14 RSCの転送処理を改善

React 17は2020年10月、18は2022年3月、19は2024年12月と、メジャー版は2年前後の間隔です。バージョニングポリシーは「新機能はマイナー版で出す」としており、19系の新機能も19.1〜19.3のマイナー版で増えています。そのため「React 19」と一口に言っても、19.0と19.3では使えるAPIが違います。

19系のパッチと旧系列への修正

19系は、最新の系列だけでなく旧マイナー系列にも同じ日に修正版が出ています。2026年10月14日には19.3.1・19.2.9・19.1.10・19.0.9の4本が同日に公開され、GitHubのリリースノートはいずれもReact Server Componentsの「Improve transport protocol」です。2026年7月21日の19.2.8・19.1.9・19.0.8、6月1日の19.2.7・19.1.8・19.0.7も同じ形でした。

日付の扱いには注意が要ります。リポジトリのCHANGELOG.mdは19.2.5を「March 18, 2026」と書いていますが、npmへの公開とGitHubのリリースはどちらも2026年4月8日です。記事や社内資料に公開日を書くなら、npmのtimeの値を使うのが確実です。

なお、Reactのリポジトリはgithub.com/facebook/reactからgithub.com/react/reactへ移りました(旧URLは転送されます)。2026年2月24日にReact FoundationがLinux Foundation傘下で正式に発足し、React・React Native・JSXの所有がMetaから財団へ移ったためです。

ReactのLTSとサポート期間の実態

ReactにはNode.jsのようなLTS制度も、版ごとのサポート終了日もありません。「react lts」「react サポート期間」と調べても公式の期限表が見つからないのはこのためです。代わりに、バージョニングポリシーには次の一文があります。

If we learn of a security vulnerability in React, we release a backported fix for all major versions that are affected by the vulnerability.

つまり脆弱性が見つかれば、影響を受けるメジャー版すべてに修正を戻すという方針です。運用では、メジャー版だけでなく19.0・19.1・19.2のマイナー系列にも修正が出ています。npmのdist-tagsにはlatest(19.3.1)のほかにbackport(19.1.10)というタグがあり、旧系列向けの修正版が配信されていることが記録からも分かります。

実例が2025年12月のCVE-2025-55182です。CVSS 10.0の認証不要のリモートコード実行で、対象はreact-server-dom-webpack・react-server-dom-parcel・react-server-dom-turbopackの19.0、19.1.0、19.1.1、19.2.0でした。修正は19.0.1・19.1.2・19.2.1として同日に出ています。その後に見つかったサービス拒否(CVE-2025-55184など)の修正も、2026年1月26日の19.0.4・19.1.5・19.2.4で3系列そろって出ました。Next.jsでの具体的な対応はReact2Shell(CVE-2025-55182)とNext.js脆弱性の対応手順にまとめています。

React 18はどうか。npmでnpm view react@18 versionを実行すると最後は18.3.1(2024年4月26日)で、以降のリリースはありません。上の一連の脆弱性はServer Components用パッケージの19系にあったもので、18は対象外だったためです。React 18が「サポート終了」と宣言されたわけではありませんが、新機能も通常のバグ修正も19系にしか入りません。18に留まる期間が長いほど、のちの移行で拾う差分が増えます。

React 18と19の違い

React 18から19への変更は、新しい書き方と、削除されたAPIの両方を確認します。前者を表で、後者を削除APIの一覧で示します。詳細は公式のReact v19のリリース記事とReact 19アップグレードガイドにあります。

書き方が変わる新機能

項目 React 18 React 19
フォーム送信 onSubmitと自前のstate form の action に関数
送信中・結果の状態 自前で管理 useActionState・useFormStatus
楽観的更新 自前で管理 useOptimistic
Promiseの読み取り useEffectとstate use
refの受け渡し forwardRef refをpropで受け取る
Contextの提供 Context.Provider <Context>を直接描画
title・meta react-helmet等 コンポーネント内に書く

最も影響が大きいのはActionsです。<form>のactionに関数を渡すと、送信中の保留状態やスローされたエラーをReactが扱い、actionが正常終了すると非制御のフォーム入力をリセットします。

import { useActionState } from "react";

// updateNameは別途実装する更新処理です。
// この例では成功時にnull、失敗時に表示用の文字列を返す契約とします。

function UpdateName() {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, 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>
  );
}

formのactionに渡す関数はFormDataを受け取ります。上のuseActionStateに渡した関数では、第1引数が前回のstate、第2引数がFormDataです。イベントハンドラとは異なるので、event.preventDefault()は書きません。よくある誤りはReact 19のform actionの使い方|引数はFormData・よくある誤りで扱っています。refのprop化によるforwardRefの置き換えはReact 19でforwardRefが不要に|refをpropsで渡す新方式と移行手順、<Context>をそのままプロバイダとして書く方法はReact Contextの使い方で手順を示しています。

Server ComponentsとServer Actions(Server Functions)も19.0で安定版になりました。ただし利用にはRSC対応のフレームワーク、バンドラー、またはプラグインが必要です。RSCを導入していない通常のVite製SPAでは使いません。仕組みはReact Server Components(RSC)とは?で解説しています。

削除されたAPIと移行で直す箇所

React 19では、18.3で警告が出ていたAPIが削除されました。18から上げるときに手が入るのは主に次の6つです。

  • propTypesの検査:削除され、書いても無視される。型はTypeScriptで付ける。
  • 関数コンポーネントのdefaultProps:削除。引数のデフォルト値に置き換える(クラスコンポーネントには残る)。
  • 文字列ref(ref="input"):削除。コールバックrefかuseRefに置き換える(useRefの使い方)。
  • レガシーContext(contextTypes・getChildContext):削除。createContextに移す。
  • ReactDOM.render・ReactDOM.hydrate:削除。createRoot・hydrateRootに移す。
  • react-test-renderer/shallow:削除。必要ならreact-shallow-rendererを直接入れる。

コード側はnpx codemod@latest react/19/migration-recipeでReactDOM.render・文字列ref・actのimport・useFormState・propTypesの置き換えをまとめて実行できます。TypeScriptの型の変更はnpx types-react-codemod@latest preset-19 ./srcが受け持ちます。どちらもアップグレードガイドに載っている公式のcodemodです。

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

19.0のあとに入った機能は、19.0時点の解説記事には出てきません。最新の19.3で書くなら、次の3つの版で何が増えたかを押さえておけば足ります。

19.1(2025年3月28日):Owner Stack

開発時のエラーに「どのコンポーネントがそれを描画したか」の連なりを付けるcaptureOwnerStackが入りました。開発ビルドだけで動くAPIです。useIdが生成するIDの形式も、CSSセレクタとして使える形に変わっています。

19.2(2025年10月1日):Activity・useEffectEvent・cacheSignal

<Activity mode="hidden">で画面の一部をstateを保ったまま隠せるようになり、Effectの中のイベント的な処理を切り出すuseEffectEvent、RSCのcache()の寿命切れを知らせるcacheSignal、Partial Pre-renderingのresume系API、DevToolsのPerformance Tracksが加わりました。使い方と19.2系のパッチ内容はReact 19.2の新機能|Activity・useEffectEvent・cacheSignal・PPRの使い方で詳しく扱っています。

19.3(2026年9月9日):ViewTransition・Fragment Refs・browser()

React 19.3のリリース記事によると、2025年に実験版として出ていた<ViewTransition>とFragment Refsが安定版になりました。<ViewTransition>はブラウザのView Transition APIでenter・exit・update・shareのアニメーションを付けるコンポーネントで、startTransitionなどTransitionとして扱われた更新でだけ動きます。Fragment Refsは<Fragment ref={...}>で、ラッパー要素を足さずに子要素群へイベントリスナーやIntersectionObserverを付けられる仕組みです。

react-domには、サーバー側の描画を飛ばしてブラウザでだけ描くbrowser()が入りました。手元で[email protected]のrenderToStringに通すと、use(browser())を呼んだ部品はSuspenseのfallbackに置き換わり、クライアント描画に切り替える印が出力されます。

import { createElement as h, Suspense, use } from "react";
import { browser } from "react-dom";
import { renderToString } from "react-dom/server";

function Map() {
  use(browser());
  return h("div", null, "map");
}
console.log(renderToString(
  h(Suspense, { fallback: h("p", null, "loading") }, h(Map))
));

// 出力(一部省略)
// <!--$!--><template data-msg="Switched to client rendering because a component requested it." ...></template><p>loading</p><!--/$-->

ストリーミングのrenderToReadableStreamで試すと、onErrorは呼ばれず、新しいonBrowserBailoutだけが呼ばれました。地図やチャートのようにサーバーで描けない部品を、エラー報告を汚さずに外せるのが利点です。このほか、Trusted Typesへの対応、Server Componentsから'use client'のContextを直接描画できる変更、Strict Modeでハイドレーション時にもEffectを二重実行する変更が入っています。19.2から上げたあとに開発環境でEffectの実行回数が変わったら、この最後の変更が理由です。各APIの実装例はReact 19.3の新機能|ViewTransition・Fragment ref・browser()の実装と19.2からの更新手順にあります。

React Compiler 1.0とuseMemo・useCallbackの扱い

React Compilerを導入すると、useCallbackなどで手動指定していたメモ化の多くを自動化できます。React Compiler 1.0は2025年10月7日に安定版になり、npmのbabel-plugin-react-compilerは2026年10月26日時点でも1.0.0がlatestです。ビルド時にコンポーネントを解析して、useMemo・useCallback・React.memoに相当する処理を挿入します。

新しく書くコードでは、性能のためのuseMemo・useCallbackは書かずに始め、Compilerに任せるのが基本です。既存の記述はそのまま動くので、外して回る必要はありません。Effectの依存配列を安定させる目的など、値の同一性そのものに意味がある場面だけ手で残します。CompilerはReact 19の機能ではなく別ツールで、React 17・18でも、対応するtargetをCompilerの設定に指定し、react-compiler-runtimeを追加すれば使えます。導入手順はReact Compilerとは?自動メモ化の仕組みと導入方法で解説しています。

Reactのバージョンを確認する方法

「どの版が入っているか」は、見る場所によって答えが違います。プロジェクトに入っている版、ブラウザで実際に動いている版、npmで公開中の最新版の3つを、次のコマンドで分けて確認します(node v26.5.0・npm 11.17.0で実行)。

# プロジェクトに入っている版
$ npm ls react
[email protected] /private/tmp/r4509/lab
+-- [email protected]
| `-- [email protected] deduped
`-- [email protected]

# 実行中の版(Node.jsやブラウザのコンソール)
$ node -e "console.log(require('react').version, require('react-dom').version)"
19.3.1 19.3.1

# npmで公開中の最新版と、系列ごとの最新
$ npm view react version
19.3.1
$ npm view [email protected] version | tail -1
[email protected] '19.2.9'
$ npm view react dist-tags

package.jsonの"react": "^19.2.0"は「19.2.0以上で20未満」という範囲なので、実際に入っている版はロックファイルかnpm lsで見ます。ブラウザでは、アプリのコードでReact.versionを出力するか、React Developer ToolsのComponentsタブで確認できます。

React 19.3へ更新する手順

アップグレードガイドは--save-exactで版を固定して入れる方法を示しています。19.2以前から19.3へ上げる場合も、利用するフレームワークの対応状況を確認して版をそろえます。18から移行する場合は、新しいJSX変換が有効であることも確認してください。React 19では新しいJSX変換が必須です。

npm install --save-exact [email protected] [email protected]
# TypeScriptを使う場合(@types/reactの最新は19.3.0)
npm install --save-exact @types/[email protected] @types/[email protected]

注意点は、reactとreact-domの版を必ずそろえることです。[email protected]はpeerDependenciesでreact@^19.3.1を要求するため、片方だけ上げようとするとnpmが止まります。

$ npm i [email protected] [email protected]
npm error code ERESOLVE
npm error Could not resolve dependency:
npm error peer react@"^19.3.1" from [email protected]

# --force で入れると、読み込んだ時点で例外になる
Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:
  - react:      19.2.9
  - react-dom:  19.3.1

--forceや--legacy-peer-depsで警告を黙らせても、react-dom/serverとreact-dom/clientのどちらも読み込みの段階で失敗しました。モノレポで複数のパッケージがReactを持つ場合は、npm ls reactで版が1つに揃っているかを確かめてから進めます。

18から19へ上げる場合は、次の順で進めます。

  1. 18.3.1へ上げ、開発ビルドで出る非推奨の警告をすべて消す(19で削除されたAPIは18.3で警告が出る)。
  2. UIライブラリ・ルーター・テストライブラリのpeerDependenciesがReact 19を含むか確かめる。
  3. react/19/migration-recipeとtypes-react-codemod preset-19を実行する。
  4. codemodで拾えないpropTypesの型付けや、useRefの引数漏れなどの型エラーを直す。
  5. テストとStrict Modeの開発ビルドで動作を確認してから本番へ出す。

React 19.3を採用・更新するかの判断基準

利用するフレームワークと主要ライブラリが対応していれば、新規開発は19.3で始めてください。19.0〜19.2との差は新APIの追加とバグ修正で、19.3で削除されたAPIはありません。19.0や19.2を選んで始める理由はほとんどありません。

既存の19.0〜19.2のアプリは、Server Componentsを使っているかで判断が分かれます。RSCを使っているなら、更新は先送りしないでください。19.0〜19.2の旧系列に対する2025年12月以降のパッチは、すべてServer Components関連の修正です。Next.jsなどのフレームワークはRSCの実装を内部に組み込んでいるので、reactだけでなくフレームワーク本体を修正版へ上げます。react-server-dom-webpackなどRSC用パッケージを直接入れている場合は、系列内の最新パッチ(2026年10月14日時点で19.0.9・19.1.10・19.2.9・19.3.1)へ上げます。RSCを使わないSPAでも、19.3のViewTransitionやFragment Refsが要らなければ、急いでマイナー版を上げる必要はありません。

React 18のアプリは、移行の時期を決めて計画に入れるべきです。18.3.1は2024年4月から更新が無く、19.1〜19.3で増えた機能も18には入りません。逆に、ReactDOM.renderや文字列refを使う古いコードが多く、テストも薄いプロジェクトは、先に18.3.1で警告を消す作業だけを進め、19への切り替えはテストを整えてからにする方が安全です。Reactでの業務システムの刷新や移行を外部に任せたい場合は、業務用・Webアプリ開発で相談を受け付けています。そもそもReactを使うべきかを検討する段階なら、AstroとReactの違いと使い分けも判断材料になります。

よくある質問

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

2026年10月26日時点では19.3.1(2026年10月14日公開)です。19.3.0は2026年9月9日に出ました。最新版はnpm view react versionで確認できます。

ReactにLTSはありますか?React 18のサポート期限はいつですか?

LTS制度も公式のサポート期限もありません。脆弱性が見つかったときは、影響を受けるメジャー版すべてに修正を戻すという方針です。React 18の最後のリリースは2024年4月26日の18.3.1です。

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

19ではActions、use、refのprop化、<Context>のプロバイダ化、title・metaの巻き上げが加わりました。一方でpropTypes、関数コンポーネントのdefaultProps、文字列ref、ReactDOM.renderは削除されています。

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

React Compiler 1.0を導入していれば、性能目的のuseMemo・useCallbackは原則書かずに済みます。Compilerを入れていない場合は、React 19でも必要に応じて手動でメモ化します。

Reactのバージョンはどこで確認できますか?

プロジェクトに入っている版はnpm ls react、実行中の版はReact.version、公開中の最新版はnpm view react versionで確認します。package.jsonの範囲指定だけでは実際の版は分かりません。

関連記事

お気に入りに入れた記事の一覧

この記事は以下の記事からリンクされています

ほか 7 件の記事からもリンクされています。

資料請求

今日のトレンド記事 直近 24 時間で、いつもより多く読まれている記事

  1. 2026.10.27 テックブログ Brotli 脆弱性:CVE-2026-111497の影響確認とNode.js・Python・.NETの更新手順
  2. 2025.02.27 コラム トラッキングビーコン(Webビーコン)とは?仕組み・用途・確認と対策を徹底解説
  3. 2026.10.27 テックブログ Joshin(ジョーシン)不正アクセス:最大600万件の対象とサブスク初期パスワードの対処
  4. 2026.10.28 テックブログ リンツ不正アクセス:314万件の対象確認とパスワード強制リセット後の対処
  5. 2026.10.23 テックブログ Renta!はいつ再開?不正アクセスでメールアドレス等が流出したおそれ・再開時のパスワード再設定と運営側の対応

RELATED POSTS 関連記事

目次