patterntypescriptreact-nativeModerate

FlatList Optimization: Avoiding Blank Rows and Jank

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

flatlistvirtualizationscroll performanceblank rowswindowSizegetItemLayoutmemoize

Problem

FlatList with many items causes blank rows during fast scrolling, high memory usage, and dropped frames due to poor configuration defaults.

Solution

Tune windowSize, maxToRenderPerBatch, initialNumToRender, and updateCellsBatchingPeriod. Provide stable keyExtractor. Memoize renderItem with useCallback. Use getItemLayout if item heights are fixed. Set removeClippedSubviews={true} on Android.

Why

FlatList uses a virtual window around the visible area. Defaults are conservative — increasing windowSize pre-renders more screens worth of content, reducing blank areas at the cost of memory. Fixed-height items allow getItemLayout to skip expensive measurement.

Gotchas

Do NOT define renderItem inline — it causes every cell to re-render on parent state changes
removeClippedSubviews can cause rendering bugs on iOS; test carefully
Avoid setState inside onScroll — use onMomentumScrollEnd or throttle
Nested FlatLists require nestedScrollEnabled on Android

Code Snippets

Optimized FlatList with fixed item height

const ITEM_HEIGHT = 72;

const renderItem = useCallback<ListRenderItem<Item>>(({ item }) => (
  <ItemRow item={item} />
), []);

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={renderItem}
  getItemLayout={(_, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  windowSize={10}
  maxToRenderPerBatch={10}
  initialNumToRender={15}
  removeClippedSubviews={true}
/>

Revisions (0)

No revisions yet.