reactjs - Nextjs v14 における useFormState と useForm

私は単に、react hook の useForm を react-dom の useFormState より使う場合のユースケースを理解しようとしています。Nextjs のドキュメントでは、組み込みの useFormState を使うことを推奨しているのを見ますが、新しいバージョンの Nextjs でアプリを作っている人々を見ると、多くの人が react hook の useForm を使っています。

私は両方の利点を理解しようとしています。useFormをzodと一緒に使用する際、クライアント側とサーバー側の両方でバリデーションを行うものもあることに気付きますが、useFormStateを使い、サーバー側だけでバリデーションを行う方が簡単で同じ結果が得られるように思えます。

回答 #1

私は useForm について何もお伝えできません。しかし useFormState には一つの目的しかありません。フォームアクション（Next.js サーバーアクション）から情報（戻り値）を提供することです。例えば、サーバーの状態を変更してサーバーアクションからのフィードバック（結果）にアクセスしたい場合に便利です。

回答 #2

"use client";
import { useFormState } from "react-dom";

async function increment(previousState: any, formData: FormData) {

  return previousState + 1;
}
export default function StatefulForm({}) {
  const [state, formAction] = useFormState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}