TanStack Form in Next.js: Best Practices for Pending Status, Success/Error Handling & Sonner Toasts?
Hi everyone,
I'm currently in the process of migrating my form logic in a Next.js project to TanStack Form. Previously, I was using server actions with the useActionState hook (or a similar mechanism for Server Actions) and utilized its pending status to display loading states in the UI. Additionally, I used a useEffect hook to react to the data or error state to display corresponding success or failure notifications with Sonner (Toaster).
Now, with TanStack Form, I'm looking for a similarly elegant way to replicate this behavior. I've noticed that the isSubmitting property from TanStack Form doesn't reliably show the desired pending status during asynchronous submission in my setup. Currently, for the pure pending indicator, I'm still relying on the status from my Server Action, which I'd like to consolidate.
My specific question:
How do you handle the submission lifecycle (pending, success, error) with TanStack Form, especially in combination with Next.js? Is there an established approach or a best-practice example to:
1. Obtain a reliable pending status during form submission?
2. React to the success or failure of the submission and display toasts (e.g., with Sonner) based on it, ideally without having to dive too deep into the API references?
I would be very grateful for your approaches, code snippets, or food for thought on how you've solved this in your projects!
Thanks in advance!
2 Replies
automatic-azure•4mo ago
No hands-on experience with it myself but I did run into this thread earlier which might be a solution for your pending status
GitHub
Next Server Actions example doesn't account for pending status of s...
Describe the bug When submitting a form, only the client-side state is taken into account for isSubmitting, canSubmit, etc. The server pending state isn't considered at all. Your minimal, repro...
automatic-azure•4mo ago
And error handling should be covered by using the NextJS
createServerValidate as per this example: https://tanstack.com/form/latest/docs/framework/react/examples/next-server-actions?path=examples%2Freact%2Fnext-server-actions%2Fsrc%2Fapp%2Faction.tsReact TanStack Form Next Server Actions Example | TanStack Form Docs
An example showing how to implement Next Server Actions in React using TanStack Form.