react-usekit

Beta

useDebounceFun

A custom hook that debounces a function.

Installation

npx react-usekit@latest init

Select: hooks → TypeScript or JavaScript → path -> useDebounceFun

Usage

import { useDebounceFun } from "./hooks/useDebounceFun";

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