Dynamic Forms in React & Next.js: RHF vs SurveyJS

Building dynamic forms in React and Next.js often feels like a balancing act between UI components and business logic. While React Hook Form (RHF) and Zod handle most form needs seamlessly, complex conditional logic can quickly turn your form into a tangled web of rules. This article compares two approaches to managing dynamic forms: the component-driven RHF + Zod stack and the JSON-based SurveyJS framework.

Why Dynamic Forms Challenge React Developers

Most React developers default to the RHF + Zod pattern for forms. It works well for simple cases like login screens or settings pages. But when visibility rules, derived values, or multi-step navigation enter the picture, the component tree becomes a decision engine rather than a UI layer.

Consider a form with these requirements:

Conditional fields based on previous answers
Derived totals from price/quantity inputs
Account creation logic branching on user choice
Review step visibility based on order total

These requirements expose the limitations of the component-driven approach. Let’s explore both solutions.

Component-Driven Approach (RHF + Zod)

Strengths

Native React integration
Strong type safety with Zod
Granular control over validation

Implementation Challenges

For the multi-step form example, you’d need:

Custom superRefine for cross-field validation
useWatch hooks for derived values
Manual state management for step navigation
Conditional rendering logic scattered across components

Here’s a simplified schema snippet:

const formSchema = z.object({

firstName: z.string().min(1),

email: z.string().email(),

// ... other fields
}).superRefine((data, ctx) => {

if (data.hasAccount === "Yes") {

if (!data.username) {

ctx.addIssue({ code: "custom", path: ["username"] });

}

}
});

JSON-Driven Approach (SurveyJS)

Key Advantages

Form logic lives in JSON schema
Separation of UI and business rules
Built-in visibility conditions
Automatic derived value calculations

Implementation Example

SurveyJS handles the same form with declarative JSON:

const surveyJson = {

elements: [

{

type: "panel",

name: "order",

visibleIf: "{total} >= 100",

elements: [

{ type: "text", name: "reviewComment" }

]

}

]
};

This approach centralizes logic in the schema while keeping components simple:

No need for superRefine or useWatch
Automatic validation rule propagation
Single source of truth for form structure

When to Choose Each Approach

Use RHF + Zod When:

Form logic is simple and UI-centric
You need fine-grained control over validation
Form structure changes infrequently

Use SurveyJS When:

Forms have complex visibility rules
Derived values cascade through fields
Form structure changes frequently
Multiple teams need to collaborate on form design

Conclusion

Dynamic forms in React and Next.js require careful architectural decisions. While RHF + Zod excels for most use cases, SurveyJS provides a powerful alternative when forms become rule engines. Evaluate your requirements: if your form’s logic outgrows component trees, it’s time to consider a JSON-driven approach.

Try both methods on your next project. For complex forms with conditional logic, SurveyJS can save hours of development time while maintaining clean, maintainable code.

Dynamic Forms in React & Next.js: RHF vs SurveyJS

Dynamic Forms in React & Next.js: RHF vs SurveyJS

Why Dynamic Forms Challenge React Developers