hard20 pts · first answer countsreact-nativeperformance

Memoized rows still re-render

Row is wrapped in React.memo, yet every row re-renders whenever the parent state changes. Why?

const Row = React.memo(({ item, onPress }) => (
  <Pressable onPress={onPress}><Text>{item.title}</Text></Pressable>
))

<FlatList
  data={items}
  renderItem={({ item }) => (
    <Row item={item} onPress={() => select(item.id)} />
  )}
/>

A.React.memo does not work inside a FlatListB.A new onPress function is created on every render, so the shallow prop comparison fails; pass a stable callback (useCallback) and let Row call onPress(item.id)C.FlatList clones each item object before calling renderItem, so item is a new reference every time and memo can never match the old propsD.FlatList turns off memoization in release builds

← Animation stutters while JS is busy Stopping cheaters calling the API →