Kusursuz React Formları: Zod & React Hook Form

Formlar, B2B SaaS ürünlerinin itici gücüdür.

Çoğu geliştirici formları yanlış şekilde oluşturur. Kontrollü bileşenler (controlled components) kullanırlar. Bu, her girdiyi bir useState hook'una bağladıkları anlamına gelir.

Bu durum performans sorunlarına yol açar.

Eğer formunuz 20 alana sahipse, tek bir harf yazmak tüm formun yeniden render edilmesini tetikler. 10 harfli bir isim yazmak, 10 kez tam yeniden render edilmeye zorlar. Bu da uygulamanızın düşük donanımlı cihazlarda yavaşlamasına neden olur.

Manuel doğrulama (validation) da bir sorundur. Her alan için "if" ifadeleri yazmak karmaşıktır. TypeScript güvenliğinden yoksundur.

Daha iyi bir yönteme ihtiyacınız var.

Bunu düzeltmek için React Hook Form ve Zod kullanın.

React Hook Form, HTML ref'leri aracılığıyla kontrol edilmeyen (uncontrolled) girdiler kullanır. Veri DOM içinde kalır. Form, yalnızca bir hata oluşması gibi gerekli durumlarda yeniden render edilir.

Zod, doğrulama işlemini yönetir. Verilerinizin tam yapısını tanımlar.

İş akışı şöyledir:

  1. Bir Zod şeması tanımlayın. Bu, tek doğruluk kaynağınız (single source of truth) olarak işlev görür. Hem çalışma zamanı doğrulaması (runtime validation) hem de TypeScript tipleri sağlar.

  2. zodResolver kullanın. Bu, React Hook Form'u Zod şemanıza bağlar.

  3. register fonksiyonunu kullanın. Bu, sürekli yeniden render edilmeyi tetiklemeden girdilerinizi forma bağlar.

Avantajları:

  • Sıfır girdi gecikmesi. Büyük formlar akıcı kalır.
  • Tip güvenliği (Type safety). Verileriniz API beklentilerinizle eşleşir.
  • Daha az kod. Manuel doğrulama mantığı yazmayı bırakırsınız.

React state'i ile savaşmayı bırakın. Profesyonel formlar oluşturmak için ref'leri ve şemaları kullanın.

Kaynak: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j