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...