Stop wasteful list re-renders

Performance — Intermediate React challenge.

A list of items re-renders every row whenever ANYTHING in the parent changes — even an unrelated counter. Fix it using React.memo and useCallback so only the rows whose own props actually changed re-render.

Requirements

• ListItem is wrapped in React.memo so it skips re-rendering when its props haven't changed.
• ListItem calls onRender(item.id) synchronously in its function body every time it renders, so renders are measurable.
• ItemList's onSelect handler is created with useCallback so its reference is stable across renders.
• Clicking 'Refresh' (which only changes an unrelated tick counter) causes zero ListItem re-renders.
• Selecting a different item re-renders only the previously-selected and newly-selected rows — never the others.

Signature

function ListItem({ item, isSelected, onSelect, onRender }): JSX.Element
function ItemList({ items, onItemRender }): JSX.Element

Example

<ItemList items={[{ id: 1, name: "Apple" }, { id: 2, name: "Banana" }]} />
// clicking "Refresh" → no row re-renders
// selecting item 2 → only item 2 (and the previously selected item, if any) re-render

Constraints

• Do not use index-based keys or remove the key prop from the mapped list.
• onRender must be called during render, not inside useEffect.