React 19 の改善点
ここまでReact 19で導入された新しいAPIを紹介してきました。ここからは、その他の改善点について紹介します。
ドキュメントメタデータのサポート
React 19では、<title>、<link>、<meta>などのドキュメントメタデータを<head>に設定できるようになりました。これまではreact-helmetなどのライブラリを使ったり、useEffectで直接DOMを参照して書き換えたりする必要がありましたが、React 19からはReactがネイティブにこの機能をサポートするようになりました。
function App() {
return (
<div>
{/* この<title>タグと<meta>タグはドキュメントの<head>に配置される */}
<title>React 19</title>
<meta name="description" content="React 19の新機能を紹介" />
</div>
);
}
これらのメタデータタグはReactツリーのどこでレンダリングされたとしても、ドキュメントの<head>内に配置されます。ただし、複数のコンポーネントから<title>タグを設定した場合、すべての<title>が配置されてしまうため、実際には重複しないような工夫が必要となります。
スタイルシートのサポート
React 19では、コンポーネント内で<link>タグもしくは<style>タグを記述することにより、コンポーネント単位でスタイルシートを読み込んで適用できるようになりました。さらにSuspenseと組み合わせることで、スタイルシートの読み込みが完了するまでコンポーネントのレンダリングを遅延できることも特徴です。
Suspenseを有効にするには、Reactの独自拡張であるprecedence属性に文字列を指定して、Reactにスタイルシートの優先順を制御するように指示します。precedence属性は決まった値があるわけではなく、どのような文字列でもかまいません。Reactが認識した順に優先順が決定され、同じ文字列の場合は同じ優先順として扱われます。そのためprecedence属性に同じ値を指定した<link>タグをもつコンポーネントが複数ある場合は注意が必要です。
例えば、リスト6では、2つのコンポーネントに同じ優先順precedence="first"を記載した<link>タグが含まれています。
function ComponentA() {
return (
<div>
<link href="https://example.com/my-styles-1.css" precedence="first" />
</div>
);
}
function ComponentB() {
return (
<div>
<link href="https://example.com/my-styles-2.css" precedence="zero" />
<link href="https://example.com/my-styles-3.css" precedence="first" />
</div>
);
}
function App() {
return (
<div>
<ComponentA />
<ComponentB />
</div>
);
}
このAppコンポーネントがレンダリングされると<link>タグはリスト7のような順序になります。
<link href="https://example.com/my-styles-1.css" precedence="first" /> <link href="https://example.com/my-styles-3.css" precedence="first" /> <link href="https://example.com/my-styles-2.css" precedence="zero" />
本来、ComponentBではprecedence="zero"が先に読み込まれるべきですが、ComponentAのprecedence="first"が先に認識されたため、同じ優先度であるComponentBのprecedence="first"のスタイルシートが先に読み込まれてしまいます。このような意図せぬ結果を回避するためには、読み込み順序を考慮して、事前にアプリケーション全体のprecedence属性の値を検討しておく必要がありそうです。
非同期スクリプトのサポート
React 19では非同期スクリプトのサポートも追加されました。<script>タグにasync属性とsrc属性を指定することで、コンポーネント内で非同期スクリプトを読み込むことができます。これによりSuspenseが有効になり、スクリプトのロードが完了するまでコンポーネントのレンダリングを遅延させることができます。この機能を使うことで、外部スクリプトに依存したコンポーネントをシンプルに定義できます。
<script src="https://example.com/my-script.js" async />
リソースプリロードのサポート
アプリで必要になるリソース（Webフォントや外部スクリプトなど）をブラウザーになるべく早く知らせ、プリロードを開始させることで、アプリのパフォーマンスを改善できることがあります。リソースのプリロードに関して、React 19では以下の関数が追加されています。
| 関数 | 機能 |
|---|---|
prefetchDNS |
接続予定のドメイン名に対応するIPアドレスのフェッチ |
preconnect |
具体的なリソースが不明な場合でも事前にリクエスト先のサーバへの接続を確立 |
preload |
使用予定のスタイルシート、フォント、画像や外部スクリプトのフェッチ |
preloadModule |
使用予定のESMモジュールのフェッチ |
preinit |
外部スクリプトのフェッチと実行、またはスタイルシートのフェッチと挿入 |
preinitModule |
ESMモジュールのフェッチと実行 |
例えば、Webフォントを事前にプリフェッチしてページの表示を高速化したい場合には、リスト9のようにpreload関数を利用します。
preload('https://.../path/to/font.woff', { as: 'font' })
スタイルシートで参照しているWebフォントをpreload関数でプリロードさせることにより、スタイルシートの評価前にフォントファイルのダウンロードを開始できます。Webフォント以外にも、画像やスクリプトファイルなど、表示や動作に必要なリソースをpreloadやpreinitを使って効率的にロードすることで、ユーザー体験の向上が期待できます。
refのprops受け渡し
従来、refを使ってコンポーネント内のDOM要素を参照する際、コンポーネントのpropsでrefを渡すことができず、forwardRef関数でコンポーネントをラップする必要がありました。React 19では、この制限が撤廃され、コンポーネントのpropsにrefを渡せるようになりました。
リスト10は、同じコンポーネントを新旧のパターンで書いた例です。React 19の例ではforwardRefが不要になり、コードがシンプルになっています。
import React, { useRef, forwardRef } from "react";
import ReactDOM from "react-dom/client";
// ～React 18: forwardRef を使った従来の書き方
// const MyInput = forwardRef(({ placeholder }, ref) => {
// return <input placeholder={placeholder} ref={ref} />;
// });
// React 19～: props に ref を渡す書き方
function MyInput({ placeholder, ref }) {
return <input placeholder={placeholder} ref={ref} />;
}
function App() {
const ref = useRef();
return (
<div>
<MyInput placeholder="my input" ref={ref} />
<button onClick={() => ref.current.focus()}>Focus</button>
</div>
);
}
useDeferredValueの初期値設定
useDeferredValueフックで第2引数に初期値を設定できるようになりました。これまではコンポーネントの初回レンダリング時は遅延されていない値になっていましたが、初期値が設定できるようになったことで、初回レンダリング時にも遅延値を利用できます。
const deferredValue = useDeferredValue(value, "");
エラー表示の改善、ハイドレーションエラー時の差分表示
React 18までは、コンポーネントでエラーが発生した場合にコンソールに同じエラーが重複して表示されることがありました。React 19では重複が削減され、さらに一連のエラーは単一のログにまとめられるようになったようです。
また、ハイドレーションエラーが発生した際に、不一致部分の差分を含んだログを表示するようになりました。従来ハイドレーションエラーが発生している場所を特定するのは困難でしたが、この改善により問題を特定しやすくなります。
まとめ
React 19の新機能や改善点を3回にわたって紹介しました。「アクション」やReact Server Componentsなど、さまざまな変更が追加され、Reactを使った開発は大きく変化しています。ぜひサンプルコードをダウンロードしてReact 19の新機能に触れてみてください。
