In this lesson, you will learn how to prevent app lag by using virtualization to efficiently render long lists of data.
When you have a long list of items—like a contact list with hundreds of entries—rendering them all at once can overwhelm your phone’s memory and cause the interface to stutter or "jank." If you simply map over an array and return components inside a standard ScrollView, React Native tries to draw everything at once, even the items far off-screen.
The Power of Virtualization
Virtualization solves this by only rendering the items currently visible on the screen. As the user scrolls, components that leave the view are recycled or unmounted, and new ones are created just in time. This keeps the memory footprint low and the scrolling experience buttery smooth.
In React Native, the primary tool for this is the FlatList component. Instead of creating a View for every single item in your array, FlatList acts as a manager that only keeps the "active" items in your visual tree.
How to Implement It
To use FlatList, you provide it with the data (your array) and a renderItem function that tells React Native how to draw each individual row:
import { FlatList, Text } from 'react-native';
const MyList = () => {
const data = [{ id: '1', name: 'Alice' }, { id: '2', name: 'Bob' }, ...];
return (
<FlatList
data={data}
renderItem={({ item }) => <Text>{item.name}</Text>}
keyExtractor={item => item.id}
/>
);
};
By providing a keyExtractor (to help React uniquely identify items) and defining a performant renderItem, the component handles all the heavy lifting of loading and unloading components as the user moves through the list. You no longer need to worry about manually managing the scroll position or clearing out old elements; the virtualization engine handles that logic automatically.
Key Takeaway: Never render long lists with standard loops or mapping in a ScrollView; use the FlatList component to automatically virtualize your data and keep your app performance snappy.