react-hook-form nedir?
- React kursu
- İleri seviye
- Ders 33/56
- 4 dk
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.
Başlangıç kodu
import { useForm } from 'react-hook-form';
// NameForm bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 react-hook-form neyi azaltır?
- Yeniden çizim sayısını Doğru cevap
- CSS boyutunu
- HTML etiket sayısını
- Dosya sayısını
Açıklama: react-hook-form gereksiz çizimleri azaltır.
2 register çağrısı
<input {...____('name')} /><input {...register('name')} />Açıklama: register alanı bağlar.
3 react-hook-form nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useForm |
Form oluşturur |
register |
Alanı bağlar |
handleSubmit |
Gönderimi sarar |
formState |
Hataları tutar |