import { useCallback, useEffect, useState } from 'react'
import { debounce } from 'lodash'

const useDebouncedValue = <T>(value: T, debounceTime = 200) => {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  const debouncedSetValue = useCallback(
    debounce(val => setDebouncedValue(val), debounceTime),
    []
  )

  useEffect(() => {
    debouncedSetValue(value)
  }, [value])

  return debouncedValue
}

export default useDebouncedValue