React Hook Form: Panduan Lengkap untuk Pengembang Modern

Formulir adalah bagian penting dari hampir setiap aplikasi web. Mereka memungkinkan pengguna untuk berinteraksi dengan aplikasi, memasukkan data, dan memicu tindakan. Membangun formulir yang efisien dan mudah dikelola dapat menjadi tantangan tersendiri. Di sinilah React Hook Form hadir untuk menyelamatkan hari.

Dalam panduan lengkap ini, kita akan membahas secara mendalam tentang React Hook Form, mulai dari dasar-dasar hingga teknik lanjutan. Kita akan menjelajahi mengapa library ini menjadi pilihan populer di kalangan pengembang React dan bagaimana cara menggunakannya untuk membangun formulir yang kuat, dapat diakses, dan mudah dipelihara.

Mengapa Memilih React Hook Form?

Sebelum kita menyelami detail implementasi, mari kita pahami mengapa React Hook Form menonjol dibandingkan library formulir React lainnya:

1. Performa Tinggi: React Hook Form dibangun dengan mempertimbangkan performa. Ia menggunakan controlled component se minimal mungkin, mengurangi re-render yang tidak perlu dan menghasilkan pengalaman pengguna yang lebih responsif.
2. Integrasi Hooks yang Mudah: Sebagai library yang berfokus pada hooks, React Hook Form terintegrasi secara alami dengan fungsional komponen React, membuatnya mudah dipelajari dan digunakan.
3. Validasi Schema yang Kuat: Library ini mendukung integrasi dengan library validasi schema populer seperti Yup, Zod, dan Joi, memungkinkan Anda untuk mendefinisikan aturan validasi yang kompleks dengan mudah.
4. Minimal Boilerplate: React Hook Form mengurangi jumlah kode boilerplate yang diperlukan untuk membangun formulir, membuat kode Anda lebih bersih dan mudah dibaca.
5. Aksesibilitas (Accessibility): React Hook Form dirancang untuk mendukung aksesibilitas, membantu Anda membangun formulir yang dapat digunakan oleh semua orang, termasuk pengguna dengan disabilitas.

Dasar-Dasar React Hook Form: Langkah Demi Langkah

Mari kita mulai dengan memahami dasar-dasar penggunaan React Hook Form. Kita akan membangun formulir sederhana dan menjelaskan setiap langkah secara rinci.

1. Instalasi

Langkah pertama adalah menginstal React Hook Form menggunakan npm atau yarn:

npm install react-hook-form

yarn add react-hook-form

2. Impor `useForm` Hook

Impor hook `useForm` dari library `react-hook-form` di komponen Anda:

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

3. Gunakan `useForm` untuk Mengelola State Formulir

Hook `useForm` mengembalikan beberapa fungsi dan properti yang akan kita gunakan untuk mengelola state formulir:

const { register, handleSubmit, formState: { errors } } = useForm();

Mari kita uraikan apa arti masing-masing:

• `register`: Fungsi ini digunakan untuk mendaftarkan input formulir dengan React Hook Form. Ini menghubungkan input ke state formulir dan memungkinkan Anda untuk memvalidasinya.
• `handleSubmit`: Fungsi ini digunakan untuk menangani pengiriman formulir. Ini menerima fungsi callback yang akan dieksekusi dengan data formulir yang valid.
• `formState.errors`: Objek ini berisi error validasi untuk setiap input formulir.

4. Daftarkan Input Formulir dengan `register`

Gunakan fungsi `register` untuk mendaftarkan setiap input formulir. Anda dapat memberikan opsi validasi sebagai argumen ke fungsi `register`:

<input type="text" {...register("firstName", { required: "Nama depan wajib diisi" })} />

Dalam contoh di atas, kita mendaftarkan input dengan nama “firstName” dan menentukan aturan validasi bahwa input ini wajib diisi. Jika input tidak diisi, pesan error “Nama depan wajib diisi” akan ditampilkan.

5. Tampilkan Pesan Error

Gunakan objek `formState.errors` untuk menampilkan pesan error validasi. Anda dapat memeriksa apakah ada error untuk input tertentu dan menampilkan pesan yang sesuai:

