kitzo

React utilities library

useDebouncedCallback

Return a debounced version of the provided callback function.

Usage

DebouncedCallback.tsx

const debouncedCallback = useDebouncedCallback(callback, { delay: 500 });

Example

Raw value: —

Debounced callback result: —

Fetch.tsx

import { useDebouncedCallback } from 'kitzo';
import { useState } from 'react';
            
function SearchInput() {
  const [value, setValue] = useState('');

  const debouncedSearch = useDebouncedCallback((query: string) => {
    // fire API call here with query
    console.log("Searching for:", query);
  }, { delay: 500 });

  return (
    <input
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
        debouncedSearch(e.target.value);
      }}
    />
  );
}

API

Parameter	Type	Description
`callback`	`function`	The function to debounce
`options`	`object`	Options object containing delay, leading, and trailing
`options.delay`	`number`	Delay in milliseconds (default: 300)
`options.leading`	`boolean`	Call on the leading edge of the timeout (default: false)
`options.trailing`	`boolean`	Call on the trailing edge of the timeout (default: true)

Returns a debounced version of the callback, with additionalcancel and flush methods attached.

Behavior

Delays executing the callback until the delay has fully elapsed.
Provides cancel to clear the timeout and flush to execute immediately.
Options support leading and trailing edge execution.