​
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

NameTypeDescription
valueanyThe value that you want to debounce. This can be of any type.
delaynumberThe delay time in milliseconds. After this amount of time, the latest value is used.

​
Return Values

NameTypeDescription
debouncedValueanyThe 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)}
    />
  );
}
UsageuseFetch