Grouping Tabular Data by Category Using Array Reduce Inside Custom Hooks

import { useMemo } from 'react';
 
function useGroupedInventory(items) {
  return useMemo(() => {
    return items.reduce((accumulator, currentItem) => {
      const category = currentItem.category ?? 'Unassigned';
      
      if (!accumulator[category]) {
        accumulator[category] = [];
      }
      
      accumulator[category].push(currentItem);
      return accumulator;
    }, {});
  }, [items]);
}
 
export function InventoryList({ items }) {
  const grouped = useGroupedInventory(items);
 
  return (
    <div>
      {Object.entries(grouped).map(([category, list]) => (
        <section key={category}>
          <h3>{category} ({list.length})</h3>
          <ul>
            {list.map(item => <li key={item.id}>{item.name}</li>)}
          </ul>
        </section>
      ))}
    </div>
  );
}