React 19 へのアップグレード
既存の React アプリケーションをバージョン 19 へアップグレードするために必要な手順は、わずか 2 ステップです。
すでに最新バージョンの React を使用している場合は、このセクションをスキップしてください。
1. React 19 のインストール
最新バージョンをインストールするには、プロジェクトフォルダ内でターミナルから以下のコマンドを実行します。
npm i react@latest react-dom@latest2. 新しい Root API の使用
React 19 のコンカレント機能(Concurrent Features)を活用するためには、クライアントレンダリングに新しい Root API を使用する必要があります。
2.1 コードの書き換え例
以下のように、これまでの ReactDOM.render から新しい createRoot API へ移行します。
移行前(Before):
// 以前の書き方
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>こんにちは React!</h1>,
document.getElementById('root')
);移行後(After):
// 新しい書き方
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<h1>こんにちは React!</h1>);新しい Root API を使用しなくてもアプリケーションは動作しますが、その場合は ReactDOM.render を使い続けることになり、アプリケーションの挙動は React 17 相当に制限されます。最新のパフォーマンス最適化を享受するためには、必ずこの書き換えを行ってください。