In mobile apps, we spend most of the time browsing endless lists of content - a scrollable feed of posts, a stream of chat messages, a library of songs. Behind that smooth scrolling is smart engineering to keep the UI fast even with thousands of items.
In React Native, FlatList and SectionList are the two core, virtualized list components designed to render large data efficiently.
This post explains what these are, props that these provide, why you should use these, how these differ, and gives you battle-tested patterns to build fast, smooth lists.
First of all, let's know what is a virtualized list. A virtualized list (also called list virtualization or windowing) is a front-end performance technique that renders only the items currently visible in the user’s viewport and reuses DOM nodes as the user scrolls. Instead of creating all list elements at once, most items stay in a virtual state, which significantly reduces memory use and improves rendering speed when working with large datasets.
What is FlatList?
FlatList renders a single, one-dimensional list of items (rows).
- The
FlatListcomponent has two required props you will need to pass to it as a bare minimum. - The first prop is the
datathat accepts a plain array. This array contains the list of items to display. - The second prop is the
renderItemwhich takes an item from thedataand renders it into the list.
Let's see a simple FlatList example:
const menuItemsToDisplay = [
{ name: 'French Fries', id: '1A' },
{ name: 'Buttered Rice', id: '2B' },
{ name: 'Baklava', id: '3C' },
{ name: 'Tiramisu', id: '4D' },
{ name: 'Lentil Soup', id: '5E' },
{ name: 'Eggplant Salad', id: '6F' },
];
import { View, Text, StyleSheet, FlatList } from 'react-native';
const Item = ({ name }) => (
<View style={menuStyles.innerContainer}>
<Text style={menuStyles.itemText}>{name}</Text>
</View>
);
const MenuItems = () => {
const renderItem = ({ item }) => <Item name={item.name} />;
return (
<View style={menuStyles.container}>
<Text style={menuStyles.headerText}>View Menu</Text>
<FlatList
data={menuItemsToDisplay}
keyExtractor={(item) => item.id}
renderItem={renderItem}></FlatList>
</View>
);
};
An additional prop called the keyExtractor is usually passed to the FlatList component. It instructs the list to use the id of each item as React keys.
FlatList Props
FlatList provides a wide range of props to customize list behavior and appearance.
Among them, the following are most commonly used in everyday projects to structure headers, footers, separators, and scrolling direction:
-
ItemSeparatorComponent– Renders a component between each item (e.g., a thin divider). -
horizontal– Makes the list scroll left-to-right instead of vertically. -
ListHeaderComponent– A component displayed above all list items—great for search bars or filters. -
ListHeaderComponentStyle– Style object for the header wrapper (padding, margin, background). -
ListFooterComponent– A component displayed below all list items—often used for loading spinners or “End of List” messages. -
ListFooterComponentStyle– Style object for the footer wrapper, useful for centering or spacing.
To read about other props you can visit this link : FlatList
What is SectionList
SectionList renders a list grouped into sections — each section has a header and its own items. It’s still virtualized, but adds structure and features like sticky section headers.
- The
SectionListcomponent has two required props you will need to pass as a bare minimum. It is very similar to theFlatListcomponent. - The first prop is the
sectionsthat accept a plain array to display list of items. - The second required prop is the
renderItemthat takes an item from thesectionsand renders it into the list.
Let's see a simple SectionList example:
import React from 'react';
import {StyleSheet, Text, View, SectionList, StatusBar} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const menuItemsToDisplay = [
{
title: 'Main dishes',
data: ['Pizza', 'Burger', 'Risotto'],
},
{
title: 'Sides',
data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
},
{
title: 'Drinks',
data: ['Water', 'Coke', 'Beer'],
},
{
title: 'Desserts',
data: ['Cheese Cake', 'Ice Cream'],
},
];
const MenuItems = () => (
<SafeAreaProvider>
<SafeAreaView style={styles.container} edges={['top']}>
<SectionList
sections={menuItemsToDisplay}
keyExtractor={(item, index) => item + index}
renderItem={({item}) => (
<View style={styles.item}>
<Text style={styles.title}>{item}</Text>
</View>
)}
renderSectionHeader={({section: {title}}) => (
<Text style={styles.header}>{title}</Text>
)}
/>
</SafeAreaView>
</SafeAreaProvider>
);
In this code snippet, you can see that a prop called renderSectionHeader is passed. This is a callback function used to render each section’s header. These examples would be Main Dishes, Sides and so on. It renders title from the menuItemsToDisplay array.
SectionList Props
SectionList also offers many props to customize grouped lists.
These are the most frequently used to handle section headers, separators, and grouping behavior:
stickySectionHeadersEnabled – Makes section headers stick to the top while scrolling through their section.
renderSectionHeader – Renders a component above each section’s items (e.g., an A–Z header or date label).
renderSectionFooter – Renders a component below each section’s items (e.g., a summary or action button).
SectionSeparatorComponent – Renders a component between entire sections, useful for extra spacing or dividers.
To read about other props you can visit this link : SectionList
Common Props in FlatList and SectionList
Both FlatList and SectionList are built on top of React Native’s VirtualizedList, so they share a powerful set of props to control rendering, performance and user interaction. Some common props that both of these use are the following:
-
initialNumToRender– Number of items to render initially (default is 10). Increase for faster first scroll, decrease for lighter startup load. -
windowSize– Number of screenfuls worth of items kept in memory (default is 21). Adjust to balance scroll smoothness vs. memory usage. -
maxToRenderPerBatch– Maximum number of items to render in each batch while scrolling. -
removeClippedSubviews– Set to true (especially on Android) to unmount rows that scrolled out of view, saving memory. -
getItemLayout– Supplies fixed item height/width info so the list can skip measuring, enabling instant scrollToIndex and improving scroll performance.refreshing– Boolean to show a pull-to-refresh indicator.onRefresh– Callback triggered on pull-to-refresh.onEndReached– Fired when the list is close to the bottom, perfect for infinite scroll / pagination.onEndReachedThreshold– Distance from the bottom (in viewport heights) to trigger onEndReached (e.g., 0.5 = halfway).
Both FlatList and SectionList renders items lazily, which means it only renders items you visually see on the screen, and once you start scrolling up or down, those items off the screen are removed, and the new items are rendered. This form of lazy rendering is very performant and effective in rendering large lists with sectional support in mobile apps.
When to choose which?
👉 Choose FlatList if:
- Your data is naturally a single, ungrouped stream (feed, chat, search results).
- You don’t need sticky headers or per-group UI.
- You want the lightest abstraction and maximum throughput.
👉 Choose SectionList if:
- You need grouping (A–Z, by date, by category) and section headers.
- You want sticky headers without custom plumbing.
- You need visuals or logic between sections (SectionSeparatorComponent).
Both components share powerful common props for performance tuning, refreshing, and pagination. By understanding their differences and capabilities, you can confidently choose the right list type, deliver smooth scrolling on any device, and keep your app fast—even with thousands of items.
Top comments (0)