Files
the-biergarten-app/web/frontend/app/hooks/useDebouncedValue.ts

21 lines
564 B
TypeScript

import { useEffect, useState } from 'react';
/**
* Returns a value that only updates after `delayMs` has passed without `value` changing.
*
* @example
* const debouncedQuery = useDebouncedValue(query, 300);
*/
const useDebouncedValue = <T>(value: T, delayMs: number): T => {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timeout = setTimeout(() => setDebounced(value), delayMs);
return () => clearTimeout(timeout);
}, [value, delayMs]);
return debounced;
};
export default useDebouncedValue;