uniqueBy

1/**
2 * Removes duplicate values from an array based on a derived key.
3 *
4 * @param arr - The array of items.
5 * @param keyFn - A function that returns a string or number key for each item.
6 * @returns A new array with only unique items by key.
7 */
8export function uniqueBy<T>(arr: T[], keyFn: (item: T) => string | number): T[] {
9  const seen = new Set<string | number>();
10  return arr.filter(item => {
11    const key = keyFn(item);
12    if (seen.has(key)) return false;
13    seen.add(key);
14    return true;
15  });
16}

• Flexible key-based deduplication

  Allows you to define custom logic for determining uniqueness by passing a key selector function (keyFn). This supports a wide variety of use cases like deduping by id, slug, name, etc.

• Improved performance using Set

  Uses a Set to track seen keys, which ensures fast lookups (O(1)) and makes the entire operation efficient even on large arrays.

• Preserves item structure

  Only the key is extracted for comparison — the original item is returned unchanged, maintaining full access to its properties.

• Immutability

  Returns a new array without mutating the input, which is a safe design in functional or reactive environments.

• Supports heterogeneous data

  Works seamlessly with objects, primitives, or mixed arrays, as long as a consistent key can be derived.

Tests | Examples

1test('uniqueBy - remove duplicates by id', () => {
2  const data = [{ id: 1 }, { id: 2 }, { id: 1 }];
3  expect(uniqueBy(data, item => item.id)).toEqual([{ id: 1 }, { id: 2 }]);
4});
5
6test('uniqueBy - string keys', () => {
7  const data = [{ name: 'alice' }, { name: 'bob' }, { name: 'alice' }];
8  expect(uniqueBy(data, item => item.name)).toEqual([
9    { name: 'alice' },
10    { name: 'bob' },
11  ]);
12});
13
14test('uniqueBy - empty array', () => {
15  expect(uniqueBy([], item => item)).toEqual([]);
16});
17
18test('uniqueBy - all items unique', () => {
19  const items = [{ id: 1 }, { id: 2 }, { id: 3 }];
20  expect(uniqueBy(items, item => item.id)).toEqual(items);
21});

Common Use Cases

• Deduplicating by unique identifiers

  Useful when working with arrays of objects (e.g., users, products, blog posts) and you want to ensure no duplicate IDs or slugs.

• Removing duplicates from merged datasets

  Ideal when combining two arrays from different sources and preventing duplicate entries based on a derived field.

• Simplifying data pipelines

  Helps in cleaning or normalizing arrays where objects may look different but represent the same logical entity (e.g., same user email or product SKU).

• Optimizing rendering in UI

  Ensures that React components or list views don’t render the same entity more than once if multiple representations exist in data.