import { useActionState } from "react";

function UpdateNameForm() {
  const [error, submitAction, isPending] = useActionState(
    async (prevState, formData) => {
      const name = formData.get("name");
      const error = await updateName(name);
      if (error) {
        return error;
      }
      redirect("/profile");
      return null;
    },
    null
  );

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

ここで、useActionState は送信狀態(tài)とエラー処理を管理し、コードをクリーンにして保守しやすくします。

2. useOptimistic を使用したオプティミスティック更新

オプティミスティック UI 更新により、ユーザーは非同期リクエストの進(jìn)行中に変更をすぐに確認(rèn)できます。新しい useOptimistic フックにより、このパターンが簡(jiǎn)単になります。

例: 楽観的な名前の変更

import { useOptimistic } from "react";

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName); // Show optimistic state
    const updatedName = await updateName(newName); // Wait for the async request
    onUpdateName(updatedName); // Update the actual state
  };

  return (
    <form action={submitAction}>
      <p>Your name: {optimisticName}</p>
      <input type="text" name="name" />
      <button type="submit">Change Name</button>
    </form>
  );
}

useOptimistic は、サーバーが応答する前でも更新を表示することで、シームレスなユーザー エクスペリエンスを保証します。

3.水分補(bǔ)給の不一致に対するエラーレポートの強(qiáng)化

React 19 では、特にハイドレーション エラーのエラー処理が改善されています。あいまいなエラーの代わりに、サーバーとクライアント間の不一致コンテンツの詳細(xì)な差分を取得できるようになりました。

例: ハイドレーション誤差の差

Uncaught Error: Hydration failed because the server-rendered HTML didn’t match the client.
Tree mismatch:
+ Client: <span>Welcome</span>
- Server: <span>Hello</span>

これらの明確なメッセージは、開発者が問題を迅速かつ効率的にデバッグするのに役立ちます。

4.サーバーコンポーネントとサーバーアクション

React Server Components (RSC) を使用すると、サーバー上でコンポーネントをレンダリングできるようになり、パフォーマンスが向上します。サーバー アクションを使用すると、クライアント コンポーネントから直接サーバー上の非同期関數(shù)を呼び出すことができます。

例: サーバー アクションの使用

// Server Component
export const fetchComments = async () => {
  const response = await fetch("/api/comments");
  return await response.json();
};

// Client Component
import { use } from "react";

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // Suspends until resolved
  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment.id}>{comment.text}</li>
      ))}
    </ul>
  );
}

// Usage
function App() {
  return (
    <Suspense fallback={<p>Loading comments...</p>}>
      <Comments commentsPromise={fetchComments()} />
    </Suspense>
  );
}

サーバー アクションは、クライアント コンポーネント內(nèi)のサーバー側(cè)データの取得とレンダリングを効率化します。

5.ネイティブのメタデータとスタイルシートの管理

React 19 は、