Code Quiz

React.memo Custom Comparator Trap

A custom React.memo comparator that only checks id silently drops updates to other props.

Codejavascript

const Row = React.memo(
  function Row({ item }) {
    return (
      <div>
        {item.name}: {item.count}
      </div>
    );
  },
  (prevProps, nextProps) => {
    // "only re-render when the row identity changes"
    return prevProps.item.id === nextProps.item.id;
  }
);

function List({ rows }) {
  return rows.map((item) => <Row key={item.id} item={item} />);
}

The count displayed by each Row never updates on screen even though the parent passes updated item objects. What is the bug?

Next →When React.memo Fails to Prevent Renders