Summary
At the start of this chapter, we learned that field values in a form can be controlled by the state. However, this leads to lots of unnecessary re-rendering of the form. We then realised that not controlling field values with the state and using the FormData
interface to retrieve field values instead is more performant and requires less code.
We used React Router’s Form
component, which is a wrapper around the native form
element. It submits data to a client-side route instead of a server. However, it doesn’t cover validation – we tried using native HTML validation for that, which was simple to implement, but providing a great user experience with native HTML validation is tricky.
We introduced ourselves to a popular forms library called React Hook Form to provide a better validation user experience. It contains a useForm
hook that returns useful functions and a state. The library doesn’t cause unnecessary renders, so it is very performant...