1. ホーム
2. web
3. React 19正式リリースと実践的な新機能ガイド

はじめに

React 19は、フロントエンド開発のパラダイムを大きく変える重要なアップデートです。

これまでNext.jsなどのフレームワーク機能として先行提供されていた React Server Components (RSC) や、データ更新とフォーム送信を劇的に簡素化する Actions API が、ついにコアライブラリの安定版機能として統合されました。

本記事では、React 19の新機能の中から、特に現場の開発で重要となるポイントを厳選し、移行手順と実践的なコード例を交えて解説します。

1. Actions API：非同期データ更新の簡素化

React 19の目玉機能の一つが、非同期のデータ送信や状態更新を効率的に管理するための Actions の導入です。

これまでは、フォーム送信やAPI保存処理を行う際、送信中フラグ（isPending）やエラー状態（error）を自前で useState を使って管理する必要がありました。React 19からは、これらを標準フックで自動的に管理できます。

フォーム送信用の新フック useActionState

import { useActionState } from 'react';

// 非同期のデータ更新アクション
async function updateProfile(prevState, queryData) {
  try {
    await api.post("/profile", queryData);
    return { success: true, message: "更新完了！" };
  } catch (err) {
    return { success: false, message: err.message };
  }
}

function ProfileForm() {
  // state: アクションの戻り値
  // formAction: formのaction属性に渡す関数
  // isPending: 非同期処理が進行中かどうかのフラグ
  const [state, formAction, isPending] = useActionState(updateProfile, null);

  return (
    <form action={formAction}>
      <input type="text" name="username" required />
      <button type="submit" disabled={isPending}>
        {isPending ? "送信中..." : "保存"}
      </button>
      {state && <p>{state.message}</p>}
    </form>
  );
}

• useActionState (以前は useFormState と呼ばれていました) を使うことで、非同期リクエストの実行と送信ステートの連動が非常にクリーンに記述できます。

楽観的UI更新フック useOptimistic

チャット送信やいいねボタンなど、APIのレスポンスを待たずに画面の表示を即座に更新し、失敗したら元の状態にロールバックさせる処理も、useOptimistic フックによって標準化されました。

2. 新しいリソース取得API use フック

React 19では、コンポーネントのレンダリング中にPromiseやコンテキスト（Context）を読み取るための use という汎用APIが導入されました。

従来のフック（useEffect や useContext）はコンポーネントのトップレベルでしか呼び出せませんでしたが、use は条件分岐（if）やループの中で呼び出すことができます。

Promiseの解決と Suspense の統合

import { use, Suspense } from 'react';

// データをフェッチするPromiseを定義
const dataPromise = fetchData();

function Content() {
  // レンダリング中に直接Promiseの解決を待つ
  const data = use(dataPromise);
  return <div>データを表示: {data.name}</div>;
}

function App() {
  return (
    // Promiseが解決されるまでFallbackを表示する
    <Suspense fallback={<p>読み込み中...</p>}>
      <Content />
    </Suspense>
  );
}

• use にPromiseを渡すと、解決されるまでコンポーネントのレンダリングが自動的にサスペンド（中断）され、親の Suspense のローディング表示がトリガーされます。

3. refのプロパティ化（forwardRefの廃止）

React 19における嬉しい改善の一つが、カスタムコンポーネントに ref を渡す際の仕様変更です。

これまでは、子コンポーネントがDOMの参照を受け取るためには、コンポーネントを forwardRef で囲む必要があり、コードが非常に複雑化していました。React 19からは、ref は単なる通常のプロパティ（Props）として受け取ることができます。

React 19でのシンプルな書き方

// forwardRefは不要！通常のPropsとしてrefを受け取る
function MyInput({ label, ref }) {
  return (
    <label>
      {label}
      <input ref={ref} />
    </label>
  );
}

// 親コンポーネントからの利用
function Parent() {
  const inputRef = useRef(null);
  return <MyInput label="お名前" ref={inputRef} />;
}

4. クライアントコンポーネントとサーバーコンポーネントの明示

React 19コアにServer Componentsが統合されたことで、従来のコンポーネント（ブラウザで動作し、状態を持つもの）を作成する際は、ファイルの先頭に宣言を明記するルールが標準化されました。

• "use client": ブラウザ側のインタラクションや useState, useEffect などのフックを使用するコンポーネント。
• "use server": サーバー側で直接実行される処理（Server Actions）などを定義する関数。

これにより、フロントエンドとバックエンドの境界線が明確になり、セキュアなデータ通信（APIキーなどの秘匿情報をクライアントに漏らさずに処理）が実現しやすくなります。

まとめ

React 19は、Actions APIや use フックの登場により、従来の「非同期通信と状態管理のために複雑なコードを書く」苦労を徹底的に排除する方向へ進化しました。

特に forwardRef の廃止や useActionState の導入は、今すぐコードベースを簡素化できる強力な機能です。アップグレードの際は公式のマイグレーションガイドを参照しつつ、これらの新機能を段階的に取り入れていきましょう。