← Back to the library
MobileApplied · 8 min

A long list loads and scrolls slowly

“Normal accounts feel fine. Power users with years of history report blank frames and lag.”

THE PRINCIPLE

Measure the bottleneck in a release build with production-shaped data. Optimize the layer that is actually slow.

FIRST MOVES

  1. Reproduce with a large account on a representative low-end device.
  2. Add cursor pagination and return only the fields required by each row.
  3. Verify virtualization; never render an unbounded history inside ScrollView.
  4. Profile row rerenders, expensive formatting, images, shadows, and global context updates.

TOOLS: THEN → NOW

ListView / hand-rolled windowingFlatList, FlashList 2, React Native DevTools
Offset paginationStable cursor pagination

PATTERN SNAPSHOT

<FlashList
  data={transactions}
  keyExtractor={(item) => item.id}
  renderItem={renderTransaction}
  onEndReached={fetchNextPage}
  getItemType={(item) => item.kind}
/>

CLOSE THE AI. EXPLAIN THIS.

Why can replacing FlatList with FlashList fail to fix a slow first render?

Guide reviewed