Code Quiz

FlatList memoization broken by inline callback

A React.memo item still re-renders on every list update — spot why this optimization fails.

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);

  const renderItem = ({ item }) => (
    <Row item={item} onPress={(id) => setSelected(id)} />
  );

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

The Row is wrapped in React.memo but still re-renders every time `selected` changes. What is the bug?

← PreviousEliminating Jank in React Native Next →FlatList Re-render & Thread Optimization