React İle Dinamik Form Doğrulama Ve Yönetimi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projenize başlamadan önce bilgisayarınızda Node.js'in güncel bir sürümünün (LTS) yüklü olduğundan emin olun. React projelerinde form yönetimi için standart useState kancasının (hook) ötesine geçmek, performans açısından hayati önem taşır.

• Node.js (v20 veya üzeri)
• React 19 (veya güncel sürüm)
• Paket yöneticisi (npm veya pnpm)
• Zod (Doğrulama şemaları için)
• React Hook Form (Performanslı form yönetimi için)

Öncelikle projenizi oluşturun ve gerekli bağımlılıkları yükleyin:

npx create-react-app form-projesi
cd form-projesi
npm install react-hook-form @hookform/resolvers zod

React Hook Form ile Temel Form Yapısı

React'te form yönetirken her tuş vuruşunda tüm bileşeni yeniden render etmek (re-render) performans kaybına yol açar. react-hook-form, kontrolsüz bileşenler (uncontrolled components) yaklaşımını kullanarak bu sorunu çözer.

import { useForm } from "react-hook-form";

export default function BasitForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    
      
      Gönder
    
  );
}

Burada register fonksiyonu, input elementini form yönetimine dahil eder. handleSubmit ise form gönderildiğinde veriyi doğrular ve callback fonksiyonunu çalıştırır.

Zod ile Şema Tabanlı Doğrulama Nasıl Yapılır?

Doğrulama mantığını formun içine gömmek yerine, şema tabanlı bir yaklaşım kullanmak kodun okunabilirliğini artırır. Zod, TypeScript ile tam uyumlu, güçlü bir doğrulama kütüphanesidir.

import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

const formSchema = z.object({
  email: z.string().email("Geçerli bir e-posta adresi giriniz."),
  yas: z.number().min(18, "18 yaşından büyük olmalısınız.")
});

Bu şema, verinin tipini ve kurallarını belirler. zodResolver sayesinde bu şemayı React Hook Form ile entegre edebiliriz.

Adım Adım Dinamik Form Doğrulama Uygulaması

Dinamik formlar, kullanıcının seçimine göre değişen alanlar içerir. Örneğin, "Öğrenci misiniz?" sorusuna "Evet" dendiğinde okul adı alanının açılması gibi. Bu durumu watch fonksiyonu ile yönetiriz.

const { register, watch, formState: { errors } } = useForm({
  resolver: zodResolver(formSchema)
});

const ogrenciMi = watch("ogrenciMi");

// Render içinde:
{ogrenciMi && }

watch fonksiyonu, belirli bir alanın değerini takip eder. Değer değiştiğinde bileşen yeniden render edilir ve dinamik alanlar gösterilir veya gizlenir.

Form Durumu ve Hata Yönetimi

Kullanıcıya hata mesajlarını göstermek, form deneyiminin en önemli parçasıdır. formState nesnesi içerisindeki errors objesi, doğrulama başarısız olduğunda hata mesajlarını barındırır.

{errors.email && 
{errors.email.message}
}

Hata mesajlarını görsel olarak ayrıştırmak, kullanıcının hangi alanda hata yaptığını hızlıca anlamasını sağlar. CSS sınıflarını hata durumuna göre dinamik olarak atamak iyi bir pratiktir.

Form Yönetim Yöntemlerinin Karşılaştırılması

Güvenlik Uyarısı: İstemci tarafındaki (client-side) doğrulama sadece kullanıcı deneyimi içindir. Veri güvenliği için sunucu tarafında (server-side) mutlaka tekrar doğrulama yapın. XSS saldırılarına karşı kullanıcıdan gelen verileri her zaman sanitize edin.

Sıkça Sorulan Sorular

React Hook Form neden useState'den daha iyidir?

React Hook Form, formdaki her değişiklikte tüm bileşeni yeniden render etmez. Sadece ilgili input alanını günceller, bu da büyük formlarda ciddi performans artışı sağlar.

Zod kullanmak zorunlu mu?

Zorunlu değildir ancak karmaşık doğrulama kurallarında (şifre eşleşmesi, özel regex desenleri) kodun yönetilebilirliğini ve okunabilirliğini ciddi oranda artırır.

Asenkron doğrulama (örneğin e-posta kontrolü) nasıl yapılır?

Zod içerisindeki refine metodunu kullanarak veya async resolverlar ile veritabanı sorgularını form doğrulama sürecine dahil edebilirsiniz.

Dinamik form alanlarını nasıl temizlerim?

Dinamik alanlar formdan kaldırıldığında, unregister fonksiyonunu kullanarak o alanın verisini form state'inden temizleyebilirsiniz.

