What is current best practice for implementing a Form?
Answered
Brian GF posted this in #help-forum
Brian GFOP
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.5 Replies
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
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
Brian GFOP
Thanks, just the advice I was looking for!
Brian GFOP
I found a good video on how to implement this https://www.youtube.com/watch?v=dDpZfOQBMaU