React Native
FlatList optimization
Learn FlatList performance optimization.
FlatList optimization
FlatList draws large lists efficiently, but a few settings add extra speed. initialNumToRender sets how many rows render first; maxToRenderPerBatch controls rows per batch. removeClippedSubviews hides rows that leave the screen.
When you provide getItemLayout, FlatList computes position without measuring; for fixed height rows this seriously speeds up scrolling. keyExtractor gives each item a unique key, reducing re-renders. Together these props keep large lists smooth. Each prop should be tested with real data; some do not help on small lists.
getItemLayout
getItemLayout tells FlatList the size and position of each item in advance. For rows with fixed height FlatList skips the measuring step and can jump to the right row instantly. Signature: (item, index) => ({ length, offset, index }).
Example: getItemLayout={(item, index) => ({ length: 60, offset: 60 * index, index })}. Here length is the row height, offset is the start position of that row, and index is its position. It does not work with variable heights; in that case skip this prop. A wrong offset breaks the layout; keep the height equal to the real value.
Exercise Write an optimized FlatList
Write a NumberList component. The numbers array is defined: [1, 2, 3]. Use a <FlatList>; give data, renderItem, keyExtractor and getItemLayout props. Row height is 60.
Show example solution
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function NumberList() {
const numbers = [1, 2, 3];
return (
<FlatList
data={numbers}
renderItem={({ item }) => <Text>{item}</Text>}
keyExtractor={(item) => item.toString()}
getItemLayout={(item, index) => ({
length: 60,
offset: 60 * index,
index,
})}
/>
);
}
Test yourself
-
What makes FlatList faster?
<FlatList data={items} renderItem={renderItem} />
- Put 50 sub-components in each row
- Turn it into a ScrollView
- Set getItemLayout
- Draw all data at once
Show answer
Set getItemLayout — getItemLayout computes position without measuring.
-
Write the getItemLayout prop
<FlatList ____={(item, index) => ({ length: 60, offset: 60 * index, index })} />
Show answer
<FlatList getItemLayout={(item, index) => ({ length: 60, offset: 60 * index, index })} />
-
Match each prop to its role
- initialNumToRender
- First rows drawn
- getItemLayout
- Skips measuring
- keyExtractor
- Unique key
- removeClippedSubviews
- Hides offscreen rows
Next lesson: InteractionManager