Form verilerini sunucuya nasıl gönderirim?

handleSubmit fonksiyonuna verdiğiniz callback içerisinde fetch veya axios kullanarak veriyi JSON formatında güvenli bir şekilde API uç noktasına gönderebilirsiniz.

İleri Seviye Form Optimizasyonu ve Performans İpuçları

Büyük ölçekli uygulamalarda formların performansı, kullanıcı deneyimini doğrudan etkiler. Formunuzdaki alan sayısı arttıkça, her tuş vuruşunda tüm formun yeniden render edilmesini engellemek için stratejik optimizasyonlar yapmalısınız. React Hook Form, bu konuda zaten optimize edilmiş olsa da, geliştirici olarak dikkat etmeniz gereken bazı noktalar bulunmaktadır.

Render Sayısını Azaltma: useWatch ve Controller Kullanımı

Formun tamamını izlemek yerine, sadece ilgili alanın değerine ihtiyaç duyduğunuz durumlarda useWatch hook'unu kullanmak render performansını ciddi oranda artırır. Ayrıca, büyük formlarda Controller bileşenini kullanarak sadece değişen inputun güncellenmesini sağlayabilirsiniz.

import { useWatch } from "react-hook-form";

function DynamicPriceCalculator({ control }) {
  // Sadece 'quantity' değeri değiştiğinde bu bileşen render edilir
  const quantity = useWatch({
    control,
    name: "quantity",
    defaultValue: 1
  });

  return 
Toplam Tutar: {quantity * 100} TL
;
}

Form Hata Ayıklama ve DevTools Kullanımı

Karmaşık formlarda hataları ayıklamak bazen zorlayıcı olabilir. Formun o anki durumunu, hata nesnelerini ve dokunulan (touched) alanları anlık olarak izlemek için @hookform/devtools paketini kullanmanız önerilir. Bu araç, formun iç yapısını görselleştirmenizi sağlar.

import { DevTool } from "@hookform/devtools";

export default function App() {
  const { control } = useForm();
  return (
    
      
        {/* Form içeriği */}
      
      
    
  );
}

Formlarda Test Stratejileri

Formlar, uygulamanın en kritik kullanıcı etkileşim noktalarıdır. Bu nedenle, form mantığını ve doğrulama kurallarını test etmek, uygulamanızın güvenilirliğini artırır. React Testing Library ve Vitest kullanarak formlarınızı test edebilirsiniz.

Birim Testi ile Doğrulama Mantığını Kontrol Etme

Form testlerinde sadece UI'ı değil, Zod şemasının doğru çalışıp çalışmadığını da test etmelisiniz. Aşağıdaki örnek, bir formun hatalı veriyle gönderilmesini engelleyen temel bir test senaryosudur:

import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import MyForm from "./MyForm";

test("geçersiz e-posta girildiğinde hata mesajı gösterilmeli", async () => {
  render();
  
  const emailInput = screen.getByLabelText(/e-posta/i);
  fireEvent.change(emailInput, { target: { value: "gecersiz-email" } });
  
  const submitButton = screen.getByRole("button", { name: /gönder/i });
  fireEvent.click(submitButton);

  const errorMessage = await screen.findByText(/geçerli bir e-posta girin/i);
  expect(errorMessage).toBeInTheDocument();
});

Test süreçlerinde user-event kütüphanesini kullanmak, kullanıcı etkileşimlerini (yazma, tıklama, odaklanma) daha gerçekçi bir şekilde simüle etmenize yardımcı olur. Form testlerinizde mutlaka "mutlu yol" (happy path) senaryolarının yanı sıra, tüm hata durumlarını kapsayan "kenar durum" (edge case) testlerini de dahil etmeyi unutmayın.

Sonuç

React ile dinamik form yönetimi, doğru kütüphaneler ve yaklaşımlar kullanıldığında oldukça verimli bir süreçtir. React Hook Form ve Zod ikilisi, 2026 yılı standartlarında ölçeklenebilir, performanslı ve bakımı kolay formlar oluşturmanıza olanak tanır. Bir sonraki adım olarak, oluşturduğunuz bu formları bir UI kütüphanesi (shadcn/ui veya MUI gibi) ile stilize ederek profesyonel bir arayüz deneyimine dönüştürebilirsiniz.

Kod güvenliği sorumluluk reddi: Bu makaledeki örnekler eğitim amaçlıdır. Üretim ortamında (production) kullanacağınız formlarda, kullanıcı girdilerini mutlaka sunucu tarafında filtreleyin ve SQL injection ile XSS açıklarına karşı gerekli güvenlik önlemlerini (input sanitization, parameterized queries) uygulayın.