useFormStatus pending state not updating during manual Server Action invocation

Direct answer

useFormStatus depends on a React context that the transition API sets exclusively during native form submission. When a Server Action is called from an onClick handler or other JavaScript event, that context remains unset, so the hook reports pending as false.

Likely explanation vs confirmed facts

Likely explanation: the React Transition API does not run during manual invocation, so the pending context is never created.

Confirmed from research brief: useFormStatus reads pending state from a context set only during native form submission; manual Server Action calls do not populate this context.

Practical workarounds

1. Manage pending UI state locally with useState, toggling true before the action call and false in the resolved/rejected handler.
2. Use form.requestSubmit() to invoke the action through the native submission flow, which preserves the pending context that useFormStatus expects.
3. Create a custom context provider that tracks the action's in-flight status and exposes it to child components.

Verification steps

Inspect the React DevTools pending badge on the form element; it should show pending only during native submission. Add console.log inside the Server Action to confirm it runs; if it runs but pending stays false, the context is missing. Test with form.requestSubmit() and verify the pending update.

Note: useFormStatus was introduced in React 19 / Next.js 14; earlier versions do not support the hook.

To determine which workaround best fits your case, could you confirm whether the pending state must reflect the full action lifecycle (including success) or only the in-flight period? This single detail helps narrow the recommended approach.