useMemoizedArray.ts

import { useMemo } from "react";

import { useArrayHash } from "./useArrayHash";

export function useMemoizedArray<T1, T2 = T1>(
  array: T1[],
  hashKey: keyof T1,
): [T2[], string];

export function useMemoizedArray<T1, T2 = T1>(
  array: T1[],
  hashKey: keyof T1,
  mapper: (item: T1, i: number, array: T1[]) => T2,
): [T2[], string];

export function useMemoizedArray<T1, T2>(
  array: T1[],
  hashKey: keyof T1,
  mapItem?: (item: T1, i: number, array: T1[]) => T2,
): [T1[] | T2[], string] {
  const hash = useArrayHash(array, hashKey);
  const memo = useMemo(() => {
    return mapItem ? array.map(mapItem) : array;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [hash]);

  return [memo, hash];
}