Formularele sunt punctul în care aplicația ta întâlnește utilizatorul: logins, înregistrări, comenzi, cereri de ofertă. Un formular lent sau o validare confuză pierde utilizatori; unul bine făcut, îi păstrează. Pattern-ul modern în React combină două instrumente excelente: react-hook-form și Zod.
React-hook-form: performanță fără re-randări
react-hook-form gestionează starea formularului în afara render-ului React: nu forțează re-randarea întregului ecran la fiecare tastare. Registrezi câmpurile cu register, iar la submit primești datele curate. Formulare cu zeci de câmpuri rămân rapide și simple – exact ce vrei într-o aplicație de business.
Zod: validare care e și tip
Zod definește schema datelor și generează tipul TypeScript din ea. Creezi schema o singură dată:
const contactSchema = z.object({
email: z.string().email('Email invalid'),
nume: z.string().min(2, 'Numele e prea scurt'),
})Aceeași schemă validează: formularul din browser, răspunsul primit pe server și datele din API. Zero discrepanțe între „ce a zis clientul” și „ce așteaptă serverul”. E cel mai bun scut împotriva erorilor de tip „funcționa local, dar nu pe producție”.
Integrarea celor două
zodResolver(contactSchema) conectează Zod la react-hook-form: validare live la blur, mesaje de eroare localizate, submit blocat când datele nu sunt valide. Exemplu de un rezolver, zero manual:
useForm({ resolver: zodResolver(contactSchema) })Stări de loading și UX matur
Folosește isSubmitting ca să dezactivezi butonul și să arăți un spinner real, nu zombie-uri care trimit de două ori. Pentru pași multipli (onboarding, checkout), împarți formularul în etape cu schemă parțială per pas. Mesajele de eroare trebuie să fie omenești: sub câmp, în limbajul utilizatorului, nu „Field is required”.
Validarea pe server e obligatorie
Validarea din browser e experiență; validarea pe server e securitate. Revalidează mereu datele primite pe server cu aceeași schemă Zod. Clientul poate fi ocolit cu un singur curl; serverul nu.
Formulare care lucrează pentru tine
Acest pattern e standard în aplicațiile la care lucrez: aplicații web și site-uri cu formulare solide, de la abonare la checkout, cu validare completă și fără surprize pentru utilizatori.
Întrebări frecvente
De ce react-hook-form + Zod?
react-hook-form gestionează eficient starea și performanța formularelor, iar Zod validează datele cu scheme tipate. Împreună: validare în timp real, mesaje de eroare consistente și tipuri TypeScript generate automat din schemă.
E mai bun decât validarea manuală?
Da: o singură sursă de adevăr (schema Zod) folosită atât în client, cât și pe server, elimină discrepanțele dintre „frontend spune X" și „backend verifică Y". Mai puțin cod, mai puține erori.
Cât de complex e de învățat?
Pentru formulare simple, 30 de minute. Pentru scenarii avansate (formulare multi-pas, câmpuri dinamice, validare dependentă), există documentație excelentă și exemple gata de folosit.