useDebounce

Returns a debounced copy of a changing value.

Import

import { useDebounce } from '@kamod-ch/hooks'

Live demo

Basic demo

Returns a debounced copy of a changing value.

Immediate: —

Debounced: —

import { useState } from 'preact/hooks'
import { useDebounce } from '@kamod-ch/hooks'

export default function UseDebounceDemo() {
  const [value, setValue] = useState('')
  const debounced = useDebounce(value, { wait: 400 })

  return (
    <div>
      <input value={value} onInput={(event) => setValue(event.currentTarget.value)} placeholder="Type quickly" />
      <p><strong>Immediate:</strong> {value || '—'}</p>
      <p><strong>Debounced:</strong> {debounced || '—'}</p>
    </div>
  )
}

API

TypeScript signature

import type { DebounceOptions } from './debounceOptions.js';
declare function useDebounce<T>(value: T, options?: DebounceOptions): T;
export default useDebounce;
/

SSR considerations

This hook is safe to import during SSR. If your effect body touches the DOM, keep that work inside the effect callback.

Browser compatibility

Works in any modern browser supported by Preact.