React JS 19 Tutorial in Hindi #41 useFormStatus Hook in React js

  1. What is use Form Status
  2. Example
  3. Make form
  4. Handle submit form
  5. Interview Question

The useFormStatus hook in React provides information about the submission status of a form. It's particularly useful for displaying UI elements like loading indicators or disabling submit buttons while the form is being processed, enhancing the user experience during form submissions.

import {useFormStatus} from 'react-dom'
function App() {


const handleSubmit=async ()=>{
await new Promise(res=>setTimeout(res,5000));
console.log("submit");
}

function CustomerForm(){
const {pending,data,method} =useFormStatus();
console.log(pending,data,method);
return(
<div>
<input type="text" placeholder="Enter Name" />
<br />
<br />
<input type="text" placeholder="Enter Password" />
<br />
<br />
<button disabled={pending}>{pending?'Submitting...':'Submit'}</button>

</div>
)
}
return (
<div>
<h1>useFormStatus Hook in React js 19</h1>
<form action={handleSubmit} method='post'>
<CustomerForm />
</form>
</div>

);
}

export default App;