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 更新により、ユーザーは非同期リクエストの進行中に変更をすぐに確認(rèn)できます。新しい useOptimistic フックにより、このパターンが簡単になります。

例: 楽観的な名前の変更

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.水分補給の不一致に対するエラーレポートの強化

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

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

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 は、