qol-hooks/dist/esm/useDebounce.js

A collection of React hooks to improve the quality of life of developers.

import { useState, useEffect } from "react";
/**
 * @description A hook to debounce a value
 *
 * @param {DebouncedValue} value The value to debounce
 * @param {number} delay The delay in milliseconds
 *
 * @returns {DebouncedValue} The debounced value
 *
 * @example```tsx
 * const debouncedValue = useDebounce(value, 1000);
 * console.log(debouncedValue); // The debounced value
 * ```
 */
function useDebounce(value, delay) {
    const [debouncedValue, setDebouncedValue] = useState(value);
    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);
        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);
    return debouncedValue;
}
export default useDebounce;