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!
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!
