FormField usage examples mix controlled & uncontrolled input API

[Moshyfawn]

Context

https://twitter.com/moshyfawn/status/1659669594217357312

Description

The React Hook Form API is designed with two input handling techniques in mind: controlled inputs and uncontrolled inputs.

In controlled inputs, the input value received from the change event is stored in an external storage such as React state. This external storage holds the value, which is then passed back to the input, effectively controlling the input value. This approach is facilitated by the useController / Controller API.

On the other hand, uncontrolled inputs have the input itself as the source of truth for the value. In this case, the register method is responsible for registering the input event handler, but no value is passed down to the input. The input component maintains its own internal state for the value.

Mixing these two APIs can result in undesired behavior or difficult-to-debug input issues. Therefore, it is generally discouraged and unsupported by React Hook Form.

Side Note №1

There's also an example usage of this library with useFieldArray where the anti-pattern described above is being used. This one requires a bit more thought and potentially a separate FormFieldArray primitive component. I'm just tired at this time, so I left it untouched for the time being.

Side Note №2

It is generally recommended to use the register method for input components that can be easily utilized as uncontrolled, such as this library's Input component. However, implementing this approach would require a significant rethinking of the FormField API and dynamically determining whether the child input should be controlled or uncontrolled.

I will attempt to create a draft for this in the future. If you're also interested, please remind me if I forget to do so within the next couple of days. 😋

[shadcn]

There's also an example usage of this library with useFieldArray where the anti-pattern described above is being used. This one requires a bit more thought and potentially a separate FormFieldArray primitive component. I'm just tired at this time, so I left it untouched for the time being.

Yes. Ping me when you're available. Thanks so much for your help.

[Moshyfawn]

Yes. Ping me when you're available. Thanks so much for your help.

For sure! I'm glad I could help 🙏