useThrottledCallback

useThrottledCallback is a React hook that returns a throttled version of the provided callback function. The throttled callback will only be invoked at most once per specified interval.

Interface

function useThrottledCallback(options: Object): Function;

Parameters

• optionsrequired · Object
  

  The options object.

  • options.onChangerequired · Function
    

    The callback function to throttle.

  • options.timeThresholdrequired · number
    

    The number of milliseconds to throttle invocations to.

  • options.edgesArray<'leading' | 'trailing'> · ['leading', 'trailing']
    

    An optional array specifying whether the function should be invoked on the leading edge, trailing edge, or both.

Return Value

• Function
  

  throttled function that limits invoking the callback.

Example

function ScrollTracker() {
  const throttledScroll = useThrottledCallback({
    onChange: (scrollY: number) => console.log(scrollY),
    timeThreshold: 200,
  });
  return <div onScroll={e => throttledScroll(e.currentTarget.scrollTop)} />;
}