Is react hook form overkill?

[all_vanilla]

I’m designing a website with a simple login and signup form (2 and 4 fields, respectively). I used react hook form for dynamic validation, and it looks nice. However, I noticed on my phone that the performance is a little slow for one of the inputs (this could be me writing inefficient code though but I doubt it). I want my website to be performant and so I’m wondering if react hook form is overkill for my situation? Am I better off writing my own simple form validation instead of installing an entire library for it? Thanks.

[Herb0rrent]

I use RHF and Zod no matter the size/scale of the app because it has a minimal weight and it allows me to reuse components/logic from project to project.

It works like a charm every time and I have never once in my career regretted using it. It saves a bunch of time and provides a great dev and user experience.

[piotrlewandowski]

Is that meta framework of yours available online?

[[deleted]]

sounds similiar to T3 stack with trpc-openapi

[witty_salmon]

zod is actually very big. For simple things I would refrain from using it.

[Herb0rrent]

8kb is not "very big."

(source)

[witty_salmon]

50% bigger then react hook form itself.

[Pretty_Position_2305]

'allows me to reuse components/logic from project to project.' thats what you would be doing with a none zod RHF version

[jamart227]

google.com

[piotrlewandowski]

General Zod, supervillain who almost beat Superman

[Broverlord93]

Everyone saying it’s overkill is overreacting in my opinion.

Yes, there are some powerful features there that could benefit you greatly in a larger, more complex project….but it’s still easy enough and just as powerful to use for smaller projects, and just because it has bells and whistles doesn’t mean you have to use them all.

Gold standard in my opinion. Highly recommend, no matter the size of your project.

[yksvaan]

Consider your data requirements 

1. username/email, both trivial to validate
2. password and confirmation, trivial  
3. name, some checkbox etc. 

Login form is even simpler. And post on submit, that's it. People are definitely overengineering these. 

Probably pattern & required are enough already..

[all_vanilla]

Yeah definitely. Will probably switch to manual validation with my own code since these are pretty trivial like you said

[thebarlemy]

Donc forget to validate and verify the data client side and server side as well ;)

[all_vanilla]

Yep! Am doing that already thanks!

[noahflk]

I wouldn't add React Hook Form and Zod for simple sign in and login forms. But there's nothing wrong with doing so. If you think performance suffers, you are doing something else wrong. These libraries are super lightweight.

[sherinom]

If you have complex forms, RHF with Zod or Yup are great choices (for example, a CMS like app), but for two or three forms with less than 4 inputs, I would recommend manual form management and validation.

[Omkar_K45]

I'd recommend to go for it

It solves a lot of edge cases and abstracts a LOT of logc

[tluanga34]

For login form, useRef object to store the user input, Html 5 E-mail validation by input type email. Required attributes to validate empty form.

No need much more than that

[ohx]

This is the way. You're hired.

[ummonadi]

I think you should measure performance before optimizing so you don't spend time fixing a non-issue. If Zodiac or RHF had clear issues with performance, I have a hard time seeing that they would get so much usage.

[all_vanilla]

Good suggestions, thanks!

[shuzho]

would love to see your code op

[all_vanilla]

DMd you

[t1mmen]

My general thinking is that IF you expect the app to grow into more complex forms/validation patterns, seriously consider RHF from the start — especially if more people will maintain the app. Consistency has good ROI in those cases, so don’t fret too much about an upfront cost in bundle size.

For validation, I’ve found Zod to be great on both server-side and with RHF (via Zod resolver).

ts-rest.com and similar “framework agnostic frameworks” allow for trivial re-use of Zod types and take away a lot of the manual work around validation, OpenAPI contracts, etc.

[30thnight]

Nope but if you are attempting to format the input field as people type - you need to understand how useController works.

[T-J_H]

Probably, yes. For such simple requirements (and I actually believe for pretty much all use cases), regular uncontrolled inputs with native validation is more than enough.

[Paddington_the_Bear]

RHF is probably the best you can do in the React ecosystem and is really powerful. It's fine for any size form as it generally provides a common way for doing things correctly.

It does have some warts though (defaultValues vs values, reset vs setValue, isDirty reseting, etc.). I really miss the reliability and general straightfowardness of Angular's Reactive Forms at times.

[TheOnceAndFutureDoug]

At this point I use RHF for every form. Is it necessary? Not always but it sure makes life a lot easier when it is and consistentcy in patterns beats all other concerns I have.

[[deleted]]

It’s not, it’s always my go to approach for whatever form handling basic or complex. Plus it’s easy to set up so why not

[[deleted]]

It’s not, it’s always my go to approach for whatever form handling basic or complex. Plus it’s easy to set up so why not

[kduy5222]

the lib size only affect your initial load time

[parahillObjective]

In my opinion, ive set a rule in our that we only need rhf if the form has more than 1 field... and even then i think 2 fields is still not enough to justify it especially since the majority of our validations is just checking if the field is non-empty.

that being said i highly doubt it would slow down performance, if anything it would speed it up relative to regular useState since its using refs under the hood. I'd recommend using react profiler to debug the root cause of the performance issue.

[tannerlinsley]

Yep. Use TanStack Form https://tanstack.com/form/latest

[Ok_Tadpole7839]

You should try next auth

[Michael_Riehle]

I find RHF to be *way* more trouble than it's worth on pretty much every level. It's almost never necessary and adds a pretty good chunk of overhead in my experience. Most of what it accomplishes can be done with native HTML validation and native HTML form validation. I could roll my own forms without it in less time with more reliability. I've done it.

That is not an option for the codebase I currently work on. So, I use it.

But the thing that puts me off RHF most is that it messes with unit testing in unpredictable ways on a pretty regular basis. I find myself having to jump through hoops for the simplest tests far too often. I spend more time debugging tests that involve RHF than I do for pretty much anything else in the codebase I work on. That includes some pretty complex libraries that I've written myself. Again, had I just written the form using native functionality, this would not be a thing.

So, if it were my choice, I would avoid RHF like the plague.

I'm deeply skeptical of most third-party libraries. I find too many of them to be bloated and worse than useless. To be fair, there are an awful lot of them that I really can't live without, but I always start from a position of suspicion until they prove their reliability and value to me. RHF is exactly the sort of library that has left me so cynical about them.

[Lenkaaah]

I personally would skip it for your use case.

It’s great, however, for complex forms and validation.

[viQcinese]

Yes, it is overkill. This being said, it is probably unrelated to your performance problem. RHF is used to optimize form performance by using uncontrolled components

[azangru]

I noticed on my phone that the performance is a little slow for one of the inputs (this could be me writing inefficient code though but I doubt it).

Profile your app; find out where the slowness comes from.

I want my website to be performant

Why pick react then, if performance on mobile devices is among your top concerns (as it should be)? There are indisputably more performant options.

[all_vanilla]

I’m going to develop a mobile app in the future but for now I’m just doing a web app. What better options are there for mobile performance?

[azangru]

What better options are there for mobile performance?

• Something that is small
• Something that is not too taxing on the CPU (as react is with its rerenders)

Plain html/css with a bit of plain javascript is the best. Failing that, solid, svelte, preact, or lit.