{errors.firstName && <span>{errors.firstName.message}</span>}

Dalam contoh di atas, kita memeriksa apakah ada error untuk input “firstName”. Jika ada, kita menampilkan pesan error yang sesuai.

6. Tangani Pengiriman Formulir dengan `handleSubmit`

Gunakan fungsi `handleSubmit` untuk menangani pengiriman formulir. Fungsi ini menerima fungsi callback yang akan dieksekusi dengan data formulir yang valid:

const onSubmit = data => console.log(data);

  <form onSubmit={handleSubmit(onSubmit)}>
    <input type="text" {...register("firstName", { required: "Nama depan wajib diisi" })} />
    {errors.firstName && <span>{errors.firstName.message}</span>}
    <button type="submit">Submit</button>
  </form>
  

Dalam contoh di atas, kita mendefinisikan fungsi `onSubmit` yang akan mencetak data formulir ke konsol. Kita kemudian meneruskan fungsi ini ke fungsi `handleSubmit`. Ketika formulir dikirim, `handleSubmit` akan memvalidasi formulir terlebih dahulu. Jika formulir valid, `onSubmit` akan dieksekusi dengan data formulir.

Contoh Kode Lengkap

Berikut adalah contoh kode lengkap dari formulir sederhana yang menggunakan React Hook Form:

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

  function MyForm() {
    const { register, handleSubmit, formState: { errors } } = useForm();

    const onSubmit = data => console.log(data);

    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>Nama Depan:</label>
        <input type="text" {...register("firstName", { required: "Nama depan wajib diisi" })} />
        {errors.firstName && <span>{errors.firstName.message}</span>}

        <label>Nama Belakang:</label>
        <input type="text" {...register("lastName")} />

        <button type="submit">Submit</button>
      </form>
    );
  }

  export default MyForm;
  

Validasi Schema dengan React Hook Form

Untuk validasi yang lebih kompleks, Anda dapat mengintegrasikan React Hook Form dengan library validasi schema seperti Yup, Zod, atau Joi. Ini memungkinkan Anda untuk mendefinisikan aturan validasi yang kompleks dengan mudah dan menjaga kode Anda tetap bersih dan terstruktur.

Dalam contoh ini, kita akan menggunakan Yup untuk mendefinisikan schema validasi:

1. Instal Yup

npm install yup

yarn add yup

2. Definisikan Schema Validasi

Buat schema validasi menggunakan Yup:

import * as yup from "yup";

  const schema = yup.object().shape({
    firstName: yup.string().required("Nama depan wajib diisi"),
    lastName: yup.string().optional(),
    email: yup.string().email("Email tidak valid").required("Email wajib diisi"),
    age: yup.number().positive("Umur harus positif").integer("Umur harus bilangan bulat").required("Umur wajib diisi"),
  });
  

3. Integrasikan Schema dengan `useForm`

Gunakan opsi `resolver` di `useForm` untuk mengintegrasikan schema validasi:

import { useForm } from 'react-hook-form';
  import { yupResolver } from '@hookform/resolvers/yup';
  import * as yup from "yup";

  const schema = yup.object().shape({
    firstName: yup.string().required("Nama depan wajib diisi"),
    lastName: yup.string().optional(),
    email: yup.string().email("Email tidak valid").required("Email wajib diisi"),
    age: yup.number().positive("Umur harus positif").integer("Umur harus bilangan bulat").required("Umur wajib diisi"),
  });

  function MyForm() {
    const { register, handleSubmit, formState: { errors } } = useForm({
      resolver: yupResolver(schema)
    });

    const onSubmit = data => console.log(data);

    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>Nama Depan:</label>
        <input type="text" {...register("firstName")} />
        {errors.firstName && <span>{errors.firstName.message}</span>}

        <label>Nama Belakang:</label>
        <input type="text" {...register("lastName")} />

        <label>Email:</label>
        <input type="email" {...register("email")} />
        {errors.email && <span>{errors.email.message}</span>}

        <label>Umur:</label>
        <input type="number" {...register("age")} />
        {errors.age && <span>{errors.age.message}</span>}

        <button type="submit">Submit</button>
      </form>
    );
  }

  export default MyForm;
  

