07 July 2026 1 min read5.0 (2)

Cara Menggunakan useDebounce di React agar Fitur Search Tidak Membebani Server

Tim Udaksana

Author

Cara Menggunakan useDebounce di React agar Fitur Search Tidak Membebani Server

02 / Project Structure

Struktur Folder & File

Struktur folder & file yang bakal kamu punya di akhir tutorial.

Explorer19 items
  • project
03

03 / Step

Penggunaan useDebounce

Folder hooks digunakan untuk menyimpan custom hook yang dapat digunakan kembali di berbagai halaman maupun komponen. Karena useDebounce bukan komponen ataupun utility biasa, lokasi paling tepat adalah di dalam folder hooks.

04

04 / Step

Membuat useDebounce pad typescript logic

Membuat useDebounce pad typescript logic

hooks/useDebounce.ts
import { useEffect, useState } from "react";
export default function useDebounce<T>(
    value: T,
    delay: number = 500
): T {
    const [debouncedValue, setDebouncedValue] =
        useState<T>(value);
    useEffect(() => {
        const timer = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);
        return () => clearTimeout(timer);
    }, [value, delay]);
    return debouncedValue;
}
05

05 / Step

Cara Menggunakan pada Search pages

Cara Menggunakan pada Search pages

app/products/page.tsx
"use client";
import { useEffect, useState } from "react";
import useDebounce from "@/hooks/useDebounce";
export default function ProductsPage() {
    const [search, setSearch] = useState("");
    const debounceSearch = useDebounce(search,500);
    useEffect(() => {
        if(!debounceSearch) return;
        fetchProducts();
    },[debounceSearch]);
    const fetchProducts = async ()=>{
        const response = await fetch(
            `/api/products?search=${debounceSearch}`
        );
        const data = await response.json();
        console.log(data);
    }
    return(
        <input
            value={search}
            onChange={(e)=>setSearch(e.target.value)}
            placeholder="Cari Produk"
        />
    )
}
06

06 / Step

Kalau Javacript?

Kalau Javacript?

hooks/useDebounce.js
import { useEffect,useState } from "react";
export default function useDebounce(value,delay=500){
    const [debouncedValue,setDebouncedValue]=
        useState(value);
    useEffect(()=>{
        const timer=setTimeout(()=>{
            setDebouncedValue(value);
        },delay);
        return ()=>clearTimeout(timer);
    },[value,delay]);
    return debouncedValue;
}
07

07 / Step

Laravel Gimana?

Nah ini yang sering bikin bingung. Laravel sendiri sebenarnya tidak memiliki useDebounce, karena debounce adalah konsep di sisi frontend. Jadi tergantung frontend yang dipakai.

karena di materi ini membawa konsep Laravel menggunakan React melalui Inertia, struktur project biasanya seperti ini.

 

resources
└── js
    ├── Components
    ├── Pages
    ├── hooks
    │      useDebounce.ts
    └── app.tsx

 

Best Practice nya

 

  • React: hooks/useDebounce.ts
  • React JS: hooks/useDebounce.js
  • Next.js: hooks/useDebounce.ts
  • Laravel Blade: Tidak perlu hook Gunakan x-model.debounce atau wire:model.debounce
  • Laravel + React Inertia: resources/js/hooks/useDebounce.ts
  • Laravel + Vue: resources/js/composables/useDebounce.js
08

08 / Step

Penutup

Selamat! Sekarang kamu sudah memahami cara kerja useDebounce dan bagaimana mengimplementasikannya pada proyek React maupun TypeScript.

Meskipun terlihat sederhana, custom hook ini memiliki dampak besar terhadap performa aplikasi, terutama pada fitur seperti pencarian, filter data, autocomplete, dan live search. Dengan mengurangi request yang tidak perlu, aplikasi menjadi lebih responsif sekaligus membantu mengurangi beban server.

Sebagai developer, membiasakan diri menerapkan optimasi kecil seperti ini sejak awal akan membuat aplikasi lebih scalable ketika jumlah pengguna terus bertambah.

 

Kapan Sebaiknya Menggunakan useDebounce?

Gunakan useDebounce ketika fitur yang dibuat membutuhkan input pengguna secara terus-menerus, misalnya:

  • 🔍 Search produk atau data
  • 🏷️ Filter berdasarkan keyword
  • 🤖 Autocomplete atau suggestion
  • 📍 Pencarian lokasi atau alamat
  • 📊 Dashboard dengan filter realtime
  • 📚 Data table dengan fitur pencarian

Jika aksi yang dilakukan langsung memanggil API setiap perubahan input, maka debounce hampir selalu menjadi solusi yang tepat.

 

Kapan Tidak Perlu Menggunakan Debounce?

Tidak semua input membutuhkan debounce. Hindari menggunakannya pada kondisi berikut:

  • Form login
  • Form registrasi
  • Input OTP
  • Input password
  • Perhitungan lokal yang tidak memanggil API

Pada kasus tersebut, pengguna justru mengharapkan respons instan tanpa adanya penundaan.

Ringkasan

Selama artikel ini kita telah mempelajari beberapa hal penting:

  • Memahami masalah request API yang berlebihan pada fitur search.
  • Mengenal konsep debounce dan cara kerjanya.
  • Membuat custom hook useDebounce.
  • Mengimplementasikan useDebounce pada React dengan TypeScript maupun JavaScript.
  • Mengetahui struktur folder yang direkomendasikan.
  • Memahami implementasi pada Laravel, Inertia React, Livewire, dan Alpine.js.
  • Mengetahui kapan debounce perlu digunakan dan kapan tidak.

 

Langkah Selanjutnya

Setelah memahami useDebounce, kamu bisa melanjutkan ke topik optimasi React lainnya, seperti:

  • useMemo untuk menghindari perhitungan ulang yang tidak diperlukan.
  • useCallback agar fungsi tidak dibuat ulang setiap render.
  • React Query atau TanStack Query untuk pengelolaan data dari API.
  • Infinite Scroll menggunakan Intersection Observer.
  • Virtualization untuk menangani ribuan data dengan performa tetap optimal.

Terima Kasih Sudah Membaca 👋

Semoga artikel ini membantu kamu memahami bagaimana useDebounce bekerja dan kapan waktu yang tepat untuk menggunakannya.

Jika menurutmu artikel ini bermanfaat, jangan ragu untuk membagikannya kepada teman atau rekan developer yang sedang belajar React. Semakin banyak developer yang memahami praktik optimasi sejak awal, semakin baik pula kualitas aplikasi yang mereka bangun.

Sampai jumpa di artikel developer berikutnya! 🚀

Bagaimana artikel ini?

Berikan rating untuk membantu kami menyajikan konten yang lebih baik

Klik bintang untuk menilai

5.0 / 5.0 (2 reviews)

Blog Terkait

Baca tulisan menarik lainnya dari kami

Lihat Semua
Website Bukan Cuma Pajangan: Kenapa Bisnis Perlu Punya Rumah Digital Sendiri &nbsp;
14 Jun 2026
Tim Udaksana
5.0

Website Bukan Cuma Pajangan: Kenapa Bisnis Perlu Punya Rumah Digital Sendiri &nbsp;

Website bukan hanya tempat menaruh informasi bisnis. Lebih dari itu, website bisa menjadi rumah digital yang membantu bisnis terlihat profesional, mudah dipercaya, dan siap berkembang di era digital

Baca Selengkapnya
KontakYuk meeting