この記事の方向性
2024-04-25にReact 19 Betaが公開されました。
この記事ではReact公式ブログの概要をまとめ、さらに気になって情報収集した内容をまとめてみます。
この記事の前半はサクッと理解することを重視します。
後半は所感や補足情報を記載します。
記事内では一次情報や丁寧な解説記事へのリンクを多く張るようにしました。この記事は概要理解として利用し、詳しく知りたいと思った内容はリンク先を参照するようにしてもらえたらと思います。
公式情報
今回メインで参照したのは以下です。
-
React Blog (React公式ブログの日本語版)
- React 19 Beta
- React 19 Beta Upgrade Guide
- ※
記事投稿時点では日本語翻訳が終わっておらず、英語版のみです。- (追記) 05/14頃に日本語翻訳版が公開されました
まずReact 19の概要を3行で
- バージョン18から19にアップグレードする作業は多くのプロダクトであまり問題はなく進められそう
- Actionsの追加とサーバコンポーネントの正式版化が大きめな変更点
- 他にも便利な機能追加や改善が多数
新機能を一覧でチでェック
React 19 Beta (公式ブログ) を箇条書きで要約します。
リンク先は全てブログのページ内リンクです。
- 新しい概念"Actions"で使用するhooksが追加された
- Server Componentsに関する機能が追加された (link)
- refがpropsで扱えるようになり、forwardRefが不要に変わった (link)
- エラーのコンソール出力が読みやすくなり、エラー検知の機能も拡充された (link)
- HydrationErrorのコンソール出力も読みやすくなった (link)
- これまでの
<Context.Provider>が<Context>だけで書けるようになった (link) - refにcleanupメソッドを渡すことが可能になった (link)
- useDeferredValueに初期値の設定が可能になった (link)
- headタグ内に記述するタグの制御が可能になった
- React以外との連携
※ 出典の流れに沿って列挙するようにしましたが、私の独自観点でグルーピングし、一部順番を入れ替えた部分があります。「サクッと知る」を重視しています。削った部分はないようにしたつもりです。
個人的な見解も交えてさらに深掘り
私が気になった部分を書いてみます。
ピックアップ観点は独断と偏見です。
React 19 へのアップグレードによる影響
React 18.3 から React 19 へのアップグレードは各種取り組みによって問題が起きにくいと公式ブログでアナウンスされており、詳細を確認した私の所感も同じでした。私が普段使用しているライブラリも動かなくなるような影響は受けないと思います。
Reactコミュニティはアップグレードに対して本当に親切なアプローチを設計していると感じています。ドキュメントもコードモッド (react-codemod, types-react-codemod) も充実しています。
とはいえ予想外の挙動は考えられますので、アップグレード時の動作確認は入念に実施する必要はもちろんあります。
Actionsの追加
最初に useActionState を見た際は「あー、よくカスタムフックで定義しているのを公式で提供したのね」と思ったのですが、もう少し読み進めてみると<Suspense>やuseメソッドと組み合わせることを念頭とした機能に見えてきました。
useメソッドは単体で使い所があるメソッドと感じます。そしてそれを今回追加されたhooksと組み合わせることで、頭を悩ませないといけない通信処理 (特に異常系) について考えることを減らすことができるようにも見えます。さらにはSSR時の恩恵もありそう。
参考記事 《凄い！》Server ActionsでReact・Nextが目指す方向性についての考察、劇的に変わるform周り-VercelShip
現在のコードからの移行は必須ではありませんが、移行していくと見通しがいいコードにできそうと見えています。
公式ブログ Actions
forwardRefの廃止
参考記事: React の ref, useRef, forwardRefの基本的な知識
refは特殊な属性らしく、propsとして渡したり、受け取ったりができません。
そもそも関数コンポーネントにrefを渡すことはできません。
React 18では上記の問題を抱えていたのですが、今後は考える必要がなくなります。これは嬉しいですね。
公式ブログ ref as a prop
headタグの制御
特にフォント読み込みを以下のように書けるようになるのが嬉しいです。
preload('https://.../path/to/font.woff', { as: 'font' })
これまではReact Helmetが広く使われてきましたが、これを公式でサポートしてもらえ、さらにSSRで確実に動作してくれる未来が見えるのは嬉しいポイントです。ブログには「React Helmetを置き換えるような機能ではない」と書かれていましたが、私の場合はリッチな機能までは不要な場合が多く、React Helmetを廃止と決めるのに十分強力な機能と見えています。
内容が重複しても自動制御してくれるようなので、気軽に頻繁に使えそうです。
公式ブログ Support for preloading resources
廃止される機能
廃止される機能一覧を見てみましたが、多くはコンソールに警告が親切に表示されるようでした。
React 19 で突然削除される機能はなく、React 18.2時点で警告通りに対応していればいずれも問題ないものばかりに見えます。
公式ブログ Breaking changes
非推奨となる機能
こちらも前述の廃止される機能と同様の所感です。ちなみに<Context.Provider>が<Context>に置き換わる件は現時点で"警告あり"となっていない模様です。
公式ブログ New deprecations
Q&A
Q. つまりReact 19 にアップグレードするためにはどうしたらいいの？
忙しい人向けに要約すると
- まずはReact
18.3.xにアップグレードする- 記事投稿時点では
18.3.1が最新 - もしReact18より前 (16系, 17系など) を使用していたら、React 18系にアップグレード
- 記事投稿時点では
-
18.3.xで動作確認してコンソールに警告やエラーが出力されていないことを確認する- アップグレード前がこれまでの最新である
18.2.2(2022-06-15リリース) なら何も問題ない可能性が高い - 警告があれば順番に記載通りの対応を進めればOK
- React単体のバージョンアップなら問題ない可能性が高いが、関連ライブラリに影響が出ている可能性があるので油断は禁物
- アップグレード前がこれまでの最新である
- その後しばらくはReact 19 の正式リリースを待つ
- 記事投稿時点で19は未リリース
- 楽しみに待ちましょう
- 待ちきれなければBeta版を試しに導入する (※ 当然ですがプロダクションコードに導入するのはまだ避けた方がいいです)
package.json (追記)
{ "dependencies": { "react": "beta", // 既存コードから修正 "react-dom": "beta", // 同上 "@types/react": "npm:types-react@beta", // 追加 "@types/react-dom": "npm:types-react-dom@beta" // 同上 }, "overrides": { "@types/react": "npm:types-react@beta", // 追加 "@types/react-dom": "npm:types-react-dom@beta" // 同上 } }
詳細はReact 19 Beta Upgrade Guide (公式ブログ) を参照してください。
Q. React 19 の正式リリースはいつ？
公式アナウンスはありません。
参考までに過去のリリースはこんな感じでした。
| バージョン | リリース日 |
|---|---|
| 19.0.0-beta | 2024-04-25 |
| 18.3.0 | 2024-04-25 |
| 18.0.0 | 2022-03-29 |
| 18.0.0-beta | 2021-11-16 |
| 17.0.0 | 2020-10-20 |
| 17.0.0-rc.0 | 2020-08-11 |
| 16.0.0 | 2017-09-26 |
| 16.0.0-rc.1 | 2017-09-07 |
| 16.0.0-beta.1 | 2017-07-27 |
ここからリリース日が推測できるわけではないですし、以前とバージョン体系が違うので参考にならないところもありますが、恐らく正式版のリリースは数か月先となりそうな気はしてきます。
Q. ブログの日本語訳がないけれど、いつ翻訳されるの？
- この記事の投稿時点でブログは未翻訳です。
- 翻訳プロジェクトのGitHubリポジトリはこちらです
- 翻訳されてる方のZennが凄く興味深かったです
- 翻訳されてる方々には本当にリスペクトです。有志の作業ですので待ちましょう
- (追記) 05/14頃に日本語翻訳版が公開されました。
終わりに
React 19以外にもReactの他の大きな話題として、近々React Compilerの公開があるようです。
※ React Compilerの参考記事 React Forget は何を「忘れ」させてくれるのか
React 19で追加される機能には楽しみな機能が多いと感じています。便利な機能が多くありますし、SSRがさらに発展するように見えますし、新バージョンというのは単純にワクワクもします。
React 19に限らず、今後のReactの発展には今後も注視していきたいです。