Introduction

What is the useFormStatus Hook?

Based on its definition on the React website, it is: "a Hook that gives you status information of the last form submission." It serves as an alternative to manually using a loading state to display loading spinners and offers other features. We will explore how to use it and its specific use cases.

Returned Values

It returns four specific values:

pending : A boolean value used to determine the submission status of the form. If the data has finished sending, the value is false; if the process is currently running, it is true.

data : An object containing the form data. This value will be null unless two conditions are met:

1- The parent must be a form .This hook can only be used if it is inside a child component of a form element.

2- There must be an active submission. Data is only available when pending is true, specifically after the submit button is clicked.

method : The HTTP methods used (GET or POST).

action : A reference to the function passed to the form's action prop. If no action prop is passed to the form, it returns null.

syntax

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

Common Use Cases

Disabling the Submit Button

This is the most common use case and serves as a replacement for manual loading states.

Before Using the Hook

Copytypescript
1export default function Form(){
2// init loading state
3const [loading,setLoading] = useState(false)
4// sumbit function
5async funciton handleSubmit(){
6try{
7//handle logic...
8awiat doServerTask()
9}
10catch(errro){
11// handle the error
12{
13finally{
14// update loading state
15setLoading(true)
16}
17}
18
19return(
20<>
21<form action={handleSubmit}>
22 <button type='submit' disabled={loading}
23    {lodaing ? "submitting" : "submit"}
24 </button>
25</form>
26</>
27)
28}

After using the Hook

Copytypescript
1// Parent Component
2export default funtion Form(){
3// action 
4async function handleSubmit(){
5await doServerLogic();
6}
7
8return (
9<form action={handleSubmit}>
10// Note : the hook only work if the parent only <form>
11// i.e : it will not work if used in the same component level
12
13{/* useFormStatus works here because SubmitBtn is a child */}
14<SubmitBtn/>
15</form>
16)
17}
18
19// Child Component 
20function SubmitBtn(){
21const {pending} = useFormStatus();
22return(
23<>
24<input type='text'/>
25<button type="submit" disabled={pending}>
26  {pending ? "submitting" : "submit"}
27  <button/>
28  </>
29  )
30  }

Why is using this hook better?

1.Less Boilerplate: You do not need to use useState, useEffect, or manually manage a loading state.

2.Separation of Concerns: The form component handles the logic and data, while the submit button handles its own internal state.