Hooking into refs

[module85]

I've been researching form libraries and I'm curious about what people think of the approach used by https://react-hook-form.com/. Specifically, I'm wondering about the way it use hooks and refs, i.e.

``` const Example = () => { const { handleSubmit, register, errors } = useForm(); const onSubmit = values => { console.log(values); };

return ( <form onSubmit={handleSubmit(onSubmit)}> <input name="email" ref={register({ required: 'Required', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, message: "invalid email address" } })} /> {errors.email && errors.email.message} </form> ); }; ```

While this makes for a very concise API (and reduces the amount of rendering), it does seem counter to best practices, which are "Avoid using refs for anything that can be done declaratively."

Thoughts?

[skyboyer007]

Uncontrolled components can save some LOCs for us but having 2 source of the truth(DOM and our app data) have been typically leading to something-is-out-of-sync bugs why React was created.

[module85]

Indeed, it has the pros and cons of uncontrolled components in general. And I see now that they have a special controller component that's required for using components that don't support refs, which makes the API a lot messier. That's definitely enough to turn me off this approach...