use-stable-event-handler.ts

import { useCallback, useEffect, useRef } from 'react';

/**
 * A callback that stays stable between renders even as the dependencies change.
 *
 * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
 */
export function useStableEventHandler<T extends (...args: any[]) => any>(fn: T): T {
  const ref = useRef<T>();

  useEffect(() => {
    ref.current = fn;
  }, [fn]);

  return useCallback(((...args) => ref.current?.apply(undefined, args)) as T, [ref]);
}