useMemoizedCallbacks #react #hook

useMemoizedCallbacks.tsx

import { useMemo } from "react";
import { memoize } from "lodash";

/**
 * @description useful for callback that are passed to repeated component
 * @example
 * const makeRemove=useMemoizedCallback((date:Date)=>()=>{},String,[]);
 * ...
 * <ol>calendarEvents.map(calendarEvent => <li onClick={makeRemove(calendarEvent)}>{calendarEvent.toLocaleString()}</li>)</ol>
 */
export function useMemoizeCallback<
  F extends (...args: any[]) => any,
  K extends (...args: Parameters<F>) => any
>(fn: F, resolver: K | undefined, inputs: any[]): F {
  return useMemo(() => memoize(fn, resolver as any), [fn, resolver, ...inputs]); // eslint-disable-line
}