How would you design a dynamic form builder in React?

🧩 Scenario

You’re tasked to create a Dynamic Form Builder component for an internal tool. It should render input fields based on a JSON schema and support:

• Text, number, checkbox, select, and date inputs
• Conditional visibility (e.g., show field B only if field A has a certain value)
• Validation rules (required, min/max length, patterns)
• Reusable across multiple forms by changing the JSON schema

🧠 Answer (Design Overview)

Architecture Decisions:

1. Schema-Driven Rendering: Accept a JSON schema describing each field type, label, validation, and dependencies.
2. Central State Management: Use React state or a form library like react-hook-form for scalability.
3. Dynamic Components Map: Maintain a mapping from type → Component (e.g., input, select, checkbox).
4. Conditional Visibility: Evaluate visibleWhen expressions against current form data.
5. Validation Layer: Either rely on react-hook-form built-ins or custom validation rules based on schema definitions.

Tradeoffs:

• JSON schema flexibility increases complexity but reduces boilerplate.
• Runtime evaluation for conditional visibility must be performant — use memoization or dependency arrays.

🎮 Live Demo: Dynamic Form Builder

🔍 Real-World Example & Tips

• Integrate Yup or Zod for schema-based validation to mirror backend logic.
• Cache form configurations if schema comes from API (to reduce reload latency).
• Use React context to manage multi-step forms built from dynamic form sections.
• For enterprise tools, add versioning to schema definitions to ensure backward compatibility.

🧭 Diagram (Schema Evaluation)

flowchart TD
  A[Schema JSON] --> B[Render Engine]
  B --> C[Evaluate visibleWhen]
  C --> D[Visible Fields]
  D --> E[React Component Renderer]
  E --> F[Form State Update]
  F --> C

✅ Quick Practice

1. Add a field that only appears when subscribe is checked.
2. Add a regex validation rule for email and show a validation error.
3. Replace the internal schema with a schema fetched from an API.

Summary

• Schema-driven forms allow rapid UI iteration.
• Manage conditional logic declaratively via visibleWhen.
• Integrate schema validation libraries for maintainability.
• Keep form builder generic for use across multiple forms.