ReactUseKit

useDebounceFun

A custom hook that debounces a function.

Installation

pnpm dlx shadcn@latest add https://reactusekit.dev/r/use-debounce-fun.json

Usage

import { useDebounceFun } from "@/hooks/use-debounce-fun";

function App() {
  const handleSearch = (query: string) => {
    console.log("Searching for:", query);
  };

  const debouncedSearch = useDebounceFun(handleSearch, 500);

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

API

Parameters

ParameterTypeDescription
func(...args: any[]) => voidThe function to debounce
delaynumberThe debounce delay in milliseconds

Returns

NameTypeDescription
debouncedFunctionTA debounced version of the function