Use debounce hook

Debounce waits until the events stop and is commonly useful for:

• search inputs,
• autocomplete,
• filtering,
• autosave.

    import { useEffect, useState } from "react";

    const DELAY = 300;

    export const useDebounce = <T>(value: T, delay = DELAY) => {
        const [debouncedValue, setDebouncedValue] = useState(value);

        useEffect(() => {
            const timeoutId = setTimeout(() => setDebouncedValue(value), delay);

            return () => clearTimeout(timeoutId);
        }, [value, delay]);

        return debouncedValue;
    };

Example of usage:

    const debouncedSearch = useDebounce(search)
    const { users, error, isLoading } = useSearchUsers(debouncedSearch)

Go back to shorts