useReferentialCallback: do not rerender on callback intance change #react #hook

useReferentialCallback.tsx

import React from "react";

export function useReferentialCallback<F extends (...args: any[]) => any>(
  fn: F,
  deps?: any[],
): F {
  const fnRef = React.useRef<F>(fn);
  React.useLayoutEffect(() => {
    fnRef.current = fn;
  }, deps); // eslint-disable-line
  return React.useCallback(
    ((...args: any) => {
      fnRef.current(...args);
    }) as any,
    [],
  );
}