Use debounce hook

Funkcja „debounce” czeka, aż zdarzenia ustaną i zazwyczaj sprawdza się w następujących przypadkach:

pola wyszukiwania,
autouzupełnianie,
filtrowanie,
automatyczne zapisywanie.

    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;
    };

Przykład użycia:

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

Powrót do szortów