`useFormStatus()` lets a component know whether its parent form is currently being submitted. It is especially useful for submit buttons that should show loading feedback and prevent accidental repeated submissions. ### Submit Button Component ```jsx 'use client'; import { useFormStatus } from 'react-dom'; export function SubmitButton() { const { pending } = useFormStatus(); return ( ); } ``` Then render it inside a form: ```jsx

``` ### Why Disable the Button? Without a pending state, a user may click: ```text Save Save Save ``` while the first request is still processing. That can produce duplicate operations if your server logic does not otherwise protect against them. A pending button improves the experience: ```text Save ↓ click Saving... ↓ complete Save ``` ### useFormStatus Must Be Inside the Form This is an important rule. The component calling `useFormStatus()` must be rendered as a descendant of the form whose status it needs. Correct: ```jsx

``` ### Common Mistake This pattern is problematic: ```jsx function Form() { const { pending } = useFormStatus(); return ( ); } ``` The hook is not inside that form; it is being called by the component that creates the form. Extract the button or status UI into a child component instead. ### More Than pending `useFormStatus()` can also provide information related to the current submission, including submitted form data and the associated action. For most forms, `pending` is the value developers use most often. ### useFormStatus vs useActionState They solve different problems: ```text useFormStatus → status of surrounding form submission useActionState → state/result returned from an Action ``` ### Interview-Ready Answer Use `useFormStatus()` from `react-dom` in a component rendered inside a form to detect whether that form is submitting. The `pending` value is commonly used to disable the submit button and display loading feedback. Unlike `useActionState`, it tracks the surrounding form's submission status rather than storing the action result.