Forms with dynamic fields are a common scenario in SaaS products and marketplaces. The client adds passengers, items, or collaborators, and the developer faces challenges with validation, performance, and UX. In a typical SaaS product, a form may contain up to 50 dynamic sections. Without proper implementation, each field addition triggers a chain reaction of re-renders — INP drops to 500 ms, which is critical for Core Web Vitals. We build such forms in React using useFieldArray and Zod, ensuring stable operation regardless of the number of fields.
Why Proper Implementation of Dynamic Fields Matters
Errors during add/remove operations lead to N+1 queries, unnecessary re-renders, and data-saving bugs. Our team, with over a decade of experience, has developed an approach that minimizes these risks. For example, in one marketplace we optimized a listing form with 30 fields — load time dropped from 4 seconds to 0.8 thanks to React.memo trees and lazy validation. In another project with 5,000 active forms, we reduced LCP by 80% — from 3.2 s to 0.6 s.
"Dynamic forms are key to flexible UX, but their implementation requires attention to detail: every extra field can cost milliseconds of INP." — Senior Engineer from a large e-commerce project.
Using useFieldArray is 3 times more efficient than manual array management: less code, fewer re-renders, built-in sorting support. Compare:
| Approach | Re-renders on change | Maintenance complexity | Drag-and-drop |
|---|---|---|---|
| useFieldArray | Only changed fields | Low | Built-in |
| Manual state | All fields | High | Needs separate implementation |
How We Implement Validation and Data Processing
We use a Zod schema for each array element. This provides TypeScript typing and server-side validation. Example schema for passengers:
const passengerSchema = z.object({
firstName: z.string().min(2, 'Minimum 2 characters'),
lastName: z.string().min(2),
birthDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
passport: z.string().regex(/^\d{4}\s\d{6}$/),
});
Client-side validation happens instantly, and server-side duplicates it. This achieves 100% data integrity.
Implementation via React Hook Form useFieldArray
import { useForm, useFieldArray, Controller } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
const passengerSchema = z.object({
firstName: z.string().min(2),
lastName: z.string().min(2),
birthDate: z.string(),
passport: z.string().regex(/^\d{4}\s\d{6}$/),
});
const formSchema = z.object({
passengers: z.array(passengerSchema).min(1).max(9),
});
type FormValues = z.infer<typeof formSchema>;
export function PassengersForm() {
const { control, register, handleSubmit, formState: { errors } } = useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: { passengers: [{}] },
});
const { fields, append, remove, move } = useFieldArray({
control,
name: 'passengers',
});
return (
<form onSubmit={handleSubmit(console.log)}>
<div className="space-y-4">
{fields.map((field, index) => (
<div key={field.id} className="border rounded-xl p-4 relative">
<div className="flex items-center justify-between mb-3">
<h3 className="font-medium">Passenger {index + 1}</h3>
{fields.length > 1 && (
<button
type="button"
onClick={() => remove(index)}
className="text-red-500 text-sm hover:text-red-700"
>
Remove
</button>
)}
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm mb-1">First Name</label>
<input
{...register(`passengers.${index}.firstName`)}
className="input-field"
/>
{errors.passengers?.[index]?.firstName && (
<p className="text-red-500 text-xs mt-1">
{errors.passengers[index].firstName?.message}
</p>
)}
</div>
<div>
<label className="block text-sm mb-1">Last Name</label>
<input {...register(`passengers.${index}.lastName`)} className="input-field" />
</div>
<div>
<label className="block text-sm mb-1">Passport</label>
<input
{...register(`passengers.${index}.passport`)}
placeholder="1234 567890"
className="input-field"
/>
</div>
</div>
</div>
))}
</div>
{fields.length < 9 && (
<button
type="button"
onClick={() => append({})}
className="btn-secondary mt-4 w-full"
>
+ Add Passenger
</button>
)}
<button type="submit" className="btn-primary mt-4 w-full">
Continue
</button>
</form>
);
}
Drag-and-Drop Sorting
For forms where the order of items matters (product list in an order, task priorities):
import { DndContext, closestCenter } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
function SortableFieldItem({ field, index, onRemove }: SortableItemProps) {
const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: field.id });
return (
<div ref={setNodeRef} style={{ transform: CSS.Transform.toString(transform), transition }}>
<div {...attributes} {...listeners} className="cursor-grab p-1">⠿</div>
{/* field inputs */}
</div>
);
}
// In the main component:
function handleDragEnd(event) {
const { active, over } = event;
if (active.id !== over.id) {
const from = fields.findIndex(f => f.id === active.id);
const to = fields.findIndex(f => f.id === over.id);
move(from, to);
}
}
Work Process
| Stage | What we do | Result |
|---|---|---|
| Analytics | Study fill scenarios, maximum field count, validation requirements | Form specification |
| Design | Choose stack (React Hook Form + Zod + @dnd-kit), design data schema, UX prototype | API docs, mockups |
| Implementation | Write code with useFieldArray, validation, sorting | Working form in repository |
| Testing | Unit tests for validation, e2e tests with Cypress, load testing | 100% coverage, Core Web Vitals report |
| Deployment | CI/CD, monitoring setup, handover of credentials | Form in production, team instructions |
Step by Step: How We Add a New Field with Minimal Re-render
- Use
useFieldArraywith unique identifiers (field.id). - Wrap each item in
React.memowith deep prop comparison. - For validation, apply
zodResolverwith lazy checking — the schema is only called for changed fields. - On removal, first animate the element, then call
removeafter 300 ms.
What's Included
- Source code of the form with comments
- API documentation (Swagger/OpenAPI)
- Tests (Jest + React Testing Library)
- Deployment instructions for your DevOps
- 2 weeks of free support after handover
- 6-month warranty on identified bugs
Timeline and Pricing
Timeline: from 2 to 5 business days depending on validation complexity and integration. Pricing is calculated individually — we'll assess your project in 1 day. Contact us for a consultation.
How to Avoid Common Mistakes
- Do not use array index as key — this breaks state during sorting. Use the unique id from useFieldArray.
-
Do not overuse z.union for dynamic types — it slows down TypeScript. For nested schemas, use
z.array(z.object({...})). - If fields exceed 50, use virtualization (e.g., react-window). Otherwise, the browser may lag.
How to debug performance?
Enable React DevTools Profiler, add logs in useEffect to count render time. Use `why-did-you-render` to identify unnecessary re-renders.Our expertise ensures stable form operation. With over 50 successful implementations for marketplaces, banks, and CRM systems, you can trust our delivery. Request development — we'll get back to you within an hour. Get a consultation on implementing dynamic field forms — we'll choose the right stack for your scenario.
Link to official documentation: React Hook Form useFieldArray.