Using the useFormStatus hook with the Button component.

[ahmetturp]

Problem Description

Hi,

I have the following button on my HeroUI Form component in my Next.js project:

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <Button color="primary" isLoading={pending} type="submit">
      {pending ? "Submitting..." : "Submit"}
    </Button>
  );
}

When I submit the form, the button doesn't change to the "loading" variant and the text doesn't change to "Submitting...".

If I use regular button tags, the pending state from useFormStatus works, but I lose the HeroUI button styling.

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button color="primary" type="submit">
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

Expected Result

I expect to use HeroUI's Button component with the useFormstatus hook and see the button as below:

Thank you for your help! You can find the whole component below:

"use client";

import { Button } from "@heroui/button";
import { Form } from "@heroui/form";
import { Input } from "@heroui/input";
import { useFormStatus } from "react-dom";

import { updateHero } from "@/lib/actions";

interface UpdateHeroFormProps {
  data: {
    full_name: string;
    job_title: string;
  };
}

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <Button color="primary" isLoading={pending} type="submit">
      {pending ? "Submitting..." : "Submit"}
    </Button>
  );
}

function UpdateHeroForm({ data }: UpdateHeroFormProps) {
  return (
    <Form action={updateHero} className="w-full flex flex-col gap-6">
      <Input
        isRequired
        defaultValue={data.full_name || ""}
        errorMessage="Please enter a valid full name"
        label="Full Name"
        name="full_name"
        type="text"
      />

      <Input
        isRequired
        defaultValue={data.job_title || ""}
        errorMessage="Please enter a valid job title"
        label="Job Title"
        name="job_title"
        type="text"
      />
      <div className="flex justify-end w-full gap-2">
        <Button color="danger" type="reset" variant="light">
          Reset
        </Button>
        <SubmitButton />
      </div>
    </Form>
  );
}

export default UpdateHeroForm;

Codesandbox

You can see the problem here. Open app/UpdateHeroForm.tsx file. Instructions to simulate the problem are written there.

https://codesandbox.io/p/devbox/romantic-mayer-qm8dnr?workspaceId=ws_9sNiQuzj9FPgLFKd9X5nWr

[ahmetturp]

Hello all,

Do you have any suggestions to my problem?

[wingkwong]

can you provide a sandbox so that we can directly check there?

[ahmetturp]

Thanks! There you go:

https://codesandbox.io/p/devbox/romantic-mayer-qm8dnr?workspaceId=ws_9sNiQuzj9FPgLFKd9X5nWr

You can go to app/UpdateHeroForm.tsx file. Instructions to simulate the problem are written there.

[Aredli16]

I tried your CodeSandbox and the issue is the same I had. With wrapped, React doesn’t always re-render the children when useFormStatus().pending changes.

A simple fix is to force a re-render by giving the button a key. It can even be something short or random:

<Button type="submit" disabled={pending} key={pending ? 1 : 0}>
  {pending ? "Submitting..." : "Submit"}
</Button>

This makes React recreate the button whenever pending changes, so:

• The text updates (Submit → Submitting...)
• The button disables correctly
• Styling from your library stays intact

[ahmetturp]

Hi! Thank you very much for the solution. It works!