useDebounce

Delay the execution of function or state update with useDebounce.

Install

npm

npm i use-any-hook

Description

The useDebounce hook is useful for delaying the execution of functions or state updates until a specified time period has passed without any further changes to the input value. This is especially useful in scenarios such as handling user input or triggering network requests, where it effectively reduces unnecessary computations and ensures that resource-intensive operations are only performed after a pause in the input activity.

Parameters

Name	Type	Description
value	any	The value that you want to debounce. This can be of any type.
delay	number	The delay time in milliseconds. After this amount of time, the latest value is used.

Return Values

Name	Type	Description
debouncedValue	any	The debounced value. After the delay time has passed without the value changing, this will be updated to the latest value.

Example

useDebounce.example.tsx

import { useDebounce } from "use-any-hook";

function MyComponent() {
  const [searchTerm, setSearchTerm] = useState("");
  const debouncedSearchTerm = useDebounce(searchTerm, 1000);

  const handleSearch = async () => {
    const response = await fetch(
      `https://dummyjson.com/products/search?q=${debouncedSearchTerm}`
    );
  };

  useEffect(() => {
    handleSearch();
    // This will be called after (1000ms = 1second) from your last keypress
  }, [debouncedSearchTerm]);

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