AFAqua Fusion

useDebounce

A hook for debouncing a reactive value. Returns a debounced copy that only updates after the specified delay has elapsed since the last change. Useful for search inputs, API calls, and performance optimization.

Import

import { useDebounce } from '@wavebooking/aqua-fusion';

Usage

function SearchComponent() {
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 300);
 
  useEffect(() => {
    if (debouncedSearch) {
      fetchResults(debouncedSearch);
    }
  }, [debouncedSearch]);
 
  return <Input value={search} onChange={(e) => setSearch(e.target.value)} />;
}

Parameters

ParameterTypeDescription
valueTThe value to debounce.
delaynumberDebounce delay in milliseconds.

Return Value

TypeDescription
TThe debounced value, updated only after the delay elapses without further changes.

useDebouncedCallback

A companion hook for debouncing a callback function instead of a value.

import { useDebouncedCallback } from '@wavebooking/aqua-fusion';

Usage

const handleSearch = useDebouncedCallback(
  (query: string) => {
    api.search(query);
  },
  300
);
 
return <Input onChange={(e) => handleSearch(e.target.value)} />;

Parameters

ParameterTypeDescription
callback(...args) => voidThe function to debounce.
delaynumberDebounce delay in milliseconds.

Return Value

TypeDescription
(...args) => voidA debounced version of the callback.

useThrottle

A throttle hook that ensures the value updates at most once per interval, unlike debounce which waits for inactivity.

import { useThrottle } from '@wavebooking/aqua-fusion';

Usage

const [scrollY, setScrollY] = useState(0);
const throttledScrollY = useThrottle(scrollY, 100);
 
useEffect(() => {
  const handler = () => setScrollY(window.scrollY);
  window.addEventListener('scroll', handler);
  return () => window.removeEventListener('scroll', handler);
}, []);

Parameters

ParameterTypeDescription
valueTThe value to throttle.
intervalnumberMinimum interval between updates in milliseconds.

Return Value

TypeDescription
TThe throttled value, updated at most once per interval.