Digital Transformation
Debounce
TL;DR: Debounce adalah teknik yang menunda pemanggilan sebuah fungsi hingga ada jeda aktivitas, misalnya menunggu pengguna berhenti mengetik selama 300 milidetik sebelum mengirim permintaan pencarian. Tujuannya mengurangi pemanggilan berlebihan yang membebani server dan membuat antarmuka terasa lebih responsif.
Apa itu Debounce?
Debounce adalah cara mengendalikan seberapa sering sebuah fungsi boleh dijalankan ketika sebuah peristiwa terjadi berulang kali dalam waktu singkat. Bayangkan kolom pencarian yang memanggil server setiap kali satu huruf diketik. Untuk kata "marketing", server dipanggil sembilan kali. Dengan debounce, pemanggilan ditunda sampai pengguna berhenti mengetik sejenak, sehingga server hanya dipanggil sekali.
Analoginya seperti lift yang menunggu beberapa detik sebelum menutup pintu, supaya orang yang masih berdatangan bisa masuk dalam satu perjalanan. Debounce sering dibandingkan dengan throttle: debounce menunggu sampai aktivitas berhenti, sedangkan throttle membatasi frekuensi ke interval tetap. Teknik ini relevan dalam membangun antarmuka yang menjaga skor INP tetap baik.
Kapan Memakai Debounce
| Kasus | Kenapa debounce cocok |
|---|---|
| Live search / autocomplete | Tunggu pengguna selesai mengetik sebelum query database |
| Validasi form real-time | Hindari validasi tiap ketukan tombol |
| Auto-save draft | Simpan setelah pengguna berhenti mengubah |
| Resize window | Hitung ulang layout setelah ukuran stabil |
Di React, debounce biasa diterapkan dengan kombinasi useEffect dan timer, atau lewat util seperti lodash. Yang penting timer dibersihkan saat komponen di-unmount agar tidak terjadi pemanggilan tertunda yang tidak diinginkan.
Kenapa Penting?
Pemanggilan fungsi yang berlebihan membebani server dan menambah biaya, terutama jika tiap permintaan memanggil database atau API berbayar. Dalam proyek dengan fitur pencarian, menerapkan debounce sederhana bisa memangkas jumlah permintaan secara drastis tanpa mengubah pengalaman yang dirasakan pengguna. Bagi tim kecil yang menjaga biaya cloud tetap rendah, ini termasuk optimasi dengan rasio manfaat tinggi.
Pertanyaan Umum
Apa beda debounce dan throttle?
Debounce menunda eksekusi sampai aktivitas berhenti sepenuhnya, cocok untuk pencarian. Throttle menjalankan fungsi paling sering sekali per interval tertentu, cocok untuk peristiwa scroll yang terus-menerus.
Berapa lama delay debounce yang ideal?
Untuk pencarian, 250 sampai 400 milidetik umumnya terasa nyaman. Terlalu pendek mengurangi manfaat, terlalu panjang membuat antarmuka terasa lambat merespons.
Istilah Terkait