useDebounceValue

1"use client"
2 
3import * as React from "react"
4 
5/**
6 * Debounces a fast-changing value. The first render returns `value` as-is
7 * (no flash-to-empty), then `debouncedValue` only catches up to the latest
8 * `value` once `delay` ms have passed without `value` changing again — every
9 * new `value` restarts the wait. Changing `delay` also restarts the timer
10 * with the new duration. The pending timer is cleared on unmount (and before
11 * every re-run), so no stray `setState` fires after the consumer is gone.
12 */
13export function useDebounceValue<T>(value: T, delay = 300): T {
14  const [debouncedValue, setDebouncedValue] = React.useState(value)
15 
16  React.useEffect(() => {
17    const timeout = setTimeout(() => {
18      setDebouncedValue(value)
19    }, delay)
20 
21    return () => clearTimeout(timeout)
22  }, [value, delay])
23 
24  return debouncedValue
25}
26 
27export default useDebounceValue