skip to Main Content

Im just trying to understand the use case for using the react hook useForm over the react-dom useFormState. I see in the Nextjs docs that they recommend using the built in useFormState, but when I see people build apps with the new version of Nextjs a lot of them use the react hook useForm.

Im trying to understand the benefit of both. I do notice that some validate on both ends client and server side when using useForm with zod, but it seems like with the use of useFormState and just validating on the server is easier and produces the same result.

2

Answers


  1. I can’t tell you anything about useForm. But useFormState has only one purpose. Provide information (return value) from form actions (Next.js Server Actions). This is handy for example if you mutate server state and want access feedback (results) from the server action.

    Login or Signup to reply.
  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>
      );
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search