React
Form State Without the Pain: React Hook Form + Yup
By Vivek Jalondhara · 1 min read
Published Sep 2025 · Updated
Uncontrolled inputs, schema validation, and typed errors — forms stop being the worst part of the app.
Forms are where many React apps go to suffer. React Hook Form's uncontrolled approach minimizes re-renders, and pairing it with a Yup schema means validation lives in one declarative place instead of scattered across handlers.
I use native input types and autocomplete alongside schema validation, so keyboard behavior and error messages both work for the person filling out the form. Inline, per-field errors beat a single form-level alert every time.
The payoff is composability: the same schema validates the client and can inform the server contract, eliminating the drift that causes 'it worked locally' bugs.
Keep native input semantics with validation
A form builder needs useful validation messages, but browser behavior still matters. An email input can expose autocomplete and an accessible error relationship while a schema validates the value.
Illustrative example · TSX · Simplified for explanation
<label htmlFor="email">Email</label>
<input id="email" type="email" autoComplete="email"
aria-invalid={Boolean(errors.email)}
aria-describedby={errors.email ? "email-error" : undefined}
{...register("email")} />
{errors.email && <p id="email-error">{errors.email.message}</p>}- Native input semantics
- Schema validation
- Associated error
- Server validation
Conceptual flow for the example above.
Tradeoff to keep in mind
Client validation improves feedback, but the server must validate independently. Disabling native error popups should not remove useful input types or autocomplete.