usePartialCall - binding more args to end of a callback, avoid re-rendering a pure react component

usePartialCall.ts

import { useEffect, useRef, useMemo } from "react";

type Args = readonly unknown[];

function usePartialCall<A extends Args, M extends Args, R>(
  f: (...args: [...A, ...M]) => R,
  ...moreArgs: M
) {
  const ref = useRef(moreArgs);

  useEffect(
    () => {
      ref.current = moreArgs;
    },
    // linter is confused: moreArgs is an array and we want
    // to trigger effect if any of its elements change.
    // eslint-disable-next-line react-hooks/exhaustive-deps
    moreArgs
  );

  return useMemo(
    () => (...a: A) => f(...a, ...ref.current),
    // linter chokes on TS and thinks A is a runtime value.
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [f]
  );
}