Membuat form input dan memvalidasinya di ekosistem React dulu terasa sangat melelahkan. State re-renders berlebihan membuat form menjadi lambat. Kini, dengan React Hook Form, pembuatan form registrasi dan login kompleks menjadi sangat cepat, efisien, dan bersih.
Mengapa React Hook Form?
Sebelum adanya React Hook Form, para developer umumnya bergantung pada Controlled Components. Artinya, setiap input (misalnya input email) akan diikat langsung pada useState. Masalahnya muncul ketika Anda memiliki puluhan input di satu halaman. Setiap kali pengguna mengetik satu huruf, seluruh komponen React Anda akan melakukan re-render ulang! Tentu saja hal ini adalah malapetaka bagi performa aplikasi skala besar.
React Hook Form membalik paradigma tersebut dengan menggunakan arsitektur Uncontrolled Components secara cerdas. Ia menggunakan ref internal untuk melacak nilai-nilai form tanpa memicu siklus re-render React sama sekali hingga validasi diperlukan. Hasilnya? Form yang terasa instan, kode yang sangat ringkas, dan dukungan bawaan yang luar biasa untuk TypeScript.
"Menulis form di React tanpa React Hook Form sama seperti membangun rumah menggunakan obeng ketika Anda sebenarnya memiliki bor listrik di kotak perkakas."
React Core Team Advocate
Frontend Masters 2026
Menulis Form Validasi Lanjutan
Mari kita buat komponen form pendaftaran yang canggih. Kita akan memvalidasi agar kolom nama tidak boleh kosong, dan email harus menggunakan format abjad standar (menggunakan pola regex bawaan). Semua ini tanpa mengotori state React kita.
import { useForm } from "react-hook-form";
export default function RegisterForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
console.log("Data siap dikirim ke backend:", data);
};
return (
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
{/* Input Nama dengan Validasi Wajib Isi */}
<div>
<input
{...register("fullName", { required: "Nama tidak boleh kosong!" })}
placeholder="Nama Lengkap" className="border p-2 w-full"
/>
{errors.fullName && <p className="text-red-500">{errors.fullName.message}</p>}
</div>
{/* Input Email dengan Validasi Regex */}
<div>
<input
{...register("email", {
required: "Email wajib diisi!",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "Format email tidak valid!"
}
})}
placeholder="Alamat Email" className="border p-2 w-full"
/>
{errors.email && <p className="text-red-500">{errors.email.message}</p>}
</div>
<button type="submit" className="bg-sky-500 text-white p-2 w-full">Daftar Sekarang</button>
</form>
);
}Library Eksternal: Untuk validasi skema yang sangat rumit (seperti mencocokkan password 1 dan 2), Anda dapat dengan mudah mengintegrasikan React Hook Form dengan library validasi hebat seperti Yup atau Zod menggunakan fitur resolver bawaan.
Komentar
Posting Komentar