javascript / intermediate
Snippet
Tracking Form Status with useFormStatus
The useFormStatus hook provides information about the last form submission. It is particularly useful for disabling buttons or showing loading indicators in child components of a form using Server Actions.
snippet.js
javascript
1
2
3
4
5
6
import { useFormStatus } from 'react-dom';function SubmitButton() {const { pending } = useFormStatus();return <button disabled={pending}>{pending ? 'Sending...' : 'Submit'}</button>;}
nextjs
Breakdown
1
const { pending } = useFormStatus();
Destructures the pending boolean which becomes true during an active Server Action.
2
disabled={pending}
Prevents multiple submissions by disabling the button while the action is processing.