Reactopia | Reusable React developer tools

Components

groupBy

Group an array by key or selector function.

LiveutilityReact, Web, React NativeUpdated 2026-10-07MIT License Source on GitHub Report Issue

cn sleep

Introduction

Group an array of objects by a key or selector function. No dependencies.

Platform: TypeScript / JavaScript (any environment).

Utility

export function groupBy<T, K extends string | number | symbol>(
  items: T[],
  keyFn: (item: T) => K
): Record<K, T[]> {
  return items.reduce(
    (acc, item) => {
      const key = keyFn(item);
      (acc[key] ??= []).push(item);
      return acc;
    },
    {} as Record<K, T[]>
  );
}

Example

const byStatus = groupBy(tasks, (t) => t.status);

Footer

For large lists, consider indexing once and reusing the map instead of regrouping on every render.