How do you render lists with FlatList?

Question

Accepted Answer

**FlatList** is React Native's component for efficiently rendering **scrollable lists** of data. It renders items **lazily** (only what's visible), making it performant for long lists — far better than mapping over data in a ScrollView. ## FlatList — efficient lists ```jsx import { FlatList, Text, View } from 'react-native'; function UserList({ users }) { return ( item.id} // unique key per item (important!) renderItem={({ item }) => ( // how to render each item {item.name} )} /> ); } ``` FlatList takes the **data** array, a **renderItem** function (rendering each item), and a **keyExtractor** (unique keys) — and renders items efficiently. ## Why FlatList (not ScrollView + map) ```text ❌ ScrollView with data.map(...) → renders ALL items at once (even off-screen) → slow/memory-heavy for long lists ✅ FlatList → renders only VISIBLE items lazily (virtualization); recycles as you scroll → performant for long/large lists → Use FlatList for any non-trivial list; ScrollView only for small, fixed content. ``` ## Useful FlatList features ```text ✓ onEndReached → load more data when scrolling near the end (INFINITE SCROLL / pagination) ✓ refreshing / onRefresh → PULL-TO-REFRESH ✓ ListHeaderComponent / ListFooterComponent / ItemSeparatorComponent ✓ numColumns → grid layout; horizontal → horizontal list ✓ SectionList → for sectioned/grouped lists ``` ## Why it matters Understanding FlatList is essential because **displaying lists of data is a near-universal need** in apps, and FlatList is the standard, performant way to do it in React Native, so it's must-know knowledge. Almost every app shows lists (feeds, messages, search results), and doing so efficiently is important. The key insight is that **FlatList renders items lazily** (only what's visible, via virtualization, recycling as you scroll) — making it performant for long lists, in contrast to the common mistake of using a **ScrollView with `data.map()`** which renders all items at once (even off-screen), causing slowness and memory problems for long lists. Understanding to **use FlatList for any non-trivial list** (and ScrollView only for small, fixed content) is important practical knowledge that prevents real performance issues. Understanding the basic usage (the `data` array, `renderItem` function, and `keyExtractor` for unique keys) is necessary for rendering lists. Understanding **useful features** — `onEndReached` (for infinite scroll/pagination, loading more data near the end — a very common need), pull-to-refresh, header/footer/separator components, grid and horizontal layouts, and SectionList for grouped lists — covers the common list requirements apps have. Since displaying lists efficiently is a near-universal app requirement and FlatList (with its lazy rendering/virtualization) is the standard, performant React Native solution — far better than the naive ScrollView+map approach — understanding FlatList is essential, frequently-applied React Native knowledge — a core component used in nearly every app to display data lists, where understanding its efficient lazy rendering and features (like infinite scroll and pull-to-refresh) is fundamental to building performant, functional lists, a standard skill for React Native development.