React event delegation performance large lists

Medium

In a React application, you're building a dynamic list of thousands of clickable items. Each item needs to track when it's clicked. Which implementation would be most performance-efficient and why?

ReactEvent delegationPerformance optimizationReact eventsDom manipulation

1function ItemList() {
const [items] = useState(generateThousandItems());

const handleItemClick = (event) => {
  const itemId = event.target.dataset.itemId;
  // Process item click
};
8
return (
  <div className="item-container" onClick={handleItemClick}>
    {items.map(item => (
      <div 
        key={item.id}
        className="item"
        data-item-id={item.id}
      >
        {item.content}
      </div>
    ))}
  </div>
);
22}

In a React application, you're building a dynamic list of thousands of clickable items. Each item needs to track when it's clicked. Which implementation would be most performance-efficient and why?

Hint