React 19 の新機能

アクション

React アプリの一般的な使用例は、データの変更を実行し、それに応じて状態を更新することです。たとえば、ユーザーが名前を変更するフォームを送信する場合、API リクエストを作成し、その応答を処理します。以前は、保留状態、エラー、オプティミスティック更新、および連続したリクエストを手動で処理する必要がありました。

たとえば、useState:
で保留状態とエラー状態を処理できます。

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

React 19 では、保留状態、エラー、フォーム、オプティミスティック更新を自動的に処理するために、遷移での非同期関数の使用のサポートを追加しています。

たとえば、useTransition を使用して保留状態を処理できます。

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

非同期遷移は、即座に isPending 状態を true に設定し、非同期リクエストを作成し、遷移後に isPending を false に切り替えます。これにより、データが変更されている間も、現在の UI の応答性と対話性を維持できます。

注記

慣例により、非同期遷移を使用する関数は「アクション」と呼ばれます。
アクションはデータの送信を自動的に管理します:

保留状態: アクションは、リクエストの開始時に開始され、最後の状態更新がコミットされると自動的にリセットされる保留状態を提供します。
オプティミスティック更新: アクションは新しい useOptimistic フックをサポートしているため、リクエストの送信中にユーザーに即座にフィードバックを表示できます。
エラー処理: アクションはエラー処理を提供するため、リクエストが失敗したときにエラー境界を表示し、オプティミスティックな更新を元の値に自動的に戻すことができます。
フォーム: <フォーム>要素は、action および formAction props への関数の受け渡しをサポートするようになりました。関数をアクション プロパティに渡すと、デフォルトでアクションが使用され、送信後にフォームが自動的にリセットされます。

アクションを基盤とする React 19 では、オプティミスティックな更新を管理する useOptimistic と、アクションの一般的なケースを処理するための新しいフック React.useActionState が導入されています。 React-dom では

を追加しています。フォームを自動的に管理するアクションと、フォーム内のアクションの一般的なケースをサポートするためにFormStatusを使用します。

React 19 では、上記の例は次のように簡略化できます。

// Using <form> Actions and useActionState
function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

次のセクションでは、React 19 の新しいアクション機能をそれぞれ詳しく説明します。

新しいフック: useActionState

アクションの一般的なケースを簡単にするために、useActionState:
という新しいフックを追加しました。

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      // You can return any result of the action.
      // Here, we return only the error.
      return error;
    }

    // handle success
    return null;
  },
  null,
);

useActionState は関数 (「アクション」) を受け取り、呼び出すラップされたアクションを返します。これが機能するのは、アクションが構成されているためです。ラップされたアクションが呼び出されると、useActionState はアクションの最後の結果をデータとして返し、アクションの保留状態を保留中として返します。

注記

React.useActionState は、Canary リリースでは以前 ReactDOM.useFormState と呼ばれていましたが、名前を変更し、useFormState を非推奨にしました。

詳細については #28491 を参照してください。
詳細については、useActionState.

のドキュメントを参照してください。

React DOM: アクション

アクションは React 19 の新しい とも統合されています。リアクトダムの機能。 、、 の action および formAction プロパティとして関数を渡すサポートを追加しました。アクションを使用してフォームを自動的に送信する要素:

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

がアクションが成功すると、React は制御されていないコンポーネントのフォームを自動的にリセットします。 をリセットする必要がある場合は、手動で、新しい requestFormReset React DOM API を呼び出すことができます。

詳細については、、、および

の React-dom ドキュメントを参照してください。

React DOM: 新しいフック: useFormStatus

デザイン システムでは、 に関する情報にアクセスする必要があるデザイン コンポーネントを作成するのが一般的です。コンポーネントにプロップをドリルダウンすることなく、それらは組み込まれています。これは Context を介して実行できますが、一般的なケースを簡単にするために、新しいフック useFormStatus:
を追加しました。

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

useFormStatus は、親

のステータスを読み取ります。あたかもフォームがコンテキストプロバイダーであるかのように。

詳細については、useFormStatus の React-dom ドキュメントを参照してください。

新しいフック: useOptimistic

データ変更を実行するときのもう 1 つの一般的な UI パターンは、非同期リクエストの進行中に最終状態を楽観的に表示することです。 React 19 では、これを簡単にするために useOptimistic という新しいフックを追加しています。

// Using <form> Actions and useActionState
function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

useOptimistic フックは、updateName リクエストの進行中にすぐに optimisticName をレンダリングします。更新が完了するかエラーが発生すると、React は自動的に currentName 値に戻ります。

詳細については、useOptimistic のドキュメントを参照してください。

新しい API: 使用する

React 19 では、render: use でリソースを読み取るための新しい API を導入しています。

たとえば、use を使用して Promise を読み取ることができ、Promise が解決されるまで React は一時停止します。

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      // You can return any result of the action.
      // Here, we return only the error.
      return error;
    }

    // handle success
    return null;
  },
  null,
);

注記

use は、render で作成された Promise をサポートしていません。
render で作成された Promise を使用するために渡そうとすると、React は警告します:

<form action={actionFunction}>

これを修正するには、Promise のキャッシュをサポートするサスペンス機能を備えたライブラリまたはフレームワークから Promise を渡す必要があります。将来的には、レンダリング時の Promise のキャッシュを容易にする機能を出荷する予定です。

use を使用してコンテキストを読み取ることもでき、早期リターン後など、条件付きでコンテキストを読み取ることができます。

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Prerender API は、静的 HTML ストリームを返す前に、すべてのデータがロードされるのを待ちます。ストリームは文字列に変換したり、ストリーミング応答とともに送信したりできます。ロード時のストリーミング コンテンツ (

) はサポートされていません。

Reactサーバーコンポーネント

サーバーコンポーネント

サーバー コンポーネントは、バンドルする前に、クライアント アプリケーションまたは SSR サーバーとは別の環境でコンポーネントを事前にレンダリングできる新しいオプションです。この別の環境は、React Server Components の「サーバー」です。サーバー コンポーネントは、CI サーバー上でビルド時に 1 回実行することも、Web サーバーを使用してリクエストごとに実行することもできます。

React 19 には、Canary チャネルに含まれる React Server Components の機能がすべて含まれています。これは、サーバー コンポーネントに付属するライブラリが、フルスタック React アーキテクチャをサポートするフレームワークで使用するための、反応サーバー エクスポート条件を備えたピア依存関係として React 19 をターゲットにできることを意味します。

以上がReact 19 の新機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。