`useDebounce`

Two related utilities for debouncing — only firing after delay ms of inactivity. Use them for derived state that drives expensive work like network requests, filters, or autosaves.

useDebounce(value, delay) — debounces a value.
useDebouncedCallback(callback, delay) — returns a stable, debounced version of callback.

Debouncing a value


import { useEffect, useState } from 'react'
import { useDebounce } from '@wire-ui/react'
 
function Search() {
  const [query, setQuery] = useState('')
  const debouncedQuery = useDebounce(query, 250)
 
  useEffect(() => {
    if (debouncedQuery) fetch(`/api/search?q=${debouncedQuery}`)
  }, [debouncedQuery])
 
  return <input value={query} onChange={e => setQuery(e.target.value)} />
}

Debouncing a callback


import { useDebouncedCallback } from '@wire-ui/react'
 
function Editor() {
  const saveDraft = useDebouncedCallback((value: string) => {
    fetch('/api/draft', { method: 'POST', body: value })
  }, 500)
 
  return <textarea onChange={e => saveDraft(e.target.value)} />
}

The returned callback always invokes the latest callback reference, so closure-captured values stay fresh without resetting the timer between renders.

Parameters

`useDebounce`

Param	Type	Description
`value`	`T`	Value to debounce.
`delay`	`number`	Milliseconds of inactivity required before emitting.

`useDebouncedCallback`

Param	Type	Description
`callback`	`(...args) => void`	Function to debounce.
`delay`	`number`	Milliseconds of inactivity required before invoking.