useFormStatus

Provides status information about the nearest parent <form> submission (such as pending, data, method, and action). It must be called from a child component rendered inside the <form>, eliminating the need to pass state or props down for loading indicators.

import { useFormStatus } from 'react';

// Simple form component
export const Form = () => {
    return (
        <form action="...">
            <input name="..." />
            <SubmitButton />
        </form>
    );
};

// The child component can access form metadata from the nearest form
export const SubmitButton = () => {
    const { pending, data, method, action } = useFormStatus(); // Return metadata from the parent form
    
    return (
        <button type="submit" disabled={pending}>
            {pending ? 'Submitting...' : 'Submit'}
        </button>
    );
};