Forms are the most underestimated part of frontend development. Every developer thinks they can build a form. Few have built one with conditional fields, multi-step navigation, async server validation, file uploads with preview, and accessible error messaging. That is a real-world form, not a tutorial exercise.
We built a multi-step business registration form -- twelve fields, three steps, conditional logic, server-side validation, file uploads -- using seven React form libraries. We measured bundle size, re-renders, implementation time, TypeScript quality, and accessibility.
React Hook Form remains our default recommendation. 8.6kb gzipped, 2.3 re-renders per interaction (best of any library), excellent TypeScript support, and three hours to implement the complete form. The uncontrolled refs approach means fundamentally fewer re-renders than controlled alternatives. The Zod resolver pattern keeps validation logic clean and separate from form logic.
TanStack Form impressed us as the serious new contender. 12.1kb gzipped, fully type-safe from the ground up with field-level subscriptions that prevent unnecessary re-renders. Four hours to implement. Where it shines: complex async validation. Server-side validation depending on multiple fields is significantly cleaner than in React Hook Form.
Formik is showing its age. 13.2kb gzipped and 8.7 re-renders per interaction -- worst of any library. The controlled component approach means every keystroke re-renders the entire form unless you manually optimize with FastField. TypeScript support feels bolted on rather than native.
Plain React with no library took seven hours and 340 lines of custom form management code. Works, but fragile and expensive to maintain. Not recommended for any form with more than five fields.
Conform deserves mention for progressive enhancement. 5.2kb gzipped and works without JavaScript, making it ideal for forms that must submit even if the client bundle fails. We use it for authentication forms and critical data entry.
Our recommendation matrix: React Hook Form with Zod resolvers for most projects. TanStack Form for heavy async validation. Conform for critical progressive enhancement forms. No library for three fields or fewer.
One universal lesson: always define your validation schema outside the component. Use Zod or Valibot in a shared package between frontend and backend validation. Same schema, two contexts, zero drift between what the client accepts and what the server expects.
About the Author
Fordel Studios
AI-native app development for startups and growing teams. 14+ years of experience shipping production software.
Most teams treat accessibility as a compliance checklist. Run axe, fix the violations, ship it. That approach produces technically compliant software that is still unusable for people with disabilities.
Every team says they care about performance. Few enforce it. We share the performance budget system we use across all projects, including the CI gates that block deployments when budgets are exceeded.
We rebuilt the same component library twice, once with Tailwind and once with styled-components, to settle the styling debate with data instead of opinions.
We love talking shop. If this article resonated, let's connect.
Start a ConversationTell us about your project. We'll give you honest feedback on scope, timeline, and whether we're the right fit.
Start a Conversation