Skip to content
Browse files

RFC: Use React Hook Form

  • Loading branch information
Betree committed Nov 14, 2019
1 parent 11abffa commit af3c96e3fc762b3d0f1ceea202847e91fc8acb93
Showing with 54 additions and 0 deletions.
  1. +54 −0 rfcs/
@@ -0,0 +1,54 @@
# Affected projects


# Motivation

Building forms with React is often:

- Verbose & painful, because for each new form we need to re-implement a new logic to:
- Save/load values
- Do the validation, generate errors
- Define form states (loading, valid, touched, submitting, submitted, errored...etc)
- Not performant, because when using controlled fields or local state we often end up updating
the whole form each time a key is pressed.

Because React doesn't provide a clear pattern to do everything mentioned above, a lot of our forms are lacking proper validations and there are a lot of differences in code style between them. Just compare the following forms:


This [last example]( is in my opinion a good representation of why we need to have a "framework" to constrain the way we build them, so that the form complexity doesn't translate to a code that is difficult to read and maintain.

To outline the fact that it's a systemic problem (and not a developer developer problem) I'd like to add that some of the forms I have implemented share the exact same issues, see for example.

# Solution & Alternatives

In the past I've used [Formik]( that I was pretty happy with. It's flexible enough to fit the most complex requirements and provide a clear API that make forms more structured.

I've since discovered [React Hook Form](, a young library that got huge traction over the last few months.

From what I've seen it has all the features we would need from Formik today, with the following benefits:

- Easier to learn: the API is small and simple.
- Validations: supports HTML5 validations natively, while it's still possible to add custom validation strategies.
- Performance: because the library's default behavior is to use not-controlled components, there's no unnecessary renders
- Bundle size: 5.5kb GZipped VS 14.7kB for Formik
- Documentation: The docs are in my experience **way** clearer for React Hook Form

Bonus: React Hook Form has [a very nice GUI tool]( to quickly build forms.

👉️ [The official website]( provides an in-depth comparison of popular libraries that I strongly recommend to check.

_Note: Both Formik and React Hook Form are on Open Collective._

# Proof of concept

See as an example of moving an existing form to React Hook Form.

# Adoption / Transition strategy

- The use of **React Hook Form** should be enforced for all new forms.
- We should update our developer documentation accordingly, with links to the docs and utils.
- Old forms may be migrated when they're complex/hard to maintain, but this is not a requirement.

0 comments on commit af3c96e

Please sign in to comment.
You can’t perform that action at this time.