Building Dynamic Forms In React And Next.js
In the first implementation the author wires React Hook Form, Zod, and React Query to handle a multi‑step order form that conditionally reveals fields (e.g., username/password only when “Has account” = Yes) and calculates totals on the fly. Zod’s superRefine is used to enforce cross‑field rules such as requiring feedback based on a satisfaction rating, while useWatch and useMemo compute subtotal, tax, and total in real time. The component tree houses every piece of UI logic, and the final payload is sent via a React Query mutation to /api/orders. This showcases how the RHF + Zod stack excels at granular control but forces developers to embed navigation and visibility rules in React code rather than in a declarative schema.
The second approach swaps the component‑centric stack for SurveyJS, which treats the entire form as a JSON definition that encodes fields, validation, and page flow. By externalizing visibility rules, derived calculations, and conditional branching into the schema, the form logic becomes data that can be edited without touching React components. This mirrors a broader movement toward low‑code, schema‑first form builders that promise faster iteration and easier hand‑off between designers and engineers. Compared with the RHF solution, SurveyJS reduces boilerplate and eliminates the need for superRefine hacks, but it also introduces a runtime interpreter and a dependency on a third‑party library that may limit custom UI tweaks.
The comparison signals that teams must weigh maintainability against flexibility. For simple CRUD dialogs, the RHF + Zod combo remains lightweight and fully type‑safe, while complex, rule‑heavy surveys benefit from a declarative schema that isolates business logic from presentation. Risks include potential performance overhead from SurveyJS’s runtime parsing and the learning curve of mastering its JSON schema syntax. Watch for emerging React libraries that blend the two paradigms—offering type‑safe schemas with built‑in page flow—since they could address the current split between component and data models.
Key Takeaways
React Hook Form + Zod delivers fine‑grained control but pushes conditional UI logic into component code, making complex forms harder to maintain.
SurveyJS’s JSON‑schema model centralizes validation and navigation, reducing boilerplate for multi‑step, rule‑driven forms.
Choosing between the two depends on form complexity: simple CRUD forms favor RHF, while surveys with many interdependent fields benefit from a schema‑first tool.
Teams should monitor hybrid solutions that aim to combine type safety with declarative form definitions to avoid the trade‑offs highlighted here.
About the Source
This analysis is based on reporting by Smashing Magazine. Here is a short excerpt for context:
Some forms stay UI, while others quietly become rule engines. Here’s why these two different approaches exist and how to choose between them.Read the original at Smashing Magazine
