useThrottleCallback

A function that runs at most once per interval.

HooksState@gaudi/design-system/hooks/state/use-throttle-callbackView in Storybook Source

Keeps scroll, pointer and resize handlers responsive without running on every event: the first call runs at once and later calls fold into one trailing call with the latest arguments.

Usage

import { useThrottleCallback } from '@gaudi/design-system/hooks';
const onScroll = useThrottleCallback(() => setProgress(readProgress()), 100);

Examples

Throttle pointer moves

Storybook

API

3 options

2 return values

Accessibility

Keep the final state accurate (trailing: true) so progress indicators and announcements end on the real value.

Notes

createThrottler(callback, wait, options) is exported for non-React code.

useBooleanGeneric boolean state with stable toggle, enable and disable actions.useControllableStateState that works controlled or uncontrolled, like native inputs.useCountdownA pausable countdown or count-up that stops at its target.useCounterA number with increment, decrement, set and reset actions.useDebounceCallbackA debounced function with cancel and flush.useDebounceValueA value that updates only after it stops changing.