"For the vast majority of forms - your login screens, your settings pages, your CRUD modals - this works really well. Each piece does its job, they compose cleanly, and you can move on to the parts of your application that actually differentiate your product."
"At some point, you look at what you've built and realize that the form isn't really UI anymore. It's more of a decision process, and the component tree is just where you happened to store it. This is where I think the mental model for forms in React breaks down."
"The RHF + Zod stack is excellent at what it was designed for. The issue is that we tend to keep using it past the point where its abstractions match the problem because the alternative requires a different way of thinking about forms entirely."
React developers typically use React Hook Form, Zod, and React Query for form management, which works well for standard forms like login screens and CRUD modals. However, forms with complex conditional visibility rules, cascading derived values, and multi-step navigation logic gradually transform into decision engines rather than UI components. The standard form stack becomes inadequate when developers resort to useWatch branches, superRefine cross-field rules, and business logic scattered through step navigation. This indicates the form has outgrown its component-based abstraction. Recognizing when a form transitions from UI to rule engine requires adopting a different mental model and architectural approach beyond traditional form libraries.
Read at Smashing Magazine
Unable to calculate read time
Collection
[
|
...
]