The Virtualization Concept

FlatList only renders items currently on screen (plus a buffer). It recycles views. Blank spaces happen when the scroll is faster than the render.

getItemLayout

If your items have fixed height, implement getItemLayout. It allows RN to calculate scroll offset without rendering content. Massive performance boost.

RenderItem Memoization

Wrap your item component in React.memo. Ensure renderItem is a stable function reference (don't define it inline cleanly).

WindowSize & InitialNumToRender

Reduce windowSize to save memory (default is 21 screens!). Set it to 5. Match initialNumToRender to exactly what fills the first screen.

keyExtractor Speed

Keep it simple. item.id. Don't generate random keys or JSON.stringify objects on the fly.

FlashList Alternative

Shopify's FlashList uses cell recycling (like UICollectionView) instead of view destruction. It's often 5x faster on Android.

Debugging Performance

Use the Performance Monitor overlay. Check the JS FPS. If it drops during scroll, your render logic is too heavy.