Bagaimana Mengimplementasikan Debouncing untuk Mengoptimalkan API Request pada Fitur Pencarian di React?

Dalam pengembangan aplikasi berbasis React, seringkali kita menemui fitur pencarian yang melakukan permintaan (hit) API setiap kali pengguna mengetik sesuatu di kolom pencarian. Masalah ini muncul ketika kita menggunakan event onChange untuk menangani input pengguna. Saat pengguna mengetik dengan cepat, ini dapat menyebabkan API menerima terlalu banyak permintaan dalam waktu singkat, yang bisa mengakibatkan masalah performa dan batasan API.

Artikel ini akan membahas cara mengatasi masalah ini dengan menggunakan teknik debouncing menggunakan setTimeout, sehingga permintaan API hanya dilakukan setelah pengguna berhenti mengetik selama periode tertentu.

Masalah Pencarian dengan onChange

Event onChange di React biasanya digunakan untuk melacak setiap perubahan pada input. Namun, setiap kali pengguna mengetik huruf, onChange akan men-trigger fungsi yang terhubung, yang mengirimkan permintaan API. Misalnya:

```
import { useState } from "react";

function SearchComponent() {
  const [query, setQuery] = useState("");

  const handleSearch = (e) => {
    setQuery(e.target.value);
    // Melakukan hit ke API setiap kali input berubah
    fetchDataFromAPI(e.target.value);
  };

  const fetchDataFromAPI = (searchQuery) => {
    // Logika untuk memanggil API
    console.log(`Fetching data for ${searchQuery}`);
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleSearch}
        placeholder="Search..."
      />
    </div>
  );
}

export default SearchComponent;

```

Pada kode di atas, setiap perubahan input langsung memanggil API. Jika pengguna mengetik cepat, ini dapat menyebabkan banyak permintaan dikirim ke API dalam waktu singkat, yang tentunya tidak efisien.

Solusi dengan setTimeout (Debouncing)

Untuk mengatasi masalah ini, kita bisa menggunakan teknik debouncing. Dengan debouncing, kita hanya akan mengirimkan permintaan API setelah pengguna berhenti mengetik dalam jangka waktu tertentu, misalnya 500 milidetik.

Berikut adalah cara mengimplementasikannya menggunakan setTimeout:

```
import { useState, useEffect } from "react";

function SearchComponent() {
  const [query, setQuery] = useState("");
  const [debouncedQuery, setDebouncedQuery] = useState(query);

  // Menggunakan useEffect untuk mengatur timeout debouncing
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedQuery(query);
    }, 500); // Delay 500 ms

    // Cleanup timeout saat komponen re-render atau query berubah
    return () => {
      clearTimeout(handler);
    };
  }, [query]);

  // useEffect untuk melakukan hit ke API hanya ketika debouncedQuery berubah
  useEffect(() => {
    if (debouncedQuery) {
      fetchDataFromAPI(debouncedQuery);
    }
  }, [debouncedQuery]);

  const fetchDataFromAPI = (searchQuery) => {
    // Logika untuk memanggil API
    console.log(`Fetching data for ${searchQuery}`);
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
    </div>
  );
}

export default SearchComponent;

```

Penjelasan Kode

1. State debouncedQuery:

   • Selain state query yang digunakan untuk melacak input pengguna secara real-time, kita juga membuat state debouncedQuery untuk menyimpan nilai input yang sudah "dibungkam" (debounced).

2. useEffect untuk Debouncing:

   • useEffect pertama dipicu setiap kali query berubah. Di sini, kita menggunakan setTimeout dengan delay 500 ms. Jika pengguna berhenti mengetik selama 500 ms, maka debouncedQuery akan diperbarui dengan nilai query.

   • Kita juga membersihkan timeout dengan clearTimeout agar timeout sebelumnya dihapus jika pengguna masih mengetik sebelum 500 ms berakhir.

3. Hit API dengan debouncedQuery:

   • Pada useEffect kedua, ketika nilai debouncedQuery berubah, kita memanggil fungsi fetchDataFromAPI. Hal ini memastikan bahwa permintaan API hanya dikirimkan setelah pengguna selesai mengetik.

Keuntungan Menggunakan Debouncing

• Efisiensi API: Debouncing membatasi jumlah permintaan API yang dilakukan selama sesi pencarian, mencegah pengiriman permintaan yang berlebihan.

• Performa yang Lebih Baik: Aplikasi akan lebih responsif dan tidak terbebani oleh terlalu banyak proses yang terjadi secara bersamaan.

• Pengalaman Pengguna yang Lebih Baik: Pengguna tidak akan melihat hasil pencarian yang terus berubah selama mereka mengetik, yang membuat pencarian lebih mudah digunakan.

Kesimpulan

Dengan menggunakan teknik debouncing dan setTimeout, kita bisa memastikan bahwa permintaan pencarian hanya dikirimkan ketika pengguna berhenti mengetik, meningkatkan efisiensi aplikasi dan mengurangi beban API. Solusi ini sangat sederhana namun sangat efektif untuk meningkatkan performa dan pengalaman pengguna dalam fitur pencarian di aplikasi React.

Anda bisa menyesuaikan waktu delay sesuai kebutuhan aplikasi Anda, tergantung pada seberapa cepat Anda ingin memproses pencarian setelah pengguna berhenti mengetik.