I'm using Server Actions with react-hook-form and somehow can't get useFormState to work for showing pending state.CreateInvoice & Submit Button component:export default function InvoiceForm() { const [state, formAction] = useFormState( generateInvoice.bind(null, invoice ? "update" : "create"), { success: false }, ); const form = useForm >({ resolver: zodResolver(invoiceSchema), defaultValues, }) return ( { event.preventDefault(); form.handleSubmit(() => { // formData processing and calling server action formAction(formData); } > {/* some form controls */} ) } function SubmitButton({ action }: { action: "create" | "update" }) { const { pending } = useFormStatus(); return ( {/* This pending state is not working */} {pending ? `${action === "create" ? "Generating" : "Updating"} Invoice...` : `${action === "create" ? "Generate" : "Update"} Invoice`} ); }

Can't get useFormState to work

Answered

WebDevSayantan posted this in #help-forum

2024-03-19T17:16:53.000Z

I'm using Server Actions with react-hook-form and somehow can't get useFormState to work for showing pending state.

CreateInvoice & Submit Button component:

export default function InvoiceForm() {
  const [state, formAction] = useFormState(
    generateInvoice.bind(null, invoice ? "update" : "create"),
    { success: false },
  );
  const form = useForm<z.infer<typeof invoiceSchema>>({
    resolver: zodResolver(invoiceSchema),
    defaultValues,
  })
  return (
    <Form {...form}>
      <form action={formAction} 
        onSubmit={(event) => {
          event.preventDefault();
          form.handleSubmit(() => {
            // formData processing and calling server action
            formAction(formData);
          }
      >
      {/* some form controls */}
      <SubmitButton action={invoice ? "update" : "create"} />
      </form>
    </Form>
  )
}
function SubmitButton({ action }: { action: "create" | "update" }) {
  const { pending } = useFormStatus();
  return (
      {/* This pending state is not working */}
      <Button type="submit" aria-disabled={pending}>
        {pending
          ? `${action === "create" ? "Generating" : "Updating"} Invoice...`
          : `${action === "create" ? "Generate" : "Update"}  Invoice`}
      </Button>
  );
}

Answered by Ray

form.handleSubmit() is calling preventDefault behind the scenes which made useFormStatus doesn't work

View full answer

32 Replies

@WebDevSayantan I'm using Server Actions with react-hook-form and somehow can't get useFormState to work for showing pending state. **CreateInvoice & Submit Button component:** typescript export default function InvoiceForm() { const [state, formAction] = useFormState( generateInvoice.bind(null, invoice ? "update" : "create"), { success: false }, ); const form = useForm<z.infer<typeof invoiceSchema>>({ resolver: zodResolver(invoiceSchema), defaultValues, }) return ( <Form {...form}> <form action={formAction} onSubmit={(event) => { event.preventDefault(); form.handleSubmit(() => { // formData processing and calling server action formAction(formData); } > {/* some form controls */} <SubmitButton action={invoice ? "update" : "create"} /> </form> </Form> ) } function SubmitButton({ action }: { action: "create" | "update" }) { const { pending } = useFormStatus(); return ( {/* This pending state is not working */} <Button type="submit" aria-disabled={pending}> {pending ? `${action === "create" ? "Generating" : "Updating"} Invoice...` : `${action === "create" ? "Generate" : "Update"} Invoice`} </Button> ); }

Ray

2024-03-20T12:00:09.000Z

try comment out event.preventDefault();

@Ray try comment out `event.preventDefault();`

WebDevSayantanOP

2024-03-20T12:03:06.000Z

No, that didn't work too.

@WebDevSayantan No, that didn't work too.

Ray

2024-03-20T12:09:33.000Z

does it work if you comment out the onSubmit props

@Ray does it work if you comment out the `onSubmit` props

WebDevSayantanOP

2024-03-20T12:12:20.000Z

Yes! It does, but now that runs into a different error as formData doesn't have all required values. ðŸ˜¦

@WebDevSayantan Yes! It does, but now that runs into a different error as formData doesn't have all required values. ðŸ˜¦

Ray

2024-03-20T12:13:16.000Z

then should be something wrong with your form

will need to see more code

@Ray then should be something wrong with your form

WebDevSayantanOP

2024-03-20T12:19:34.000Z

This is my full handleSubmit function:

<form
  action={formAction}
  onSubmit={(event) => {
    form.handleSubmit(() => {
      const formData = new FormData();
      if (invoice?.id) {
        formData.append("id", `${invoice.id}`);
      }
      formData.append("guestName", form.getValues("guestName"));
      formData.append(
        "invoiceDate",
        form.getValues("invoiceDate").toString(),
      );
      formData.append(
        "checkinDate",
        form.getValues("checkinDate").toString(),
      );
      formData.append(
        "checkoutDate",
        form.getValues("checkoutDate").toString(),
      );
      formData.append("homestayId", homestayId);
      formData.append(
        "accomodation",
        JSON.stringify(form.getValues("accomodation")),
      );
      formData.append(
        "food",
        JSON.stringify({
          breakfast: form.getValues("food.breakfast"),
          lunch: form.getValues("food.lunch"),
          dinner: form.getValues("food.dinner"),
          snacks: form.getValues("food.snacks"),
        }),
      );
      formAction(formData);
    })(event);
  }}
  className="flex flex-col w-full gap-8"
>

Github repo to the actual file if needed: https://github.com/Ishanz23/the-pineapple-home-nextjs/blob/main/app/business/%5Bhomestay%5D/invoices/components/invoiceForm.tsx

@WebDevSayantan This is my full handleSubmit function: tsx <form action={formAction} onSubmit={(event) => { form.handleSubmit(() => { const formData = new FormData(); if (invoice?.id) { formData.append("id", `${invoice.id}`); } formData.append("guestName", form.getValues("guestName")); formData.append( "invoiceDate", form.getValues("invoiceDate").toString(), ); formData.append( "checkinDate", form.getValues("checkinDate").toString(), ); formData.append( "checkoutDate", form.getValues("checkoutDate").toString(), ); formData.append("homestayId", homestayId); formData.append( "accomodation", JSON.stringify(form.getValues("accomodation")), ); formData.append( "food", JSON.stringify({ breakfast: form.getValues("food.breakfast"), lunch: form.getValues("food.lunch"), dinner: form.getValues("food.dinner"), snacks: form.getValues("food.snacks"), }), ); formAction(formData); })(event); }} className="flex flex-col w-full gap-8" > Github repo to the actual file if needed: https://github.com/Ishanz23/the-pineapple-home-nextjs/blob/main/app/business/%5Bhomestay%5D/invoices/components/invoiceForm.tsx

Ray

2024-03-20T12:24:11.000Z

wait, do you get the correct data in the action with just action props on the form?

WebDevSayantanOP

2024-03-20T12:26:49.000Z

I'm calling formAction function at the end of submitHandler function with the prepared formData manually.

@WebDevSayantan I'm calling formAction function at the end of submitHandler function with the prepared formData manually.

Ray

2024-03-20T12:31:32.000Z

I think useFormState doesn't work with react-hook-form

form.handleSubmit() is calling preventDefault() which make the useFormStatus doesnt work properly

why you need useFormStatus when you can get the submission state from react-hook-form?

WebDevSayantanOP

2024-03-20T12:33:25.000Z

That might be the case, I also removed the

action={formAction}

action prop from the form as it's not actually being used.
The form submission functionality works as expected, only that the useFormState isn't behaving as I expect to.

Ray

2024-03-20T12:34:06.000Z

try this code

 <form
    action={action}
    onSubmit={form.handleSubmit((values) => {
      form.trigger();
      if (form.formState.isValid) {
        const formData = new FormData();
        for (const [k, v] of Object.entries(values)) {
          formData.append(k, v);
        }
        action(formData);
      }
    })}
  >

@Ray try this code ts <form action={action} onSubmit={form.handleSubmit((values) => { form.trigger(); if (form.formState.isValid) { const formData = new FormData(); for (const [k, v] of Object.entries(values)) { formData.append(k, v); } action(formData); } })} >

WebDevSayantanOP

2024-03-20T12:39:35.000Z

Form submission still works as expected, but the useFormStatus hook doesn't.

@WebDevSayantan Form submission still works as expected, but the useFormStatus hook doesn't.

Ray

2024-03-20T12:43:11.000Z

ok made it work with this

 <form
    action={formAction}
    onSubmit={(e) => {
      form.trigger();
      if (form.formState.isValid) {
        e.currentTarget?.requestSubmit();
      } else {
        e.preventDefault();
      }
    }}
  >

WebDevSayantanOP

2024-03-20T12:58:27.000Z

I'm getting event.currentTaget as null inside the function.

@WebDevSayantan I'm getting event.currentTaget as null inside the function.

Ray

2024-03-20T13:00:35.000Z

could you show the code

and does it work?

the currentTarget is null if you log it in console

WebDevSayantanOP

2024-03-20T13:09:15.000Z

Sure..

const handleFormAction = (event: FormEvent<HTMLFormElement>) => {
  form.handleSubmit((values) => {
    form.trigger();
    console.log("is valid", form.formState.isValid);
    if (form.formState.isValid) {
    console.log(values);
    const formData = new FormData();
    if (invoice?.id) {
      formData.append("id", `${invoice.id}`);
    }
    formData.append("guestName", form.getValues("guestName"));
    formData.append(
      "invoiceDate",
      form.getValues("invoiceDate").toString(),
    );
    formData.append(
      "checkinDate",
      form.getValues("checkinDate").toString(),
    );
    formData.append(
      "checkoutDate",
      form.getValues("checkoutDate").toString(),
    );
    formData.append("homestayId", homestayId);
    formData.append(
      "accomodation",
      JSON.stringify(form.getValues("accomodation")),
    );
    formData.append(
      "food",
      JSON.stringify({
        breakfast: form.getValues("food.breakfast"),
        lunch: form.getValues("food.lunch"),
        dinner: form.getValues("food.dinner"),
        snacks: form.getValues("food.snacks"),
      }),
    );
    formData.append(
      "amenities",
      JSON.stringify(form.getValues("amenities")),
    );
    // formAction(formData);
    console.log(event);
    event.currentTarget.requestSubmit();
  } else {
    event.preventDefault();
  }
})(event);
};

  <form
    ref={formRef}
    action={formAction}
    onSubmit={handleFormAction}
    className="flex flex-col w-full gap-8"
  >

@WebDevSayantan Sure.. typescript const handleFormAction = (event: FormEvent<HTMLFormElement>) => { form.handleSubmit((values) => { form.trigger(); console.log("is valid", form.formState.isValid); if (form.formState.isValid) { console.log(values); const formData = new FormData(); if (invoice?.id) { formData.append("id", `${invoice.id}`); } formData.append("guestName", form.getValues("guestName")); formData.append( "invoiceDate", form.getValues("invoiceDate").toString(), ); formData.append( "checkinDate", form.getValues("checkinDate").toString(), ); formData.append( "checkoutDate", form.getValues("checkoutDate").toString(), ); formData.append("homestayId", homestayId); formData.append( "accomodation", JSON.stringify(form.getValues("accomodation")), ); formData.append( "food", JSON.stringify({ breakfast: form.getValues("food.breakfast"), lunch: form.getValues("food.lunch"), dinner: form.getValues("food.dinner"), snacks: form.getValues("food.snacks"), }), ); formData.append( "amenities", JSON.stringify(form.getValues("amenities")), ); // formAction(formData); console.log(event); event.currentTarget.requestSubmit(); } else { event.preventDefault(); } })(event); }; tsx <form ref={formRef} action={formAction} onSubmit={handleFormAction} className="flex flex-col w-full gap-8" >

Ray

2024-03-20T13:10:03.000Z

remove form.handleSubmit()

@Ray ok made it work with this ts <form action={formAction} onSubmit={(e) => { form.trigger(); if (form.formState.isValid) { e.currentTarget?.requestSubmit(); } else { e.preventDefault(); } }} >

Ray

2024-03-20T13:10:17.000Z

try the code here

Ray

2024-03-20T13:10:43.000Z

form.handleSubmit() is calling preventDefault behind the scenes which made useFormStatus doesn't work

Answer

Ray

2024-03-20T13:11:39.000Z

  const handleFormAction = (event: FormEvent<HTMLFormElement>) => {
    form.trigger();
    console.log("is valid", form.formState.isValid);
    if (form.formState.isValid) {
      event.currentTarget.requestSubmit();
    } else {
      event.preventDefault();
    }
  };

WebDevSayantanOP

2024-03-20T13:17:07.000Z

Okay, Got it. useFormStatus is working now. But I need to modify the formData before calling the server action.

event.currentTarget.requestSubmit();

^ Is there anyway to pass the modified formData to the formAction call here?

@WebDevSayantan Okay, Got it. useFormStatus is working now. But I need to modify the formData before calling the server action. event.currentTarget.requestSubmit(); ^ Is there anyway to pass the modified formData to the formAction call here?

Ray

2024-03-20T13:17:53.000Z

the invoice.id?

either bind it to the server action or render a hidden input in the form

WebDevSayantanOP

2024-03-20T13:18:28.000Z

InvoiceId, homestayId, calendar inputs from shadCn and the nested formGroups. Will try to see workarounds. Anyway, thanks a lot, Got to know the why the useFormState is not working.

@WebDevSayantan InvoiceId, homestayId, calendar inputs from shadCn and the nested formGroups. Will try to see workarounds. Anyway, thanks a lot, Got to know the why the useFormState is not working.

Ray

2024-03-20T13:22:33.000Z

@Ray np

WebDevSayantanOP

2024-03-20T14:48:14.000Z

Figured it out.

My form doesn't need an onSubmit event anymore. useFormStatus works as expected.

const [state, formAction] = useFormState(
  generateInvoice.bind(null, invoice ? "update" : "create"),
  { success: false },
);

const handleFormAction = (data: FormData) => {
  const formData = new FormData();
  // modifying formdata according to my needs
  formAction(formData);
}
return ( 
  <form action={handleFormAction} className="flex flex-col w-full gap-8">
    ...
  </form>
)

@WebDevSayantan Figured it out. My form doesn't need an onSubmit event anymore. useFormStatus works as expected. typescript const [state, formAction] = useFormState( generateInvoice.bind(null, invoice ? "update" : "create"), { success: false }, ); const handleFormAction = (data: FormData) => { const formData = new FormData(); // modifying formdata according to my needs formAction(formData); } return ( <form action={handleFormAction} className="flex flex-col w-full gap-8"> ... </form> )

Ray

2024-03-20T15:17:47.000Z

yeah that works if you doesn't need client side validation