What are the key FlatList performance settings (such as windowSize, initialNumToRender, and getItemLayout)?

Short answer

getItemLayout removes the need to calculate item dimensions dynamically, speeding up direct scrolling; windowSize sets the number of offscreen windows to retain; and initialNumToRender sets the initial number of rendered items.

Explanation

To calculate item positions accurately, FlatList needs to measure each item after rendering. If items have fixed height, providing getItemLayout removes these calculations and enables immediate, smooth jumps with scrollToItem. Reducing windowSize lowers RAM use, while setting initialNumToRender to fit the first screen improves initial load time.

Code example

const ITEM_HEIGHT = 70;

const getItemLayout = (_: any, index: number) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={users}
  getItemLayout={getItemLayout}
  initialNumToRender={8}
  windowSize={3}
  removeClippedSubviews={true}
  renderItem={renderRow}
/>;

Common mistakes

• Using getItemLayout when items have variable, dynamic dimensions and heights, causing overlap and visual distortion in the list.

Follow-up questions

• Why is FlatList a much better choice than ScrollView for long lists in React Native?

Sources

• React Native docs — Optimizing FlatList Configuration