import { useEffect, useState } from 'react'

/**
 * Trails `value` by `ms`. Used by the search boxes so typing does not fire a
 * request per keystroke.
 */
export function useDebounced<T>(value: T, ms: number): T {
  const [debounced, setDebounced] = useState(value)

  useEffect(() => {
    if (ms <= 0) {
      setDebounced(value)
      return
    }
    const timer = setTimeout(() => setDebounced(value), ms)
    return () => clearTimeout(timer)
  }, [value, ms])

  return debounced
}