How do you pick a data structure for fast merge-plus-render in a big list?

What’s up everyone? I’m working on a UI that ingests batches of items from an API and merges them into an existing list while keeping the list stable for rendering, and my current approach feels like it’s trending toward O(n log n) + extra churn when updates are frequent.

// existing: [{id, updatedAt, ...}] sorted desc by updatedAt
// incoming: same shape, may contain new + updates
function merge(existing, incoming) {
  const byId = new Map(existing.map(x => [x.id, x]));
  for (const x of incoming) {
    const prev = byId.get(x.id);
    byId.set(x.id, prev ? { ...prev, ...x } : x);
  }
  return Array.from(byId.values()).sort((a, b) => b.updatedAt - a.updatedAt);
}

If I care about long-term complexity and fewer reorders (to avoid wasted renders), is it better to keep a Map + a separate heap/tree/index for ordering, or just accept the full re-sort each batch and optimize elsewhere?

1 Like