react custom hook to group by some key array of items (Map version)

useListGroupBy.tsx

import { useMemo } from "react";

type ListGroupByMap<T> = Map<T[keyof T], T[]>;

const useListGroupBy = <T,>(list: T[], typeKey: keyof T): ListGroupByMap<T> => {
  const updatedListByType = useMemo(() => {
    const listByType = new Map<T[keyof T], T[]>();
    list.forEach((item) => {
      const itemValue = item[typeKey];
      if (listByType.has(itemValue)) {
        listByType.get(itemValue)?.push(item);
      } else {
        listByType.set(itemValue, [item]);
      }
    });
    return listByType;
  }, [list, typeKey]);

  return updatedListByType;
};

export default useListGroupBy;

this is the Array.reduce version:

type ListGroupByMap<T> = Map<T[keyof T], T[]>;

const useListGroupBy = <T>(list: T[], typeKey: keyof T): ListGroupByMap<T> => {
  const updatedListByType = useMemo(() => {
    const listByType = list.reduce((acc: Map<T[keyof T], T[]>, item: T) => {
      const itemValue = item[typeKey];
      const existingList = acc.get(itemValue) ?? [];
      return acc.set(itemValue, [...existingList, item]);
    }, new Map<T[keyof T], T[]>());
    return listByType;
  }, [list, typeKey]);

  return updatedListByType;
};

export default useListGroupBy;