react-hook-form nedir?

react-hook-form ile performanslı form yönetimini öğrenirsin.

react-hook-form nedir?

react-hook-form, performanslı form yönetimi için bir kütüphanedir. useForm ile form state'ini yönetir; her tuş basışında yeniden çizim yapmaz.

Diğer form kütüphaneleri her yazımda tüm formu yeniden çizer; react-hook-form ise yalnızca ilgili alanı günceller. Bu, büyük formlarda belirgin performans artışı sağlar.

register ile alanları bağlar, handleSubmit ile gönderimi yönetirsin. Doğrulama için Zod veya Yup entegre edilir.

register ve handleSubmit

register, bir input'u form state'ine bağlar. {...register('name')} ile input'a yayarsın; react-hook-form adını, değerini ve değişimi izler.

handleSubmit, form gönderimini saran bir fonksiyondur. Form geçerliyse callback'i çağırır; değilse hataları gösterir. <form onSubmit={handleSubmit(onSubmit)}> biçiminde kullanılır.

Bu iki fonksiyon, react-hook-form'un temelidir; çoğu form yalnızca bunlarla yazılır.

Uygulama Basit form yaz

Aşağıdaki iskeleti tamamla. NameForm bileşeni yaz. useForm çağır; register ve handleSubmit al. <form onSubmit={handleSubmit(onSubmit)}> içinde <input {...register('name')} /> ve <button type="submit">Gönder</button> koy. onSubmit (data) => console.log(data) olsun. export default ekle.

Örnek çözümü göster

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

function NameForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} />
      <button type="submit">Gönder</button>
    </form>
  );
}

export default NameForm;

Kendini test et

react-hook-form neyi azaltır?
- Yeniden çizim sayısını
- CSS boyutunu
- HTML etiket sayısını
- Dosya sayısını
Cevabı göster

Yeniden çizim sayısını — react-hook-form gereksiz çizimleri azaltır.

<input {...____('name')} />

Cevabı göster

<input {...register('name')} />

react-hook-form nedir: kavramları eşleştir

useForm

Form oluşturur
register

Alanı bağlar
handleSubmit

Gönderimi sarar
formState

Hataları tutar

Sıradaki ders: register ve handleSubmit

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler