React developers default to React Hook Form plus Zod plus React Query for forms. That stack handles login screens and CRUD modals cleanly. It breaks down when forms accumulate conditional visibility, derived calculations, and page-skip logic. At that point, username and password sit typed as optional() in the Zod schema even when conditionally required, superRefine carries cross-field rules that the schema structure cannot express, and step navigation starts leaking business logic into the component tree. The form is no longer UI. It is a decision process stored in the wrong place.
This Smashing Magazine article, sponsored by SurveyJS, builds the same 4-step form twice: once with the RHF plus Zod stack, once with SurveyJS, which represents a form as a JSON schema rather than a component tree. The form is deliberately non-trivial: derived fields for subtotal, tax, and total cascading off unit price and quantity, conditional username and password fields gated on a yes or no account question, satisfaction-driven follow-up prompts, and a review step that only renders when total is 100 or above. Same requirements, same API call, two architectures.
The value of reading the full article is not the conclusion. It is the side-by-side mapping of exactly what code moves, what disappears, and what the tradeoffs cost in each model. The RHF implementation is shown in full before SurveyJS enters the picture, which means you can audit the complexity accumulation yourself before the alternative is presented. If you have ever watched a form component grow past 300 lines and wondered whether the abstraction was wrong or your implementation was wrong, this is the article that answers that question with working code.
[READ ORIGINAL →]