Code Quiz

FlatList Memoization Broken

A memoized list row still re-renders on every scroll — find out why.

Codejavascript

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

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

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Row item={item} onPress={(id) => setSelected(id)} />
      )}
    />
  );
}

Why does every Row re-render even though it is wrapped in React.memo?

Next →FlatList Performance Optimization