FlatList is ITSELF already a virtualization tool (see "React for Professionals" chapter 32 for the basic principle: render only visible entries plus a buffer) – but the default settings are a compromise, not an optimum. This chapter shows how to tune ProductListScreen's FlatList for our specific use case.

Applying React.memo to ProductCard

Just like "React for Professionals" chapter 31 – the first, most important step:

// In components/ProductCard.js, right at the end:
import { memo } from 'react';
// ... component as before ...
export default memo(ProductCard);

getItemLayout: skipping layout calculation

By default, FlatList has to RENDER every item first to know its height before it can correctly compute scroll position – with a FIXED item height (our ProductCard always has a 60px image plus fixed padding, so a known total height), you can skip that:

// In screens/ProductListScreen.js:
const ITEM_HEIGHT = 84; // 60px image + 2×12px padding

<FlatList
  data={filteredProducts}
  keyExtractor={(item) => item.sku}
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  renderItem={/* ... as before ... */}
/>

getItemLayout tells FlatList every item's position/height IN ADVANCE, via a simple calculation instead of actual rendering – enables instant jumps to any scroll position (e.g. a programmatic scrollToIndex) and noticeably speeds up the initial layout calculation.

More dials: windowSize, maxToRenderPerBatch, removeClippedSubviews

<FlatList
  /* ... existing props ... */
  windowSize={5}              // default: 21 (10 screens before/after the visible area)
  maxToRenderPerBatch={10}    // how many items get processed per render batch
  updateCellsBatchingPeriod={50} // milliseconds between batches
  removeClippedSubviews={true}   // fully removes off-screen native views
/>

• windowSize: a multiple of the screen height pre-rendered BEFORE and AFTER the visible area – smaller values save memory/compute but risk visible "pop-in" on very fast scrolling.
• maxToRenderPerBatch + updateCellsBatchingPeriod together control how "chunked" rendering is – smaller batches keep the app more responsive but lengthen the time until all visible items are fully rendered.
• removeClippedSubviews: on ANDROID, fully removes scrolled-off items from the native view tree (not just made "invisible") – historically less reliable on iOS, test on BOTH platforms before using it.

Bonus: FlashList as a drop-in replacement

Shopify's @shopify/flash-list is a performance-optimized FlatList alternative with an almost identical API (often just a simple import swap) – internally uses cell recycling (existing native views get reused instead of destroyed/recreated) instead of a fresh mount for every scrolled item. For very long lists (hundreds/thousands of entries, see the "order history" virtualization from "React for Professionals" chapter 32), often the better choice over pure FlatList tuning.

npx expo install @shopify/flash-list