Dengan menggunakan `yupResolver`, React Hook Form secara otomatis akan memvalidasi input formulir terhadap schema yang Anda definisikan. Pesan error akan ditampilkan secara otomatis jika validasi gagal.

Teknik Lanjutan dengan React Hook Form

Setelah Anda memahami dasar-dasar React Hook Form, mari kita jelajahi beberapa teknik lanjutan yang dapat membantu Anda membangun formulir yang lebih kompleks dan efisien:

1. Controlled vs. Uncontrolled Components

React Hook Form berfokus pada uncontrolled components untuk meningkatkan performa. Namun, Anda juga dapat menggunakan controlled components jika diperlukan. Perbedaan utamanya adalah:

• Uncontrolled Components: Nilai input dikelola oleh DOM itu sendiri. React Hook Form hanya berinteraksi dengan DOM saat formulir dikirim atau saat Anda secara eksplisit memanggil fungsi `setValue`.
• Controlled Components: Nilai input dikelola oleh state React. Setiap kali nilai input berubah, state React diperbarui, yang memicu re-render.

React Hook Form merekomendasikan penggunaan uncontrolled components untuk performa yang lebih baik. Namun, jika Anda perlu mengontrol nilai input secara langsung (misalnya, untuk memformat input saat pengguna mengetik), Anda dapat menggunakan controlled components.

2. Custom Validation

Anda dapat mendefinisikan aturan validasi kustom untuk input formulir Anda. Ini berguna jika Anda memiliki persyaratan validasi yang tidak dapat dipenuhi oleh aturan validasi bawaan.

<input type="text" {...register("username", {
    required: "Username wajib diisi",
    validate: value => value.length >= 5 || "Username harus minimal 5 karakter"
  })} />
  

Dalam contoh di atas, kita mendefinisikan aturan validasi kustom yang memeriksa apakah panjang username minimal 5 karakter. Jika tidak, pesan error “Username harus minimal 5 karakter” akan ditampilkan.

3. Menggunakan `watch` untuk Memantau Perubahan Input

Fungsi `watch` memungkinkan Anda untuk memantau perubahan nilai input formulir secara real-time. Ini berguna jika Anda perlu melakukan tindakan berdasarkan nilai input tertentu.

const { register, handleSubmit, watch } = useForm();

  const subscription = watch("subscription"); // Menonton perubahan pada input "subscription"

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Langganan:</label>
      <select {...register("subscription")}>
        <option value="basic">Basic</option>
        <option value="premium">Premium</option>
      </select>

      {subscription === "premium" && <p>Anda mendapatkan akses ke fitur premium!</p>}

      <button type="submit">Submit</button>
    </form>
  );
  

Dalam contoh di atas, kita menggunakan fungsi `watch` untuk memantau perubahan pada input “subscription”. Jika nilai “subscription” adalah “premium”, kita menampilkan pesan yang sesuai.

4. Menggunakan `setValue` untuk Mengatur Nilai Input Secara Programatis

Fungsi `setValue` memungkinkan Anda untuk mengatur nilai input formulir secara programatis. Ini berguna jika Anda perlu mengisi formulir dengan data yang diambil dari API atau database.

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

  function MyForm() {
    const { register, handleSubmit, setValue } = useForm();

    useEffect(() => {
      // Simulasi pengambilan data dari API
      const fetchData = async () => {
        const data = {
          firstName: "John",
          lastName: "Doe"
        };

        setValue("firstName", data.firstName);
        setValue("lastName", data.lastName);
      };

      fetchData();
    }, [setValue]);

    const onSubmit = data => console.log(data);

    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>Nama Depan:</label>
        <input type="text" {...register("firstName")} />

        <label>Nama Belakang:</label>
        <input type="text" {...register("lastName")} />

        <button type="submit">Submit</button>
      </form>
    );
  }

  export default MyForm;
  

Dalam contoh di atas, kita menggunakan `useEffect` untuk mensimulasikan pengambilan data dari API. Setelah data diambil, kita menggunakan fungsi `setValue` untuk mengatur nilai input “firstName” dan “lastName”.

5. Menggunakan `reset` untuk Mereset Formulir

