FlatList optimization
- React Native course
- Intermediate
- Lesson 91/116
- 5 min
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.
Practice 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.
Starter code
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function NumberList() {
const numbers = [1, 2, 3];
// Add getItemLayout to FlatList
return (
<FlatList
data={numbers}
renderItem={({ item }) => <Text>{item}</Text>}
keyExtractor={(item) => item.toString()}
/>
);
}Sample 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,
})}
/>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What makes FlatList faster?
<FlatList data={items} renderItem={renderItem} />- Put 50 sub-components in each row
- Turn it into a ScrollView
- Set getItemLayout Correct answer
- Draw all data at once
Explanation: getItemLayout computes position without measuring.
2 Write the getItemLayout prop
<FlatList ____={(item, index) => ({ length: 60, offset: 60 * index, index })} /><FlatList getItemLayout={(item, index) => ({ length: 60, offset: 60 * index, index })} />Explanation: getItemLayout tells the row position in advance.
3 Match each prop to its role
| Term | Meaning |
|---|---|
initialNumToRender |
First rows drawn |
getItemLayout |
Skips measuring |
keyExtractor |
Unique key |
removeClippedSubviews |
Hides offscreen rows |