react debounce and throttle hooks

debounce-throttle.ts

import { useEffect, useRef, useState } from "react"

export function useDebouncedValue<T>(
  sourceValue: T,
  ms: number | undefined
): T {
  const [value, setValue] = useState(sourceValue)

  useEffect(() => {
    if (ms == null) return

    const timeout = setTimeout(() => {
      setValue(sourceValue)
    }, ms)
    return () => clearTimeout(timeout)
  }, [sourceValue, ms])

  return value
}

export function useThrottledValue<T>(
  sourceValue: T,
  ms: number | undefined
): T {
  const sourceValueRef = useRef(sourceValue)
  useEffect(() => {
    sourceValueRef.current = sourceValue
  })

  const [value, setValue] = useState(sourceValue)
  useEffect(() => {
    if (ms == null) return

    const interval = setInterval(() => {
      setValue(sourceValueRef.current)
    }, ms)
    return () => clearInterval(interval)
  }, [ms])

  return value
}