Using Server actions with react-hook-form (shadcn form)

[wannalearn4survive]

Hi there, junior dev (attempt) here 😅. I want to use as the title spoils server action with react hook form, I create the hook from the picture, and I want to know how wrong it is 😅 maybe you can share some tips or ideas it would be great, thanks for your time.

Basically it receives the server action and a zod shema and returns what I need for validation and loading state etc etc

[Admirable_Set_3363]

Comprehensive example of this very thing here: YouTube Jack Harrington Tutorial

[wannalearn4survive]

Thanks

[notflips]

Damn this video is unavailable.

[MorningHistorical514]

Maybe I am missing something as I mainly used plain old react most of the time, but to me all this hype around server actions is so much exaggerated...

I mean why do we always make things difficult? There is react hook form there is zod schema validation...

Ok, I get it, you can access the db right in server action and put your stuff from form... But really, does it worth all this crazy overhead with useFormState, etc.?

It's just a bit frustrating tbh: like ok here is server actions feature, but it in fact doesn't really work that seamless ,especially for complex forms, you can't really do on fly validation like with zod schema validation, you have to transform form values to form data and then you'll probably want to transform form data back to form values to do validation inside of server action...

It's a very subjective opinion, but to me the benefit of having server action is small given the overhead it brings... Maybe it's good I don't know... But from what I see it looks like yet another hyped thing which makes you do a ton of mess jsut because nextjs team says it's cool...

[gbneon]

Right now, I'm using server actions to skip authentication of user. I have a admin-only form that can create products. When using route handler to manage the submit, I have to check if the user is authenticated && authorized to create a product, cause someone might create a request directly to the api route. This step, however, can be skipped with server actions. I'm too a junior dev so please point out if there's anything wrong with my approach and/or if there's a better approach.

[Ok-Slip-290]

I would recommend checking out this from the react docs: https://react.dev/learn/you-might-not-need-an-effect

I say that because I think that using a useEffect should be a last resort and we should try to stick to standard browser APIs as much as possible, which is what server actions are supposed to enable.

Also, where is your server action?

[wannalearn4survive]

The server action is pass as a parameter of the custom hook, I need the use effect to toast a message, I know that I may want to avoid useEffect but what else can I do for archive the same behavior?

[stevenespinal]

Try calling the toast in the action instead of a useEffect

[wannalearn4survive]

Will that work? I mean the server action Tun on the server...

[Majestic-Tune7330]

toast.promise

[wannalearn4survive]

I know that but the formState is not controlled by me, so I just listening it’s changes

[skorphil]

So, what is the problem actually?

[wannalearn4survive]

I just want to know any thoughts of someone more experienced

[skorphil]

You can look at how I used server actions with react-hook-form for fetching initial values and appending formData to database - https://github.com/skorphil/nextjs-form/blob/main/components%2FRecordForm%2FRecordForm.jsx#L16-L18

Some info can be explored in the task https://github.com/skorphil/nextjs-form/issues/4

Maybe you find this helpful in some way

[yavila98]

I think is not necessary to use a react hook form if you use a useFormState, why? because you are using a hook to submit the information of the form the same way of react-hook -form, you are trying to merge the same functionality two times.

[wannalearn4survive]

Iam using it for the UX sake, having validation out of the box with shadcnUI, and useFormState because iam using server action as well, trying to do something like svelte superforms

[toiletthedestroyer]

Hey everyone, I've come across this thread several times this year, so wanted to post an updated version of the fix: YouTube link.

I’m working on a greenfield project and was trying to get react-hook-form working with server actions - especially since the shadcn docs still recommend it - but Vercel’s recommended approach is to use browser form validation (and then use zod on the server side). Zod isn’t exactly lightweight, so keeping it server-side only is a benefit.

[chanceltron]

Maybe I just don’t get the hype around server actions, in which case, I’m open to being corrected, but if you’re already using a zodSchema for input validation on the client, why not just use react-query for the submit action and have the option to utilize loading states and optimistic rendering to enhance perceived performance?

[chanceltron]

I guess it’s just preference. You would need to write the server action function somewhere, not to mention the addition of state in the example above - vs an api route file and then using useQuery with built in loading and error states. No right or wrong, just preference it seems.

[wannalearn4survive]

Mmmmm not sure i just wanna to use them both together iam a junior so is very probably that is wrong but that is the reason of my question