Discuss useFormStatus hook.
useFormStatus is a Hook that gives you status information of the last form submission.
- 1
useFormStatus does not take any parameters.
- 2
it must be called from a component that is nested inside the <form>.
- 3
useFormStatus solves prop drilling. It allows your SubmitButton to be smart and know when its parent form is submitting without needing any props(as with useActionState) passed to it.
- 4
useFormStatus will only return pending: true if it is rendered inside the <form> tags. If you put it in the same component as the <form>, it won't work because it can't see the parent it is currently part of.
- 5
useFormStatus also provides the data (a FormData object) being sent. This is great for Optimistic UI (showing the user what they just typed before the server even responds).
- 1
pending: A boolean. If true, this means the parent <form> is pending submission. Otherwise, false.
- 2
data: An object implementing the FormData interface that contains the data the parent <form> is submitting. If there is no active submission or no parent <form>, it will be null.
- 3
method: A string value of either 'get' or 'post'. This represents whether the parent <form> is submitting with either a GET or POST HTTP method. By default, a <form> will use the GET method and can be specified by the method property.
- 4
action: A reference to the function passed to the action prop on the parent <form>. If there is no parent <form>, the property is null. If there is a URI value provided to the action prop, or no action prop specified, status.action will be null.
Scenario Questions
0-2 years experience
- 1Imagine you have a login form and want to disable the submit button and show a 'Submitting...' spinner while the form is saving. How would you use useFormStatus to implement this spinner inside a custom button component?
- 2You've just added useFormStatus to your form component to show a loading state, but pending is always returning false even when the form is submitting. The hook is called right next to your form tag in the same component. Why is this happening, and how do you fix it?
2-5 years experience
- 1We are migrating a legacy form from using useState for tracking isLoading to React 19's useFormStatus. However, our form uses a traditional onSubmit handler that calls an async API. How does useFormStatus behave here, and what changes do we need to make to our form submission logic to make it work?
- 2Suppose you have a multi-step checkout form where different sections need to know if the overall form is submitting to disable their inputs. How would you structure your component tree so that these deeply nested inputs can leverage useFormStatus without prop-drilling?
5-8 years experience
- 1We are building a high-performance dashboard with inline-editable forms. If a user triggers multiple form submissions rapidly, how does useFormStatus handle concurrent actions? How would you design a solution to prevent race conditions or UI flickering using this hook?
- 2When designing a reusable design system button component that automatically handles its own loading state via useFormStatus, how do you ensure it remains accessible (e.g., aria-disabled, screen readers) and gracefully falls back when used outside of a React 19 form context?
8+ years experience
- 1Our enterprise application is currently built on a mix of React Hook Form and custom state management. We are planning a migration to React 19 Server Actions and want to standardize on native form elements and useFormStatus. What architectural challenges, testing strategies, and progressive enhancement tradeoffs should we present to the team before committing to this migration?
- 2In a micro-frontend architecture where forms are rendered by one team's shell but the submit buttons or status indicators might be injected by another team's federated module, how does the context-bound nature of useFormStatus impact our integration boundaries, and what patterns would you establish to keep these modules decoupled?
Follow-up Questions
- What happens if you call useFormStatus in the same component that renders the form tag itself?
- How does useFormStatus behave when using traditional onSubmit handlers instead of React 19 Form Actions?
- How would you access the form data submitted by the user using this hook while the action is still pending?