useFormStatus in React 19

Hello everyone. I would like to write about useFormStatus updated in React 19, which is one of new hooks. This hook is relevant to Form Actions. Hence, If you do not understand Form Actions, please read the previous post before reading this article.

What is useFormStatus?

"useFormStatus" is new hook obtain the status during form submission. Using this hook, you can display the status of the form on the screen, or restrict form input during submission.

Instructions

①Create a form using Form Actions
/app/page.tsx

export default function Home() {
  const formAction = async (formData: FormData) => {
    "use server";
    await new Promise((resolve) => {
      setTimeout(resolve, 1000);
    }); //intentionally delay time
    console.log(formData.get("firstName"));
  };

  return (
    <form action={formAction}>
      <div>
        <label>Name:</label>
        <input type="text" name="firstName" />
      </div>
      <button className="border border-black">Resister</button>
    </form>
  );
}

The feature of this form is following description.

• When you click the registration button on the form, the entered name will be output to the debug console log as server-side processing.

• Because I want to check the status of the form, I intentionally delay the process by using PROMISE and SET TIMEOUT.

②Convert the button into a component
/app/Register.tsx

const Register = () => {
  return <button className="border border-black">Resister</button>;
};

export default Register;

/app/page.tsx

import Register from "./Register";

export default function Home() {
  const formAction = async (formData: FormData) => {
    "use server";
    await new Promise((resolve) => {
      setTimeout(resolve, 1000);
    }); //intentionally delay time
    console.log(formData.get("firstName"));
  };

  return (
    <form action={formAction}>
      <div>
        <label>Name:</label>
        <input type="text" name="firstName" />
      </div>
      <Register />
    </form>
  );
}

The element(submission button) under the form that use server action, which is converted into child component. In this case, I converted button element into Register.tsx.

③Use the useFormStatus
/app/Register.tsx

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

const Register = () => {
  const { pending } = useFormStatus();

  return (
    <button className="border border-black">
      {pending ? "Loading" : "Register"}
    </button>
  );
};

export default Register;

I added following in the Register.tsx.

• "const { pending } = useFormStatus();" is to get the status of form submission. The text of the button is changed by changing the content of the variable “pending”.

• I added "use client";"

④Result

I can see the Loading during submission of the form.

Thanks for reading this article.
Next time, I will explain a new hook, which is useFormState.