tracking-form-status

useFormStatus tracks form submission state in React 19, returning a pending boolean that disables the submit button during server actions. Place useFormStatus inside your form component and bind the pending state to the button's disabled attribute to prevent duplicate submissions.

useFormStatus returns pending (boolean), data (FormData|null), method ('get'|'post'), and action (function|null) from the parent form. Use pending to show loading indicators, data to access submitted values, method to determine request type, and action to identify which server action triggered the submission.

useFormStatus must be called inside a form component—typically in a child component like a SubmitButton—to accurately track the parent form's submission state. Placing it outside the form or in unrelated components won't capture submission events.

Yes, useFormStatus is designed specifically for server actions in React 19. It monitors form submissions tied to server actions and provides real-time pending state, allowing you to build responsive UIs that reflect submission progress.

Use the pending boolean from useFormStatus to conditionally render a loading indicator. While pending is true, display a spinner or loading message; when pending is false, show the normal submit button state.