Calm down your overreactive forms with uncontrolled components

Forms are one of the most common and important parts of any web app. A poorly optimized form can cause a jarring experience to the user who is trying to fill it because of the lags and slow feedback times. Unfortunately, most React tutorials online suggest using state to store data of the form fields and change them on every keystroke. This is kind of shooting yourself on the foot because as the form grows, the state updates also increase causing unwanted re-renders which end up slowing your UI.

This is a problem I faced in one of my projects where the form was very large and had poor feedback time because it was causing wasted re-renders. I found the solution to this problem was using uncontrolled form fields and using a library like react-hook-form that makes it easy to use uncontrolled form fields without giving up on reactive features.

In this talk, I’ll be showing how to build a similar API to react-hook-form that leverages uncontrolled form fields to considerably improve the performance of a React form. The best part is that this approach also does not give up on reactivity features a form might need on input change while still providing an easy and ergonomic API.