Show HN: React Hook Form – Simple Form Validation • Hacker News Board

Re: Show HN: React Hook Form – Simple Form Validation

#41

Post by h0h0h0h0111 » Wed, Oct 09, 2019, 3:23 PM UTC

softwarelimits wrote: post #22

I strongly recommend to automate form generation based on JSON schema what will enable zero coding for maintenance tasks like e.g. synchronization with model changes. As form code is the most important entry point for security flaws in web applications it is also the most expensive and it is not a good idea having to touch production code for every little backend change. This looks like PHP coding 15 years ago. Do no…

In my experience, this is a pie in the sky dream - orchestrating dropdown loading and lazy loading becomes challegning. Dependencies between inputs become impossible (if this field is filled [or set to value x], show this section of the form, if this field is of value x, only allow values of a, b or c in field y).

Not only this, but I think generally when a backend change happens you want to be aware of it (and fail early, probably in the test/integration phase!) - leaving it potentially as late as runtime could be devastating.

For very basic forms generation from a model is fine, but I think it hits its limits pretty quickly. Imo generating a model from a schema is an okay halfway house.

Regardless, this tool seems pretty nice, and could save me a little boiler plate!

Re: Show HN: React Hook Form – Simple Form Validation

#42

Post by chatmasta » Wed, Oct 09, 2019, 3:24 PM UTC

I’ve been using this for the past few weeks and I’m very happy with it. I really appreciate the minimalism. It’s easy to have schema driven forms and uncontrolled inputs with this library because it doesn’t have many constraints.

Also, maybe it’s because of hooks, but it feels like less code than usual is required for forms. I once built a massive “multi page questionnaire with conditional logic” feature, using a superset of json schema and a wrapper around react-json-schema-form (the Mozilla one). That was two years ago and a LOT of code (I used a singleton controller to parse local updates and merge them into a global schema). If I had hooks and this library available then, it would have been significantly less code.

Re: Show HN: React Hook Form – Simple Form Validation

#43

Post by Touche » Wed, Oct 09, 2019, 3:29 PM UTC

Front-end has gone completely off the deep end. I'm looking at the source code and there must be 4 or 5 dozen modules, totally 5.1kb gzipped! And as far as I can tell all it does is copy el.value onto an object.

What ever happened to care in our profession? What happened to putting the users first? If you are adding 5kb of overhead to your website for this, it is criminal malpractice.

Re: Show HN: React Hook Form – Simple Form Validation

#44

Post by nathan815 » Wed, Oct 09, 2019, 3:34 PM UTC

11235813213455 wrote: post #13

I've never seen a benefit in storing a form state in react state, forms already hold a state in the DOM, you can read, update and validate it ( https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Fo... ) for example, after a form submit event, you can do const elements = [...e.target.elements].filter(el => el.name); // all form elements with a name // invoke onSubmit prop with form data: onSubmit( elements.redu…

Having it in state allows you to react to changes in the form fields for validation, i.e. username availability, password strength, email validity, field character length (think twitter), etc.

Of course you can do this imperatively by manually querying the DOM and getting the input values, but I think it's nice to have the form data in the state to work with and have full control over it.

Re: Show HN: React Hook Form – Simple Form Validation

#45

Post by armatav » Wed, Oct 09, 2019, 3:39 PM UTC

Touche wrote: post #43

Front-end has gone completely off the deep end. I'm looking at the source code and there must be 4 or 5 dozen modules, totally 5.1kb gzipped! And as far as I can tell all it does is copy el.value onto an object. What ever happened to care in our profession? What happened to putting the users first? If you are adding 5kb of overhead to your website for this , it is criminal malpractice.

Mate most websites are shoving MBs down your throat, I’ll gladly take 5kb zipped for a better developer experience.

Re: Show HN: React Hook Form – Simple Form Validation

#46

Post by ivanhoe » Wed, Oct 09, 2019, 3:44 PM UTC

Touche wrote: post #43

Front-end has gone completely off the deep end. I'm looking at the source code and there must be 4 or 5 dozen modules, totally 5.1kb gzipped! And as far as I can tell all it does is copy el.value onto an object. What ever happened to care in our profession? What happened to putting the users first? If you are adding 5kb of overhead to your website for this , it is criminal malpractice.

This is like saying that backend's gone crazy because people are loading MBs of frameworks just to print "Hello World" on the screen. Well, yes, but those are just examples, they're meant to be simple to understand, not a realistic use case. React is a tool for building complex web apps and in RL such app would do a lot more things and then it'd start to make a lot more sense using it. If you do something this simple, then by all means don't use it.

