My Problem with Next.js Server Actions

I spent hours trying to get loading states to work with Server Actions. Here's what I learned about how to fix it along with a few other tips and gotchas.

Thanks to Xata and Sentry for sponsoring my time to work on Deals for Devs!

**Newsletter**

**DISCORD**

**QUESTIONS ABOUT MY SETUP**

[elramtv]

"I pushed this code to production without testing..."
now starts the fun part.

[francismori]

To be fair, your pending variable from useFormStatus would have no way to know which form to target if there were 3 different forms in your component

[masonsten]

I think it makes more sense if you think of the form as a context provider. The useFormStatus can't be used above the context of the form, and as others have mentioned what if you had multiple forms on one page? Also its honestly a better way to to code it anyways since your form stays mostly server side and and your submit button can now be reused in any form component and it'll just work. Definitely a bit annoying though if you don't know the rules. Gonna need some eslint rules to help with things like this I think

[nickculpin]

you can put that actions file inside your app directory using the app router, it doesn't need to be in the root. I ended up using a dedicated actions file per view, which created a "model view controller" like structure.

[mathiasriissorensen]

It's exactly what I have been struggling with the past couple of days! Except that I'm trying to upload a new avatar with a preview, which complicated things a bit. But thank you for this video!

[jeromealtariba]

When using actions, react hook forms and Zod as validator, the schema validation at submission is not triggered when the mode is "onSubmit" (default). The submission to the action is done, even if the data are not schema compliant. The validation works when setting the mode to "onBlur", "onChange". Any Idea what is wrong?

[RationalDissonances]

how to let my component know that form submission was successful or got rejected? basically how can I return data from my server actions?

[rafi-hidayat]

almost the same issue, but i choose to use zustand where it has "loading and action key" so each action has its own pending/loading state

[gqvzygq]

I have a form where I have "formsteps" (with values for type, name, placeholder etc) mapped out into inputs with dynamic values. This does not appear to work with the whole server action and FormData thing. If I just have a regular input that isnt mapped out, it works just fine. Has anyone encountered and solved this problem?

[ronaldpaek]

Hey James when did you make this course React and Serverless on your website? I know the Astro one is your newest course. :)

[noeldolan]

Great video! :). For form validation @ 9:04, I think you can use z.object({name:... }).strict() to ensure the submit form match your database table schema.

[metalbroga]

I went through that same issue few weeks ago. its really a weird design decision and as you said they probably have a reason for this. it is what it is, but this is when I always have the impression that Remix do things better.

[codeSTACKr]

very interesting the way this has to be set up 🤔

[StephenRayner]

I like the final solution, I feel it makes sense.

1. Not forcing the form to be a client component.
2. The button owns the pending state

Curious how this will work if you have two forms visible at once. Will need to try that out to see if it puts both or just 1 into the pending state.

[yassinesafraoui]

I don't know why I feel weird about adding the thank you page, it feels like anyone can access that button without having submitted a deal, I actually ran into a pretty similar situation, I know it's not a big deal, it's just feel like in a perfect world something like the deal id should be passed to the thank you route so that it only accepts created deals, but I don't get to think of a good way to do it, maybe query params idk

[ukeshrestha]

You have to use form prop on button and add id of the form as value so that button knows which form it belongs to

[sjpgtzi]

James you are awesome!
@7:35 - Basically any <Component /> that uses hooks must be converted into a client component or else it won't work!
I think what's happening behind the scenes is the server component that contains the form body must be checked every second or something as ping-pong and it keeps feeding this status back to the hook form in the client side! and most likely this must be a child component because if it was all at same level, because the ui button needs to change visually it therefore requires a DOM render and this can't happen as server level!

Hopefully it makes sense :)
I worked on something similar and had to ask a another engineer where he explained this in this way!
Thanks for the video :)

[colinclark]

The problem this approach surfaces, though, is that the useFormState hook now cannot be used in the form component, as it is now not a client component. Handling the validation in your UI will now be more problematic

[petecapecod]

I think we should ALL just dump any errors in the console and let the user figure it out 🤣
Great video, totally a mistake I would make 💯
Refractor the button 🤦🏻‍♂️

[bradgarropy]

Dude, I'm telling you, Remix is Next.js without all these little frustrations!