Why FlatList performance matters

Large lists are common in production apps (feeds, catalogs, chats). Poor list hygiene causes jank, input latency, and memory spikes. This guide documents a practical checklist, measured on mid-range Android devices and older iOS hardware.

Baseline & methodology

• Enable Performance Monitor (FPS/JS) and sample interactions (scroll, tap, pull-to-refresh).
• Record Flamegraphs with Hermes profiling and Android Studio profiler.
• Capture memory snapshots before/after interactions.

Virtualization & windowing

• Prefer windowSize = 5–9 for content-heavy rows; reduce for lightweight rows.
• Set initialNumToRender to the minimum to fill the viewport + 1 row.
• Use removeClippedSubviews on Android to lower memory pressure in long lists.

Layout calculations

• Implement getItemLayout for constant-height rows to avoid expensive layout passes.
• For variable heights, precompute approximate heights or use sectioned virtualization.

Stable keys & rendering purity

• Always provide a stable, unique keyExtractor.
• Memoize row components with React.memo and selector-based props.
• Replace inline lambdas/objects with useCallback / useMemo.

Image & media considerations

• Use thumbnails (progressive loading), cache aggressively, and avoid layout shifts.
• Defer heavy media (video) offscreen; consider intersection observers where possible.

This playbook reduced jank in production apps with 10K+ item feeds, improving user retention and engagement metrics.