react-reuse-hooks/src/hooks/useDebounce.js

A collection of 30+ production-ready reusable React hooks for web apps, covering state, effects, media, forms, and utilities.

import { useEffect, useState } from "react";

export function useDebounce(value, delay = 500) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);

  return debounced;
}