---
title: "Reactの最新バージョンは19.3｜React 19の新機能・18との違いと確認・更新方法"
url: "https://www.issoh.co.jp/tech/details/4509/"
published: 2024-12-13
updated: 2026-10-26
categories: ["React"]
publisher: "株式会社一創"
---

# 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ページ](https://react.dev/versions)は「Latest version: 19.3」と書きますが、下のリリース一覧には19.3.0（2026年9月9日）も掲載されていますが、一部のパッチ版は載っていません。19.2.8・19.2.9・19.3.1は欠けているので、正確な最新版と公開日は[npm registry](https://registry.npmjs.org/react)の記録で確かめます。下表の日付は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年前後の間隔です。[バージョニングポリシー](https://react.dev/community/versioning-policy)は「新機能はマイナー版で出す」としており、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のリリースノート](https://github.com/react/react/releases)はいずれも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](https://react.dev/blog/2026/02/24/the-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](https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components)です。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脆弱性の対応手順](/tech/details/10142/)にまとめています。

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のリリース記事](https://react.dev/blog/2024/12/05/react-19)と[React 19アップグレードガイド](https://react.dev/blog/2024/04/25/react-19-upgrade-guide)にあります。

### 書き方が変わる新機能

| 項目           | 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・よくある誤り](/tech/details/2851/)で扱っています。refのprop化による`forwardRef`の置き換えは[React 19でforwardRefが不要に｜refをpropsで渡す新方式と移行手順](/tech/details/4382/)、`<Context>`をそのままプロバイダとして書く方法は[React Contextの使い方](/tech/details/2681/)で手順を示しています。

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

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

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

- `propTypes`の検査：削除され、書いても無視される。型はTypeScriptで付ける。
- 関数コンポーネントの`defaultProps`：削除。引数のデフォルト値に置き換える（クラスコンポーネントには残る）。
- 文字列ref（`ref="input"`）：削除。コールバックrefか`useRef`に置き換える（[useRefの使い方](/tech/details/3279/)）。
- レガシー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の使い方](/tech/details/9427/)で詳しく扱っています。

### 19.3（2026年9月9日）：ViewTransition・Fragment Refs・browser()

[React 19.3のリリース記事](https://react.dev/blog/2026/09/09/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()`が入りました。手元で`react-dom@19.3.1`の`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からの更新手順](/tech/details/18249/)にあります。

## React Compiler 1.0とuseMemo・useCallbackの扱い

React Compilerを導入すると、useCallbackなどで手動指定していたメモ化の多くを自動化できます。[React Compiler 1.0](https://react.dev/blog/2025/10/07/react-compiler-1)は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とは？自動メモ化の仕組みと導入方法](/tech/details/9415/)で解説しています。

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

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

```
# プロジェクトに入っている版
$ npm ls react
lab@1.0.0 /private/tmp/r4509/lab
+-- react-dom@19.3.1
| `-- react@19.3.1 deduped
`-- react@19.3.1

# 実行中の版（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 react@19.2 version | tail -1
react@19.2.9 '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 react@19.3.1 react-dom@19.3.1
# TypeScriptを使う場合（@types/reactの最新は19.3.0）
npm install --save-exact @types/react@19.3.0 @types/react-dom@19.3.0
```

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

```
$ npm i react@19.2.9 react-dom@19.3.1
npm error code ERESOLVE
npm error Could not resolve dependency:
npm error peer react@"^19.3.1" from react-dom@19.3.1

# --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アプリ開発](https://www.issoh.co.jp/service/apps/business/)で相談を受け付けています。そもそもReactを使うべきかを検討する段階なら、[AstroとReactの違いと使い分け](/tech/details/2697/)も判断材料になります。

## よくある質問

### 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`の範囲指定だけでは実際の版は分かりません。

## 関連記事

- [React 19.3の新機能｜ViewTransition・Fragment ref・browser()の実装と19.2からの更新手順](/tech/details/18249/)
- [React 19.2の新機能｜Activity・useEffectEvent・cacheSignal・PPRの使い方と19.2.8までの修正](/tech/details/9427/)
- [React Compilerとは？自動メモ化の仕組みと導入方法・useMemoとの違いを解説](/tech/details/9415/)
- [React 19でforwardRefが不要に｜refをpropsで渡す新方式と移行手順](/tech/details/4382/)
- [React2Shell（CVE-2025-55182）とNext.js脆弱性の対応手順｜10月14日修正の16.4.1・15.5.28まで【2026年10月】](/tech/details/10142/)

---

出典: [Reactの最新バージョンは19.3｜React 19の新機能・18との違いと確認・更新方法](<https://www.issoh.co.jp/tech/details/4509/>)（株式会社一創）