Next.js Discord

Discord Forum

What is current best practice for implementing a Form?

Answered
Brian GF posted this in #help-forum
Open in Discord
Avatar
What are the pros and cons of using react-hook-form? I notice that https://nextjs.org/learn/dashboard-app uses a server action instead. Is this a better approach with Next.js 14 and the app router?
Answered by Plague
Personally, I think server actions for me completely replace react-hook-form, I no longer need to install two packages (react-hook-form and hookform/resolvers) in order to validate my forms and prevent re-renders, useFormState only re-renders the entire form once and that's after submission, then you can use the built in required and type attributes for client-side validation, and zod for server-side validation. The code is more minimal, the only downside and honestly it's an upside in my opinion, is you have handle the errors yourself, I like this because I do different things depending on the error.
View full answer

5 Replies

Avatar
Personally, I think server actions for me completely replace react-hook-form, I no longer need to install two packages (react-hook-form and hookform/resolvers) in order to validate my forms and prevent re-renders, useFormState only re-renders the entire form once and that's after submission, then you can use the built in required and type attributes for client-side validation, and zod for server-side validation. The code is more minimal, the only downside and honestly it's an upside in my opinion, is you have handle the errors yourself, I like this because I do different things depending on the error.
Answer
Avatar
The only downside overall for me is that Shadcn/ui a library I enjoy using a lot, it's Form components only work with react-hook-form since it's built on top of that, so I'm hoping react-hook-form or shadcn/ui will intergrate server actions into their logic and then we'll get the best of both.
TLDR: If you're using Next.js 14 the best practice is Server Actions with useFormState
Avatar
Thanks, just the advice I was looking for!
Avatar
I found a good video on how to implement this https://www.youtube.com/watch?v=dDpZfOQBMaU