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

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

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

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!

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.

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.

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

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

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.

James you are awesome! @7:35 - Basically any 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 :)

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?

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

very interesting the way this has to be set up 🤔

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?

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

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

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

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 🤦🏻‍♂️

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

thank you for giving me another reason why I'm not gonna use Server Actions

Easiest way is to use react-form-hook with server action.

I did the same thing lol

its just a little bit of misunderstanding :D

Router 6.4 loader and action saved me from a lot of headache and Nextjs implementation just doesn't feel right. Remix is the way.

You said it’s “exactly” what you did but it’s obviously not haha since the example was a self-contained button component with a loading state while yours was a giant component with the form and loading outside of the form. 😢

this video looks more like a someone advertising a product than a nextjs related video, take your thumb down with all my force, you deserve it more than anybody

Seriously feels like React is taking a step backwards. Things are once again becoming way too overly complex - at least in my opinion.

No no no. Why do we need to jump through so many hurdles. This ruins productivity!!! Just use the pages router, be productive!

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?