React Hook Form dan Formik adalah dua pustaka populer untuk menangani form di aplikasi React. Keduanya membantu membuat dan mengelola form yang kompleks dengan validasi, submission, dan kontrol yang lebih mudah, sehingga kode menjadi lebih rapi dan terstruktur. Berikut adalah penjelasan lengkapnya:
### **1. React Hook Form**
React Hook Form adalah pustaka yang sangat ringan dan cepat untuk menangani form di React. Kelebihan utama dari pustaka ini adalah performanya yang baik karena memanfaatkan **ref** sehingga form tidak perlu sering-sering re-render, menjadikannya sangat efisien.
#### **Instalasi**
Untuk menginstal React Hook Form:
```bash
npm install react-hook-form
```
#### **Penggunaan Dasar**
Misalkan kita membuat form sederhana dengan input nama dan email:
```javascript
import React from 'react';
import { useForm } from 'react-hook-form';
function App() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>Name:</label>
<input {...register("name", { required: true })} />
{errors.name && <span>Name is required</span>}
</div>
<div>
<label>Email:</label>
<input {...register("email", { required: true, pattern: /^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/ })} />
{errors.email && <span>Valid email is required</span>}
</div>
<input type="submit" />
</form>
);
}
export default App;
Pada contoh di atas:
- **register** digunakan untuk menghubungkan input dengan React Hook Form.
- **handleSubmit** menangani submit data dengan mengirimkan data form ke fungsi `onSubmit`.
- **errors** akan berisi pesan error jika ada input yang tidak valid.
#### **Validasi dan Error Handling**
React Hook Form memungkinkan validasi input secara langsung melalui aturan yang didefinisikan saat register. Misalnya:
```javascript
<input {...register("username", { required: "Username is required", minLength: { value: 4, message: "Minimum 4 characters" } })} />
Jika aturan tidak terpenuhi, pesan error dari validasi akan muncul di `errors` yang bisa ditampilkan di UI.
### **2. Formik**
Formik adalah pustaka form yang memungkinkan Anda mengelola state, validasi, dan pengiriman form secara efisien di React. Formik populer karena memiliki fitur validasi yang mudah dan dukungan untuk library lain seperti Yup untuk validasi yang lebih kompleks.
#### **Instalasi**
Untuk menginstal Formik:
```bash
npm install formik
```
#### **Penggunaan Dasar**
Misalkan kita membuat form sederhana dengan input nama dan email menggunakan Formik:
```javascript
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
function App() {
return (
<Formik
initialValues={{ name: '', email: '' }}
validate={values => {
const errors = {};
if (!values.name) {
errors.name = 'Name is required';
}
if (!values.email) {
errors.email = 'Email is required';
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
errors.email = 'Invalid email address';
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
console.log(values);
setSubmitting(false);
}}
>
{({ isSubmitting }) => (
<Form>
<div>
<label>Name:</label>
<Field type="text" name="name" />
<ErrorMessage name="name" component="div" />
</div>
<div>
<label>Email:</label>
<Field type="email" name="email" />
<ErrorMessage name="email" component="div" />
</div>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
);
}
export default App;
Pada contoh di atas:
- **Formik** menyediakan `initialValues` untuk nilai awal form.
- **validate** adalah fungsi validasi manual yang mengembalikan objek `errors` jika ada input yang tidak valid.
- **Field** menggantikan input biasa dan otomatis terhubung dengan state Formik.
- **ErrorMessage** untuk menampilkan pesan error sesuai dengan field yang divalidasi.
#### **Menggunakan Yup untuk Validasi**
Formik bekerja sangat baik dengan Yup, pustaka untuk validasi skema, yang memungkinkan aturan validasi lebih sederhana dan lebih rapi:
```javascript
import * as Yup from 'yup';
const validationSchema = Yup.object({
name: Yup.string().required('Name is required'),
email: Yup.string().email('Invalid email').required('Email is required')
});
Kemudian di dalam `Formik`:
```javascript
<Formik
initialValues={{ name: '', email: '' }}
validationSchema={validationSchema}
onSubmit={(values) => console.log(values)}
>
{/* Form components */}
</Formik>
### **Perbedaan Utama React Hook Form vs Formik**
- **Performa**: React Hook Form lebih ringan dan memiliki performa lebih baik karena memanfaatkan ref, sedangkan Formik sering menyebabkan re-render jika form besar.
- **Validasi**: React Hook Form memiliki validasi berbasis register, sementara Formik sangat mendukung validasi berbasis skema dengan pustaka seperti Yup.
- **API**: React Hook Form lebih minimalis, sementara Formik menyediakan lebih banyak fitur dan kontrol.
Dengan memahami React Hook Form dan Formik, Anda dapat membuat form yang lebih rapi, terstruktur, dan mudah untuk dikelola.