FlatList: Performant Virtualized Lists in React Native

Why it exists

Rendering a list with thousands of items by mapping over an array would create thousands of component instances at once, consuming huge amounts of memory and likely crashing a mobile app. Mobile devices have limited resources, so a more efficient strategy is needed for long lists.

The mental model

Think of FlatList as a virtualized list. It maintains a small "render window" of items that are currently on-screen or just off-screen. As you scroll, it unmounts components that scroll out of view and mounts new ones scrolling into view. This keeps memory usage low and constant, regardless of the list's total length.

How it works

FlatList requires two main props: data, an array of your list items, and renderItem, a function that tells the list how to render a single item from the data. To uniquely identify items for efficient updates, it uses a function you provide to the keyExtractor prop. Because it's a PureComponent for performance, it only re-renders when its props receive new references. If an item's rendering depends on state outside the data prop (like a selected item ID), you must pass this state via the extraData prop to tell FlatList that it needs to re-render its items.

When to use it

Use FlatList for any simple, long, or infinitely scrolling list of items that have a similar structure. Examples include a social media feed, a list of emails, a product gallery, or a contact list. Its built-in support for features like pull-to-refresh, separators, and multiple columns (numColumns) makes it very versatile.

When not to use it

If your list needs to be broken into logical sections with headers (like a contact list grouped by letter), use the <SectionList> component instead. For very short, static lists where performance is not a concern, a simple .map() inside a <ScrollView> might be simpler, though FlatList is generally the safer default.

One canonical example

To render a simple list of users, you provide an array of user objects to the data prop and a function to renderItem. The renderItem function receives an object containing the item (e.g., {id: '1', name: 'Alice'}) and returns a component displaying the user's name. You must also provide a keyExtractor function, like item => item.id, to give each rendered element a stable identity for React's reconciliation process.