Set of react utils to work with callbacks and event listeners

react-utils.ts

export const useSyncRef = <T>(value: T) => {
  const ref = useRef<T>(value);
  ref.current = value;
  return ref;
};

export const useSyncRefWithEffect = <T>(value: T) => {
  const ref = useRef<T>(value);
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref;
};

export const useStableCallback = <T extends (...args: any[]) => any>(cb: T) => {
  const ref = useSyncRef<T>(cb);
  return useCallback(((...args) => ref.current(...args)) as T, [ref]);
};

export const on = <E extends keyof WindowEventMap>(
  type: E,
  listener: (this: Window, ev: WindowEventMap[E]) => any,
  useCapture?: boolean,
) => {
  window.addEventListener(type, listener, useCapture);
  return () => window.removeEventListener(type, listener, useCapture);
};

export const useOn = <E extends keyof WindowEventMap>(
  type: E,
  listener: (ev: WindowEventMap[E]) => any,
  useCapture?: boolean,
) => {
  const stableListener = useStableCallback(listener);
  useEffect(
    () => on(type, stableListener, useCapture),
    [type, stableListener, useCapture],
  );
};