useDebounce

useDebounce runs a callback only after its dependencies have been stable for a specified delay.

Usage

import { useState } from "react";
import { useDebounce } from "hookify-react";

export default function UseDebounceExample() {
  const [query, setQuery] = useState("");

  useDebounce(() => {
    console.log("Searching for:", query);
  }, 500, [query]);

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

API Reference

Parameters

Parameter	Type	Default	Description
callback	() => void	-	The function to run once the dependencies have been stable for delay ms.
delay	number	-	The delay in milliseconds before the callback runs.
deps	unknown[]	-	The dependency array that triggers the debounce; the timer resets whenever it changes.

Return Value

useDebounce does not return a value (void).

Behavior

• Runs callback only after deps have stayed unchanged for delay milliseconds.
• Resets the pending timer on every change to deps (or to delay).
• Always invokes the latest callback, so it does not need to be memoized.
• Clears the pending timer automatically on unmount.
• Ideal for search inputs, API calls, and other performance-sensitive scenarios.