Retain form inputs using useActionState

[hybrid egret]

Hello all,
I'm currently building out some rather large forms for a project I'm working on.
Using zod to validate the input server-side, I want to be able to return the error(s) to the client to display in the form. Currently, this is done by returning the errors from the server action in an object with the following structure {fieldErrors?: ZodError, ...}. So far so good.

Whenever the user submits a form, it resets. As I understand this is the intended behaviour when using <form action={someAction}>. I have two possible options to overcome this issue:

1. Use onSubmit instead of action, i.e. <form onSubmit={someAction}>
   or
2. Return the request state from within someAction. I.e. take the form data, parse it into an object and then return this in the error state object. Then using defaultValue={state.data?.xyz} I can set the default value for the (uncontrolled) input elements.

Which of the two approaches is more idiomatic/recommended in Next? Especially the second approach seems to be quite clunky and induces some networking overhead (although probably minimal). Additionally I'd be unsure how to handle returning the data from file-inputs.

I'd appreciate some guidance/opinion from a more seasoned Next developer.

[dapper kraken]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[dull moat]

Watch this video, Lee Rob explains it so clearly and I think it covers exactly what you need:

https://youtu.be/KhO4VjaYSXU?si=vCWpZoresKluY8Ft

Handles error states with the return value from the Server Action via useActionState, and later on he adds the ability to also return the previous input values and populates the form again by using the defaultValue prop on each individual input after the form resetted.

[hybrid egret]

Funny you send this, I actually came here right after watching it in order to differentiate between both variants :D

I understand how the setup works that was shown in the video. But that requires me sending the entire form-data back to the client. If I were to use onSubmit instead, I could completely remove the requirement for sending the data back, since the form doesn't get reset automatically after sending the data.

Both versions work and it's more a question of 'design' / recommendation.

[dull moat]

Then in that case I’d also like to hear the recommendations/ best approach from a more seasoned Next dev 🤣

[tight cape]

I had the same issue
For me I decided to use useTransition and added e.preventDefault() on onSubmit

Here is my example: https://github.com/larissathasdefar/nextjs-library/blob/main/app/admin/book-types/create/page.tsx

PS: I didn't watch the video yet, gonna watch it later to check if I can do differently

[dull moat]

Yes I've also done what @tight cape shows.
Basically an action is an async function that runs inside a transition, plus it prevents the default behavior of forms automatically, handles *formData *directly, and more.