React geliştiricilerinin çoğu, formları her zaman bileşen olarak düşünür. Bu zihinsel model, React Hook Form (RHF) ile yerel durum yönetimi, Zod ile doğrulama ve React Query ile sunucu işlemlerini birleştiren bir yığını beraberinde getirir. Giriş ekranları, ayarlar sayfaları veya CRUD modal'ları gibi basit formlar için bu yaklaşım mükemmel çalışır. Ancak formlar büyüdükçe, önceki cevaplara bağlı görünürlük kuralları, üç alana yayılan türetilmiş değerler veya toplam puana göre atlanan sayfalar gibi karmaşıklıklar ortaya çıkar. İşte bu noktada form artık sadece bir arayüz değil, bir karar sürecine dönüşür. Bu makalede, aynı çok adımlı formu iki farklı yaklaşımla inşa ederek, bu zihinsel modelin nerede kırıldığını ve alternatifin ne olduğunu keşfedeceğiz.
İlk yaklaşım, RHF + Zod yığınıdır. Zod şeması, formun yapısını tanımlar ancak koşullu kuralları ifade etmek için superRefine gibi araçlara ihtiyaç duyar. Örneğin, kullanıcının hesabı varsa kullanıcı adı ve şifre alanlarını zorunlu kılmak veya memnuniyet puanına göre geri bildirim alanlarını göstermek gibi. Bu kurallar, şema yapısının dışında, ayrı bir doğrulama katmanında yaşar. Form bileşeni ise useWatch ile alan değerlerini izler, useState ile adım yönetimini sağlar ve tüm bu mantığı bir araya getirir. Bu yöntem, esneklik sunsa da, form büyüdükçe bakımı zorlaşır ve iş mantığı UI katmanına sızar.
İkinci yaklaşım ise SurveyJS gibi bir kütüphane kullanarak formu tamamen veri olarak ele alır. Form, bir JSON şeması ile tanımlanır; her adım, alanlar, koşullar ve gezinme kuralları bu şemada belirtilir. Örneğin, 'Kullanıcının hesabı var mı?' sorusuna 'Evet' yanıtı verilirse, kullanıcı adı ve şifre alanları otomatik olarak görünür hale gelir. Memnuniyet puanı 4 veya üzeriyse 'Neyi beğendiniz?' sorusu, 2 veya altındaysa 'Neyi geliştirebiliriz?' sorusu gösterilir. Ayrıca, toplam tutar 100'ün üzerindeyse 4. adım (inceleme) görünür. Tüm bu mantık, şema içinde tanımlandığı için UI kodundan tamamen ayrışır. Bu, formun bir kural motoru gibi çalışmasını sağlar.
Teknik Analiz
Peki hangi yaklaşımı ne zaman kullanmalısınız? Eğer formunuz basit, az sayıda alan içeriyor ve koşullu mantık minimum düzeydeyse, RHF + Zod yığını idealdir. Ancak formunuzda çok sayıda koşullu alan, sayfalar arası gezinme, türetilmiş değerler veya kullanıcı girdilerine bağlı olarak değişen dinamik bir yapı varsa, SurveyJS gibi veri odaklı bir yaklaşım daha uygundur. Bu, formun bakımını kolaylaştırır, iş mantığını UI'dan ayırır ve ölçeklenebilirliği artırır. Ayrıca, SurveyJS ile form şemasını sunucudan dinamik olarak yükleyebilir, hatta kullanıcıların form oluşturmasına izin verebilirsiniz.
Pratik bir örnek olarak, 4 adımlı bir sipariş formu düşünelim. 1. adım: Ad ve e-posta. 2. adım: Birim fiyat, miktar, vergi oranı ve türetilen alt toplam, vergi, toplam. 3. adım: Hesap bilgileri (koşullu) ve memnuniyet anketi (koşullu). 4. adım: Sadece toplam 100'den büyükse görünen inceleme sayfası. RHF ile bu koşulları yönetmek için useWatch, useState ve useEffect kullanmanız gerekirken, SurveyJS'de tüm bu mantık JSON şemasında tanımlanır. Örneğin, toplam alanı bir hesaplama ifadesi ile tanımlanır ve 4. adımın görünürlüğü bir visibleIf kuralı ile belirlenir.
Detaylar ve Etkileri
Sonuç olarak, form oluştururken doğru aracı seçmek, projenizin karmaşıklığına ve uzun vadeli bakım ihtiyaçlarına bağlıdır. Basit formlar için bileşen tabanlı yaklaşım yeterlidir, ancak formunuz bir kural motoruna dönüşüyorsa, veri tabanlı bir yaklaşımı düşünmelisiniz. Bu, hem geliştirme sürecini hızlandırır hem de kodunuzu daha temiz ve sürdürülebilir kılar.
Kaynak: smashingmagazine.com
