import { useEffect, useState } from "react"

/** Hook to debounce a state. Returns normal value and setter and a third, debounced output */
export function useDebouncedState<T>(initialValue: T, delay: number): [T, (value: T) => void, T] {
  const [value, setValue] = useState<T>(initialValue)
  const [debouncedValue, setDebouncedValue] = useState<T>(initialValue)

  useEffect(() => {
    const timeout = setTimeout(() => setDebouncedValue(value), delay)
    return () => clearTimeout(timeout)
  }, [value])

  return [value, setValue, debouncedValue]
}