Cara Debouncing di React untuk Pemula

Dalam pembuatan sebuah website, sangat penting untuk memperhatikan performa agar memiliki user experience yang baik bagi pengguna. Debouncing merupakan salah satu teknik yang penting untuk melakukan optimisasi performa web. Cara kerjanya adalah dengan menambahkan logic agar web tidak secara terus menerus melakukan hit api ketika ada perubahan input atau mendapat interaksi dari user.

Salah satu use case penggunaan debouncing adalah search bar interaktif dimana user ingin langsung mendapatkan hasil search secara langsung tiap kali mengetikkan nilai pada form, tanpa perlu menekan tombol search. Namun hal ini dapat mengakibatkan perlunya untuk hit API secara terus menerus sehingga dinilai tidak efektif. Maka dari itu, pada post kali ini kita akan membahas bagaimana cara implementasi fitur search dengan optimisasi menggunakan teknik debouncing dengan custom hooks yang efektif.

Mengapa Debouncing Penting?

Untuk optimisasi performa dimana agar web tidak melakukan hit API secara terus menerus yang dapat mengakibatkan server terbebani ataupun web terasa lambat.

Langkah 1: buat basic search bar dengan hasil statis

import { useEffect, useState } from "react";
import "../../dist/output.css";

function App() {
  const [inputValue, setInputValue] = useState("");
  const arrayResult = ["stroberi", "lemon", "apel", "jokowi"];
  const [result, setResult] = useState<string[]>();

  useEffect(() => {
    if (inputValue) {
      setResult(getSearchResult(inputValue));
    } else {
        setResult([])
    }
  }, [inputValue]);

  const getSearchResult = (query: String) => {
    return (
      arrayResult.filter((item) =>
        item.toLowerCase().includes(query.toLowerCase())
      ) ?? []
    );
  };
  return (
    <div className="flex justify-center items-start">
      <div className="w-full max-w-sm min-w-[200px]">
        <input
          className="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 border-2 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-blue-500 hover:border-blue-300 shadow-sm focus:shadow"
          placeholder="Type here..."
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        {result && (
          <div>
            <ul className="mt-2 text-left w-full bg-gray border border-gray-200 rounded-md shadow-sm divide-y divide-gray-100">
              {result.map((item, index) => (
                <li
                  key={index}
                  className="px-4 py-2 hover:bg-blue-100 cursor-pointer transition"
                >
                  {item}
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

Gambar di atas adalah hasil dari basic search bar yang telah dibuat.

Langkah 2: buat custom hooks untuk debouncing

import { useEffect, useState } from "react";

const useDebounceSearch = (query: string, delay: number) => {
  const [searchValue, setSearchValue] = useState("");

  useEffect(() => {
    const handler = setTimeout(() => {
      setSearchValue(query);
    }, delay);
    return () => clearTimeout(handler);
  }, [query, delay]);

  return searchValue;
};

export default useDebounceSearch;

Hooks di atas berfungsi untuk mengganti value query yang akan dicari ke server dengan rentang waktu tertentu. Misalnya jika user tidak menginputkan sesuatu pada search bar selama rentang 1 detik, maka kita bisa hit API untuk search inputan user tersebut.

Langkah 3: Gunakan custom hook debouncing pada view

  const debounceSearch = useDebounceSearch(inputValue, 500);

  useEffect(() => {
    const fetchResult = async () => {
      const getSearchResult = async (query: string): Promise<string[]> => {
        return new Promise((resolve) => {
          setTimeout(() => {
            const res = arrayResult.filter(
              (item) => item.toLowerCase().includes(query.toLowerCase()) ?? []
            );
            resolve(res);
          }, 500);
        });
      };

      if (debounceSearch) {
        // API CALL
        const res = await getSearchResult(debounceSearch);
        setResult(res);
      } else {
        setResult([]);
      }
    };

    fetchResult();
  }, [debounceSearch]);

Dalam code di atas, akan dilakukan hit API untuk search query user jika user berhenti menginput selama 500ms.