Building Dynamic Forms In React And Next.js

This article compares two approaches to building complex multi-step forms in React: the component-driven model (React Hook Form + Zod) and the data-driven model (SurveyJS).

• •React Hook Form + Zod + React Query works well for simple forms but breaks down when forms accumulate visibility rules, derived values, and conditional page navigation
• •The example form has 4 steps with conditional fields: account credentials shown only if user has an account, feedback fields based on satisfaction score (≥4 or ≤2), and a review step only if total ≥ 100
• •With RHF + Zod, cross-field conditional validation must use superRefine since schema-level types cannot express runtime visibility rules
• •Derived values (subtotal, tax, total) must live in the component via useWatch and useMemo since the schema has no concept of computed fields