kitzo

React utilities library

useDebounce

Delay updating a value until user input stops for a given duration.

Usage

Debounce.tsx

const debouncedValue = useDebounce(value, delay);

Example

Raw value: —

Debounced value: —

Fetch.tsx

import { useDebounce } from 'kitzo';
            
function SearchInput() {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 500);

  useEffect(() => {
    // fire API call here
  }, [debouncedValue]);

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

API

Parameter	Type	Description
`value`	`any`	The value to debounce
`delay`	`number`	Delay in milliseconds

Returns the debounced value.

Behavior

Updates only after the delay has fully elapsed
Resets the timer on every value change
Does not block the initial render
Always returns the latest stable value