How to throttle/debounce function inside of React useEvent hook?

Question

Note that useEvent is still in the proposal stage, but is available for use today through the react-use-event-hook package.

---

Unfortunately it doesn't seem like it's possible to properly throttle a function inside of useEvent , but I'd really like to be shown that I'm wrong.

I guess we need to throttle the function somewhere else? But then if we need to do that from the same functional component, then useEvent is pretty grievously limited.

Answer 1

How about something like this:

export const useThrottledEvent = <T extends (...args: never[]) => unknown>(
  callback: T,
  delay: number,
): T => {
  const event = useEvent(callback)
  return useCallback(throttle(event, delay), [event, delay])
}

Answer 2

I haven't been able to test @thedude's answer but it reminded me to share the solution we eventually settled on:

const OurComponent = ({ children, handler }) => {
  const someArg = 1;

  const throttledHandler = useCallback(
    _throttle(handler, 450, { leading: false, trailing: true }), // Leading/trailing are presumably not required to be set
    [handler]
  );

  const onKeyDown = useEvent(evt => {
    throttledHandler.cancel();
    
    // ... Your logic here - eg:
    throttledHandler(someArg)
  });

  return <span>{children}</span>
}