Re: Show HN: React Hook Form – Simple Form Validation

#47

Post by Touche » Wed, Oct 09, 2019, 3:52 PM UTC

armatav wrote: post #45

Touche wrote: post #43

Front-end has gone completely off the deep end. I'm looking at the source code and there must be 4 or 5 dozen modules, totally 5.1kb gzipped! And as far as I can tell all it does is copy el.value onto an object. What ever happened to care in our profession? What happened to putting the users first? If you are adding 5kb of overhead to your website for this , it is criminal malpractice.

Mate most websites are shoving MBs down your throat, I’ll gladly take 5kb zipped for a better developer experience.

If doing `obj.firstName = el.value` is too bad of an experience for you that you need to add 5kb to make it better you're going to get to that MBs pretty quickly.

Re: Show HN: React Hook Form – Simple Form Validation

#48

Post by ericmcer » Wed, Oct 09, 2019, 3:55 PM UTC

11235813213455 wrote: post #13

I've never seen a benefit in storing a form state in react state, forms already hold a state in the DOM, you can read, update and validate it ( https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Fo... ) for example, after a form submit event, you can do const elements = [...e.target.elements].filter(el => el.name); // all form elements with a name // invoke onSubmit prop with form data: onSubmit( elements.redu…

The whole point is decoupling Dom state and Application state, React keeps the two in sync via the reconciler, and you as the developer can have a single source of truth. As application complexity grows it gets difficult to make sure your DOM and your javascript are in sync using element objects.

That said Forms are one thing where I don't understand all the libraries built to 'simplify' them. They are not complex, and trying to force the library to fit your use case usually ends up being more burdensome than just writing the extra 20-30 LoC.

Re: Show HN: React Hook Form – Simple Form Validation

#49

Post by Touche » Wed, Oct 09, 2019, 3:55 PM UTC

ivanhoe wrote: post #46

Touche wrote: post #43

Front-end has gone completely off the deep end. I'm looking at the source code and there must be 4 or 5 dozen modules, totally 5.1kb gzipped! And as far as I can tell all it does is copy el.value onto an object. What ever happened to care in our profession? What happened to putting the users first? If you are adding 5kb of overhead to your website for this , it is criminal malpractice.

This is like saying that backend's gone crazy because people are loading MBs of frameworks just to print "Hello World" on the screen. Well, yes, but those are just examples, they're meant to be simple to understand, not a realistic use case. React is a tool for building complex web apps and in RL such app would do a lot more things and then it'd start to make a lot more sense using it. If you do something this simple…

> This is like saying that backend's gone crazy because people are loading MBs of frameworks just to print "Hello World" on the screen.

They are not equivalent at all, you can add as much bloat as you want on your backend as long as you scale it. The cost is put on you. Front-end bloat directly affects the user. We used to justify every library addition, now people just add a library for every trivial task to make it slightly "nicer" as if that matters at all.

Re: Show HN: React Hook Form – Simple Form Validation

#50

Post by erikpukinskis » Wed, Oct 09, 2019, 3:55 PM UTC

I’m going to hijack to request some help understanding whether hooks are a good thing or.... a mediocre thing I just have to accept. Here are my questions:

1) Is it just me or so hooks really push you to commit to either “state comes from props” or “state is held internally” but you REALLY can’t mix the two?

So, if I have say, a searchable select box, I must either A) be stateless, and let some other part of the system store the user’s typing, or B) use a state hook, but NEVER react to state changes coming in from outside.

I.e. I am tempted to use useEffect to notice my props and my state being out of sync so I can sync them back up, allowing either the user or the backend to provide changes. But that also feels bonkers.

Doing the same thing through message passing also seems bonkers, React was created to replace having to pass messages around to every component that needs updates, wasn’t it?

2) Is there any point to useCallback? Is it literally the same thing as returning a function from useMemo?

3) Is it just me or is useRef kind of a horrible hack? Lots of articles tell me to do myRef.current = myState in order to hack around the fact that state changes don’t take effect until the next tick. But now we no longer have a single source of truth, and introduce lots of sync bugs. Also have to type .current everywhere.

4) Should I be using useEffect instead for solving the issue with #3?

I just have this sinking feeling that at least one of useRef, useMemo, useCallback, and useEffect shouldn’t exist, but I am only three months in to React and I can’t really see the forest through the trees.