React Hook Form Nedir? Performant ve Esnek Form Yönetimi

React Hook Form Nedir?

React'ta form yönetimi için hafif bir kütüphanedir. Daha az re-render, daha az kod, doğal TypeScript desteği ve harici kütüphanelere ihtiyaç duymadan validation imkanı sağlar.

• Hafif — küçük bundle
• Daha az re-render → daha iyi performans
• Sadeleştirilmiş validation
• Built-in TypeScript desteği

Neden React Hook Form?

Form kütüphanesi seçerken kıymet veren detaylar:

• Az re-render — yalnızca değişen alanlar render edilir
• Kolay validation
• Bağımsız çalışır — başka kütüphane gerekmez
• Built-in TypeScript desteği
• Az kod, daha temiz componentler

Daha İyi Performans

Controlled formlarda her tuş vuruşu tüm form'u re-render eder. React Hook Form, ref tabanlı uncontrolled yaklaşımıyla yalnızca gerçekten değişen alanları yeniden render eder; sonuç, daha hızlı UI ve düşük CPU kullanımı.

Temel Kurulum

useForm hook'u tüm form akışınızın merkezidir; register, handleSubmit ve formState kapsamlı API sunar.

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

type FormData = { email: string; password: string };

export function LoginForm() {
  const { register, handleSubmit } = useForm<FormData>();
  const onSubmit = (data: FormData) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} />
      <input type="password" {...register("password")} />
      <button type="submit">Giriş yap</button>
    </form>
  );
}

Temel Form Örneği

register fonksiyonu input'a ad ve ref bağlar; handleSubmit form gönderildiğinde data'yı toplayıp callback'e geçirir.

Validation

Validation kuralları doğrudan register'e parametre olarak verilir: required, minLength, pattern gibi yerleşik kurallar veya custom validate fonksiyonu. Hata mesajlarına formState.errors üzerinden erişilir.

<input
  {...register("email", {
    required: "Email gerekli",
    pattern: {
      value: /^\S+@\S+$/i,
      message: "Geçersiz email",
    },
  })}
/>
{errors.email && <span>{errors.email.message}</span>}

Form State

formState; errors, isDirty, isSubmitting, touchedFields, isValid gibi kullanışlı durum bilgilerini içerir. UI'ı buna göre koşullandırabilirsiniz.

• errors — alan bazında hata mesajları
• isDirty — form değişti mi
• isSubmitting — submit sürüyor mu
• touchedFields — dokunulmuş alanlar
• isValid — tüm validation'lar geçti mi

Controlled Components

Material UI, Chakra UI veya kendi custom input'larınız gibi ref kabul etmeyen bileşenleri kullanmak için Controller bileşeni vardır.

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

<Controller
  name="country"
  control={control}
  rules={{ required: true }}
  render={({ field }) => <Select {...field} options={options} />}
/>

TypeScript Desteği

useForm jenerik tipini formunuzun şekline ayarlayarak tüm register/setValue/watch çağrılarını tip-güvenli yaparsınız. Otomatik tamamlama hatasız form yapısı kurmanıza yardım eder.

type Form = { email: string; age: number };
const { register, watch } = useForm<Form>();
watch("email"); // string
watch("age");   // number

Watch & Reset

watch alanların güncel değerini izlemek için, reset formu ilk değerlere veya yeni bir set'e döndürmek için kullanılır. Bağlı UI senaryolarında çok kullanışlıdır.

const email = watch("email");

reset(); // baştaki değerlere
reset({ email: "ada@dev.com" });

Temel Kavramlar

API'de en sık kullandığınız parçalar:

• useForm — formun ana hook'u
• register — input'u forma bağlar
• handleSubmit — submit pipeline'ı
• validation — required/min/max/pattern/validate
• Controller — kontrollü bileşenler için sarmalayıcı
• watch / reset — gözleme ve sıfırlama

Kullanım Alanları

React Hook Form'un yıldızlandığı senaryolar:

• Login & register formları
• Çok adımlı formlar (multi-step)
• E-ticaret checkout süreçleri
• Filtre ve arama formları
• Admin paneli CRUD ekranları

Özet

React Hook Form; hızlı ve hafif form yönetimi sunar, re-render sayısını azaltır ve gelişmiş validation imkânı sağlar. Modern React projelerinde form denildiğinde ilk akla gelen kütüphanedir; özellikle Zod ile birleşince tip-güvenli form akışları çok güçlüdür.