All files / src/hooks useDebounce.ts

100% Statements 7/7
100% Branches 0/0
100% Functions 4/4
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22                        220x   220x 109x 109x     220x    
// src/hooks/useDebounce.ts
import { useState, useEffect } from 'react';
 
/**
 * A custom hook that debounces a value.
 * It will only update the returned value after the specified delay has passed
 * without the input value changing.
 * @param value The value to debounce.
 * @param delay The debounce delay in milliseconds.
 * @returns The debounced value.
 */
export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
 
  return debouncedValue;
}