React 19 useFormStatus Fix: How to Handle Pending State and Multi-Button Forms
React 19's useFormStatus hook silently returns false when called in the wrong component, since it only tracks a parent form rather than one rendered by the same component. A developer built a reusable SubmitButton component to address this, replacing the native disabled attribute with aria-disabled to prevent focus loss for keyboard users during form submission. A second issue emerged in forms with multiple submit buttons, where the pending state applied to the entire form rather than the specific button clicked, causing all buttons to appear active simultaneously. To resolve this, the solution reads the submitted button's intent from FormData and compares it to each button's identifier, ensuring only the pressed button shows a pending state. The developer also recommends wrapping form fields in a fieldset component that auto-disables inputs during submission, reducing the need for individual disabled props on each field.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)
Log in to join the discussion and vote.
Log in