Why does this list get slower as it grows?

The bench builds real arrays at the size you choose and runs each strategy on your device. The timings are measurements, not estimates.

At small n every strategy looks fine, which is exactly why the problem ships. The scan and the index separate as n grows, and the pairwise comparison leaves the frame budget long before the others are noticeable.

1{rows.map((row) => {2  // runs once per row, and scans every user each time3  const owner = users.find((user) => user.id === row.ownerId);4  return <Row key={row.id} row={row} owner={owner} />;5})}

1const usersById = useMemo(2  () => new Map(users.map((user) => [user.id, user])),3  [users],4);56{rows.map((row) => (7  <Row key={row.id} row={row} owner={usersById.get(row.ownerId)} />8))}

Complexity describes how cost grows, not how large it is. O(n²) with a tiny constant can beat O(n) with an expensive one at realistic sizes, which is why an array scan wins for a handful of items and loses badly at a thousand.

Measure before rewriting. The profiler tells you which term dominates: a flat profile across thousands of small calls points at the algorithm, while a single long call points at one expensive operation. Optimising the wrong term is how a codebase accumulates clever code that changes nothing.