@guoba-ai/hook / useDebounce

Function: useDebounce()

function useDebounce<T>(value, delay?): T;

Defined in: useDebounce.ts:29

Debounce a value. The returned value only updates after the specified delay has passed without any new changes.

Parameters

value

T

The value to debounce

delay?

number = 500

Delay in milliseconds (defaults to 500)

Returns

T

The debounced value

Example

const [text, setText] = useState('')
const debouncedText = useDebounce(text, 300)
// debouncedText updates 300ms after the last setText call

const debouncedValue = useDebounce(value)
// Uses the default 500ms delay

function SearchBox({ search }: { search: (query: string) => void }) {
  const [query, setQuery] = useState('')
  const debouncedQuery = useDebounce(query, 300)
  useEffect(() => search(debouncedQuery), [debouncedQuery, search])
  return <input value={query} onChange={event => setQuery(event.target.value)} />
}

Warning

The initial value is returned immediately. Later changes are delayed, and pending updates are cleared on unmount.

useDebounce