A simple problem that was causing noticeable performance issues for an old react app.

import { v4 } from "uuid";
const example = ({ items }) => {
  return items.map((i) => {
    return <div key={v4()}>{items.text}></div>;
  });
};

At first glance this seems innocuous enough, a simple call to get an ID for a list item. I assumed v4() was doing something clever to ensure it was getting consistent keys. Having recently taken over the project I made a note to investigate it later and moved on to a more urgent task. Spoiler: ooooh boy, this was not something clever.