ReactJS - useFormStatus() Hook

---

---

The useFormStatus Hook in React is a useful tool for checking the status of the most recent form submission in our web apps. This hook makes it simple to find out when a form is in the process of submitting data. We will break down the useFormStatus Hook into simple terms in this tutorial to help readers understand and use it successfully.

Syntax

const { pending, data, method, action } = useFormStatus();

Parameters

The useFormStatus Hook does not take any parameters.

Return Value

When we use useFormStatus, we get a status object with the following properties −

• pending − It is a simple true or false value indicating if the parent <form> is currently being submitted. If true, the form is being submitted; else, it is not.

• data − It is an object that contains the data sent by the parent <form> during submission. It will be null if there is no submission or if there is no parent form.

• method − It is a string that can be 'get' or 'post' to show if the parent <form> uses the GET or POST HTTP method. A <form> uses GET by default, but we can override this with the method property.

• action − It is a reference to the function supplied to the parent <form>'s action prop. This property is null if there is no parent form. If the action prop specifies a URI value, or if no action prop is given, status.action will be null.

How to Use It?

• Import the "react-dom" useFormStatus Hook.

• Use it within a component that is rendered inside a <form>.

• To see if the form is currently submitting, use properties like status.pending on the status object.

Examples

Example 1

Let us discuss a simple example of how to use the useFormStatus Hook to create a React app. In this example, we will create a simple form with a submit button that becomes disabled after the form is submitted.

import React from "react";
import { useFormStatus } from "react-dom";

function App() {
   const status = useFormStatus();   
   const handleSubmit = (e) => {
      e.preventDefault();
      // form submission
      status.pending = true;
      setTimeout(() => {
         status.pending = false;
         alert("Form submitted!");
      }, 2000); // 2-second for form submission
   };
   
   return (
      <div className="App">
         <h1>Form Submission Example</h1>
         <form onSubmit={handleSubmit}>
            <div>
               <label htmlFor="name">User Name:</label>
               <input type="text" id="name" name="name" required />
            </div>
            <div>
               <label htmlFor="email">User Email:</label>
               <input type="email" id="email" name="email" required />
            </div>
            <button type="submit" disabled={status.pending}>
               {status.pending ? "Submitting..." : "Submit"}
            </button>
         </form>
      </div>
   );
}

export default App;

Output

After running the app we will be able to see a basic form with Name and Email boxes and a Submit button. When we fill out the form and click the Submit button, it becomes disabled for 2 seconds while the form submission is simulated. After that, we will notice an alert verifying form submission.

Example 2

Let us see another example using the useFormStatus function in a different context. Let us imagine a scenario where we want to create a simple registration form with a username, password, and confirm password fields. The form will show a loading state at the time of submitting.

import React from "react";
import { useFormStatus } from "react-dom";

function RegistrationForm() {
   // Use useFormStatus to track form submission status
   const status = useFormStatus();
   
   const handleSubmit = (e) => {
      e.preventDefault();
      
      // form submission
      status.pending = true;
      setTimeout(() => {
         status.pending = false;
         alert("Registration successful!");
      }, 2000); // 2 seconds for form submission
   };
   
   return (
      <div>
         <h1>Registration Form</h1>
         <form onSubmit={handleSubmit}>
            <div>
               <label htmlFor="username">Username:</label>
               <input type="text" id="username" name="username" required />
            </div>
            <div>
               <label htmlFor="password">Password:</label>
               <input type="password" id="password" name="password" required />
            </div>
            <div>
               <label htmlFor="confirmPassword">Confirm Password:</label>
               <input
                  type="password"
                  id="confirmPassword"
                  name="confirmPassword"
                  required
               />
            </div>
            <button type="submit" disabled={status.pending}>
            {status.pending ? "Registering..." : "Register"}
            </button>
         </form>
      </div>
   );
}

export default RegistrationForm;

Output

The useFormStatus hook is used in this app to control the form submission status. When the submission is in progress, the form will display "Registering..." and an alert after a 2-second delay.

Example 3

Let's create another example that makes use of the useFormStatus function. This time, we will create a simple feedback form with a text field where the user can submit input. While submitting, the form will show a loading status.

import React from "react";
import { useFormStatus } from "react-dom";

function FeedbackForm() {
   // Use useFormStatus to track form submission status
   const status = useFormStatus();
   
   const handleSubmit = (e) => {
      e.preventDefault();
      
      // Simulating form submission
      status.pending = true;
      setTimeout(() => {
         status.pending = false;
         alert("Feedback submitted!");
      }, 2000); // 2 seconds for form submission
   };
   
   return (
      <div>
         <h1>Feedback Form</h1>
         <form onSubmit={handleSubmit}>
            <div>
               <label htmlFor="feedback">Your Feedback:</label>
               <textarea
                  id="feedback"
                  name="feedback"
                  rows="4"
                  cols="50"
                  required
               ></textarea>
            </div>
            <button type="submit" disabled={status.pending}>
               {status.pending ? "Submitting..." : "Submit Feedback"}
            </button>
         </form>
      </div>
   );
}

export default FeedbackForm;

Output

The useFormStatus hook is used by the FeedbackForm component in this example to control the form submission status. When the submission is in progress, the form will display "Submitting..." and an alert after a 2-second delay. Users can leave feedback in the text box.

Limitations

• The useFormStatus Hook needs to be used within a component rendered within a <form>.

• It only gives status information for the parent <form>; it does not provide status information for any additional forms in the same component or child components.

Summary

The useFormStatus Hook in React is a useful tool for checking the progress of form submissions in our web apps. We can simply verify if a form is currently submitting, get the submitted data, and more by calling this hook. Just keep in mind that it should be used within a component that is rendered within a <form>.