TanStackIntermediate

Search — Debounce

Search input, debounce ও API-তে search param — বাংলায়।

8টি অংশবাংলা ভাষায়

সার্চ প্রতিটি keystroke-এ server-এ request পাঠালে spam হয়। তাই debounce — ব্যবহারকারী লেখা থামানোর ৪০০ms পরে request।

useDebounce hook

src/lib/hooks/use-debounce.tsts

"use client";

import { useEffect, useState } from "react";

export function useDebounce<T>(value: T, delay = 400): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

Dashboard-এ প্রয়োগ

Search integrationtsx

tsx

const [searchInput, setSearchInput] = useState("");
const search = useDebounce(searchInput, 400);

// search-এ কোনো ডেটা থাকলে পেজ রিসেট
useEffect(() => {
  setPage(1);
}, [search]);

const params: ProductQueryParams = {
  page,
  pageSize,
  search: search || undefined,   // খালি হলে param নেই
  category: category || undefined,
  status: status === "all" ? undefined : status,
};

<ProductList params={params} />

ইনপুট component

Search inputtsx

tsx

<div className="relative">
  <SearchIcon className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
  <Input
    value={searchInput}
    onChange={(e) => setSearchInput(e.target.value)}
    placeholder="Product খুঁজুন…"
    className="pl-9"
  />
</div>

Debounce কেন

queryKey-এ search দিলে প্রতিটি অক্ষরে নতুন query হতো। debounce-এর পরে প্রতি ৪০০ms-এ একবার — সার্ভারের উপর চাপ কম, বরং UX-এ কোনো তফাত নেই।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।