list performance virtualize

Use a List Virtualizer for Any List

Use a list virtualizer like LegendList or FlashList instead of ScrollView with mapped children—even for short lists. Virtualizers only render visible items, reducing memory usage and mount time. ScrollView renders all children upfront, which gets expensive quickly.

Incorrect (ScrollView renders all items at once):

function Feed({ items }: { items: Item[] }) {
  return (
    
      {items.map((item) => (
        
      ))}
    
  )
}
// 50 items = 50 components mounted, even if only 10 visible

Correct (virtualizer renders only visible items):

function Feed({ items }: { items: Item[] }) {
  return (
     }
      keyExtractor={(item) => item.id}
      estimatedItemSize={80}
    />
  )
}
// Only ~10-15 visible items mounted at a time

Alternative (FlashList):

function Feed({ items }: { items: Item[] }) {
  return (
     }
      keyExtractor={(item) => item.id}
    />
  )
}

Benefits apply to any screen with scrollable content—profiles, settings, feeds, search results. Default to virtualization.