Fungsi `reset` memungkinkan Anda untuk mereset formulir ke nilai awalnya. Ini berguna jika Anda ingin memberikan tombol “Reset” kepada pengguna.

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

  function MyForm() {
    const { register, handleSubmit, reset } = useForm();

    const onSubmit = data => console.log(data);

    const handleReset = () => {
      reset();
    };

    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>Nama Depan:</label>
        <input type="text" {...register("firstName")} />

        <label>Nama Belakang:</label>
        <input type="text" {...register("lastName")} />

        <button type="submit">Submit</button>
        <button type="button" onClick={handleReset}>Reset</button>
      </form>
    );
  }

  export default MyForm;
  

Dalam contoh di atas, kita mendefinisikan fungsi `handleReset` yang memanggil fungsi `reset`. Ketika tombol “Reset” diklik, formulir akan direset ke nilai awalnya.

Aksesibilitas (Accessibility) dengan React Hook Form

Aksesibilitas adalah aspek penting dari pengembangan web. React Hook Form membantu Anda membangun formulir yang dapat diakses oleh semua orang, termasuk pengguna dengan disabilitas.

1. Menggunakan Label yang Jelas

Pastikan setiap input formulir memiliki label yang jelas dan deskriptif. Gunakan tag `<label>` dan hubungkan dengan input menggunakan atribut `for`:

<label htmlFor="firstName">Nama Depan:</label>
  <input type="text" id="firstName" {...register("firstName", { required: "Nama depan wajib diisi" })} />
  

2. Menyediakan Pesan Error yang Bermakna

Pastikan pesan error validasi jelas dan informatif. Beri tahu pengguna apa yang salah dan bagaimana cara memperbaikinya:

{errors.firstName && <span role="alert">{errors.firstName.message}</span>}
  

Gunakan atribut `role=”alert”` untuk memberi tahu pembaca layar bahwa pesan error adalah notifikasi penting.

3. Menggunakan Atribut `aria-describedby`

Gunakan atribut `aria-describedby` untuk menghubungkan input dengan deskripsi tambahan, seperti petunjuk atau instruksi:

<label htmlFor="password">Password:</label>
  <input type="password" id="password" {...register("password", { required: "Password wajib diisi" })} aria-describedby="password-hint" />
  <div id="password-hint">Password harus minimal 8 karakter dan mengandung huruf besar, huruf kecil, dan angka.</div>
  

4. Memastikan Kontras Warna yang Cukup

Pastikan kontras warna antara teks dan latar belakang cukup tinggi agar mudah dibaca oleh pengguna dengan gangguan penglihatan.

Tips dan Trik React Hook Form

Berikut adalah beberapa tips dan trik tambahan untuk membantu Anda memaksimalkan penggunaan React Hook Form:

• Gunakan DevTools: React Hook Form memiliki DevTools extension yang dapat membantu Anda men-debug dan memantau state formulir Anda.
• Pisahkan Komponen Formulir: Jika formulir Anda kompleks, pertimbangkan untuk memisahkan komponen formulir menjadi komponen yang lebih kecil dan mudah dikelola.
• Gunakan Custom Hooks: Buat custom hooks untuk mengabstraksi logika formulir yang berulang dan membuat kode Anda lebih modular.
• Uji Formulir Anda: Pastikan Anda menguji formulir Anda secara menyeluruh untuk memastikan validasi berfungsi dengan benar dan formulir dapat diakses.

Kesimpulan

React Hook Form adalah library yang kuat dan fleksibel untuk membangun formulir di React. Dengan performa tinggi, integrasi hooks yang mudah, validasi schema yang kuat, dan minimal boilerplate, React Hook Form menjadi pilihan yang sangat baik untuk pengembang modern.

Dalam panduan ini, kita telah membahas dasar-dasar React Hook Form, validasi schema, teknik lanjutan, dan aksesibilitas. Dengan pengetahuan ini, Anda dapat mulai membangun formulir yang kuat, dapat diakses, dan mudah dipelihara dengan React Hook Form.

Teruslah bereksperimen, berlatih, dan menjelajahi fitur-fitur canggih React Hook Form untuk menjadi ahli dalam pengembangan formulir React!