React Performance: Debouncing & Throttling

Halo semua! 👋

Hari ini saya mau bahas topik yang penting banget buat menyelamatkan aplikasi kamu dari crash dan API kamu dari overload: Debouncing dan Throttling.

Pernah nggak sih bikin fitur search yang nembak request ke server setiap kali user ngetik satu huruf? User ngetik “React”, terus aplikasi kamu kirim 5 request: “R”, “Re”, “Rea”, “Reac”, “React”.

Itu boros banget, Bro. Kita perlu kasih tau aplikasi kita buat “santai” dikit.

Yuk kita bahas.

Masalahnya: Kebanyakan Event

Bayangin user lagi resize jendela browser mereka. Browser bakal nembakin event resize ratusan kali per detik. Kalau kamu jalanin kalkulasi berat di event itu, browser user bakal nge-lag parah.

Atau contoh search bar tadi. Kalau user ngetik “Supercalifragilisticexpialidocious”, masa iya kita mau hit backend 34 kali?

Nggak dong. Kita maunya hit sekali aja, pas user udah selesai ngetik.

Debounce: “Tunggu sampe berhenti”

Debouncing itu artinya: “Tunggu ada jeda dulu, baru jalanin fungsinya.”

Bayangin lift. Pintunya bakal tetep kebuka selama masih ada orang yang masuk. Pintu cuma bakal nutup dan jalan kalau udah nggak ada orang masuk selama beberapa detik.

Bikin Custom Hook useDebounce

Kita bisa bikin custom hook sendiri pakai useState dan useEffect.

import { useState, useEffect } from 'react';

// Hook ini mastiin 'value' cuma bakal ke-update
// kalau udah lewat 'delay' milidetik dari perubahan terakhir.
export function useDebounce<T>(value: T, delay: number): T {
  // State buat nyimpen value yang udah di-debounce
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(
    () => {
      // Update debounced value setelah delay
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      // Batalin timeout kalau value berubah (atau pas unmount)
      // Ini kuncinya: kalau user ngetik lagi sebelum delay abis,
      // timeout yang lama dibuang, bikin timeout baru.
      return () => {
        clearTimeout(handler);
      };
    },
    [value, delay] // Jalanin lagi kalau value atau delay berubah
  );

  return debouncedValue;
}

Cara Pakainya

Ini contoh komponen Search sederhana.

import React, { useState, useEffect } from 'react';
import { useDebounce } from './useDebounce'; // Anggap aja filenya di sini

const Search = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  // Value ini cuma bakal update 500ms SETELAH user berhenti ngetik
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    if (debouncedSearchTerm) {
      console.log('Lagi nyari:', debouncedSearchTerm);
      // fetchAPI(debouncedSearchTerm).then(...)
    } else {
      setResults([]);
    }
  }, [debouncedSearchTerm]); // API call cuma jalan pas DEBOUNCED value berubah

  return (
    <div>
      <input
        type="text"
        placeholder="Cari sesuatu..."
        onChange={(e) => setSearchTerm(e.target.value)}
      />
    </div>
  );
};

Sekarang, kalau kamu ngetik “React” cepet-cepet, effect-nya cuma jalan sekali!

Throttle: “Sekali tiap X detik”

Throttling itu artinya: “Jalanin fungsi ini maksimal sekali setiap X milidetik.”

Bayangin senapan mesin (atau rate limiter). Mau secepat apa pun kamu neken pelatuknya, pelurunya cuma keluar sesuai rate yang udah diatur.

Throttling ini cocok banget buat infinite scrolling (ngecek posisi scroll) atau pas window resize. Kamu nggak perlu ngecek posisi scroll setiap piksel, cukup cek setiap 100ms aja udah cukup halus kok.

Kapan Pakai Yang Mana?

• Debounce: Pakai kalau kamu peduli sama hasil akhir (contoh: nunggu user selesai ngetik).
• Throttle: Pakai kalau kamu perlu ngerespon perubahan di tengah jalan tapi dengan kecepatan yang terkontrol (contoh: scroll atau resize).

Kesimpulan

Performance itu bukan cuma soal algoritma yang canggih, tapi juga soal menghindari kerjaan yang nggak perlu.

Dengan pakai Debouncing dan Throttling, aplikasi React kamu bakal kerasa lebih snappy dan beban server juga berkurang. Sama-sama untung.

Jadi, besok kalau mau pasang onChange, tanya dulu ke diri sendiri: “Perlu nggak sih ini jalan setiap saat?”

Happy coding! 🚀