Code Quiz

Broken React.memo Optimization

A memoized list item still re-renders on every parent update—find out why.

Codejavascript

const ListItem = React.memo(({ item, onSelect }) => {
  console.log('render', item.id);
  return <li onClick={() => onSelect(item.id)}>{item.name}</li>;
});

function List({ items }) {
  const [selected, setSelected] = useState(null);

  const handleSelect = (id) => setSelected(id);

  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} item={item} onSelect={handleSelect} />
      ))}
    </ul>
  );
}

Every ListItem re-renders whenever any item is selected, defeating React.memo. What is the bug?

Next →How React Bails Out of Re-rendering