تخطي إلى المحتوى الرئيسي
All notes
2026 · 01 · 5 min

Type-safe forms without the gymnastics

RHF + Zod is the right answer for 90% of forms. The remaining 10% is where most people get into trouble. Here's the split.

I keep reaching for the same form stack: React Hook Form for state, Zod for schema, a thin shared resolver layer between them. After ~50 production forms, the patterns are stable.

Rule one: Zod owns the contract. Not RHF's resolver, not the component prop types — the Zod schema. Everything else is derived. This is the whole reason the stack works: you write the schema once and everything downstream is type-safe by construction.

Rule two: server actions get the same schema. The form's Zod schema validates on the client and again on the server, in a server action or API route. Same schema, same error messages, no drift. This is the part most teams skip and regret.

Where it falls apart: dynamic field arrays where the validation depends on sibling values. RHF's `useFieldArray` plus Zod's `superRefine` works, but it's not pretty. For those forms I reach for a state machine instead and stop pretending it's a normal form.

WRITTEN BY
Ibrahim Aly
SENIOR FS ENGINEER · BERLIN ↔ CAIRO