useDebounce

Timing & async

A feature-rich React hook for debouncing values with leading/trailing edge and maxWait support

Install

$ npm install @usefy/use-debounce

Quick start

useDebounce.tsx

import { useDebounce } from "@usefy/use-debounce";

function SearchInput() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) {
      searchAPI(debouncedQuery);
    }
  }, [debouncedQuery]);

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

API reference

`useDebounce<T>(value, delay?, options?)`

A hook that returns a debounced version of the provided value.

Parameters

Parameter	Type	Default	Description
`value`	`T`	—	The value to debounce
`delay`	`number`	`500`	The debounce delay in milliseconds
`options`	`UseDebounceOptions`	`{}`	Additional configuration options

Options

Option	Type	Default	Description
`leading`	`boolean`	`false`	Update on the leading edge (first call)
`trailing`	`boolean`	`true`	Update on the trailing edge (after delay)
`maxWait`	`number`	—	Maximum time to wait before forcing an update

Returns

Type	Description
`T`	The debounced value

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →