What a form must track
A form is more than its values. Good form state tracks several things per field so the UI can guide the user without nagging.
- Values hold the current contents of each field.
- Touched marks fields the user has interacted with so errors show at the right time.
- Errors hold validation messages, often shown only after a field is touched or on submit.
- Submitting and dirty flags drive button states and unsaved warnings.
Controlled versus uncontrolled
Inputs come in two flavors and the choice affects performance.
- A controlled input stores its value in state and rerenders on every keystroke, which is precise but can be costly for big forms.
- An uncontrolled input lets the DOM hold the value and you read it on submit, which is fast but harder to validate live.
- Many libraries use uncontrolled inputs with subscriptions to get speed plus validation.
Validation timing
Validate on blur and on submit rather than on every keystroke so users are not scolded mid typing. Show an error once a field is both touched and invalid.
Key idea
Track values, touched, and errors per field, choose controlled or uncontrolled inputs for your performance needs, and validate on blur and submit rather than every keystroke.