for more context, I did try doing something like

action={async (formData) => {
  formAction(formData);
  ref.current?.reset();
});

where formAction is coming from "useFormState"
but that throws an error saying that formAction expected 0 paramenters but got one. I believe it still saved everything fine but that error kept coming up on the terminal.

So am wondering if that is not the proper way of doing it or why passing it the formData kept throwing that error?

Can You provide the formAction function code?

I went with adding a success on my intial state and returned "ok" when my server action finished without errors and used "useEffect" to check when the state changes and did the ref.current?.reset() when it returns "ok" seems to work fine

I think this works fine and doesnt do anything funky or hacky. My server action just returns something like this >

so basically now I just return ok on success and use the state on my form client componet to reset the form. That sounds better and more proper. what do you think @Turkish Van

It's funny when i tested with form server actions i had the same problem but the other way around.
The form always resetted on errors and i wanted to keep the user values.
I think i used uncontrolled (stateless) inputs.

I ended up doing the same thing as you but instead of returning nothing i had to return the submitted data (onError) again

yeah, its weird. the first approach just gives a type error but saves fine? which is odd. so thats a no go. and the second method with useEffect works fine. So I think im sticking to it. Just wondering what other people do and whats the proper way of doing so if any.

yea both feels a bit wrong but not too wrong to get into it, at least to me 😄
maybe others know a better approach just leave the therad open

yeah, dont know if theres a more "official" way of doing so. lets see if anyone else has an opinion on it

So, if I understood it properly, You want to reset the form inputs in case the Server Action got executed successfully, but keep the input fields filled (not reset the form) in case something went wrong.

What if You, in case of an Error, made a Server Action throw an error and handled it in a way like this:

<form action={()=>{
    formAction().then(()=>ref.current?.reset()).catch(()=>{console.log('Error')})
}}
ref={ref}>
    {/* Form Content */}
</form>

That won't work server actions swallow errors in prod. Don't throw errors within server actions
https://joulev.dev/blogs/throwing-expected-errors-in-react-server-actions

Yes, You are right. Thanks!

You wouldn't get an actual Error message, but an Error would still occur so if You don't want to handle an Error based on it's content, it could still work for You.

You could also follow the same approach and make Your Sever Action return response, for example, in the following form: {data: {}, error: {}}. Following that it could check if an Error occurred or not:

  formAction().then((res)=>{res.error == null && ref.current?.reset()})

yes that would be the correct approach

It does not have to be the format I used above, You could apply the same thing to Your response format. Just make sure there is something inside of that response that could be used to check if an Error occurred.

I think the OP already knows this. He is already returning zoderrorsand success in his response.
It's more an open question on best practices. At least thats how i understand it

sorry had to step out, yeah I already got a success and error property. Its working properly now weather theres a error or it succeeds. Like @American Crow said, its more of a "is this standard protocol to handling it" than anything else. Thank you for your input tho, its good to know how others would do this @Turkish Van