Code Quiz

Memoized List Item Still Re-renders

A React.memo list item re-renders on every parent update despite virtualization — find why.

Codetypescript

const Row = React.memo(({ item, onPress }: RowProps) => {
  console.log('render', item.id);
  return (
    <Pressable onPress={onPress}>
      <Text>{item.label}</Text>
    </Pressable>
  );
});

function List({ data }: { data: Item[] }) {
  const [count, setCount] = useState(0);

  const renderItem = useCallback(
    ({ item }: { item: Item }) => (
      <Row item={item} onPress={() => setCount(c => c + 1)} />
    ),
    []
  );

  return (
    <FlatList
      data={data}
      keyExtractor={(i) => i.id}
      renderItem={renderItem}
    />
  );
}

Every visible Row re-renders whenever ANY row is tapped, even though Row is wrapped in React.memo. What is the bug?

Next →Diagnosing FlatList Scroll Jank