Phase 2: React Native & Cross-Platform

Performant lists with FlatList & SectionList

Intermediate ~3 min read
Think of it this way A friendly analogy. Read this if the technical version feels dense. Show Hide

Imagine you're trying to find a book in a really huge library, like one that goes on forever! If the library had to put every single book from the whole world on one giant table for you to look through, it would be a huge mess. It would take forever to set up, fill up all the space, and be super heavy. Even if you only wanted to read one book, the library would have to bring out all of them. That's kind of like how some computer apps used to show long lists of things. If you had a list of a thousand friends on your phone, the app would try to draw all thousand friends' names on the screen at once, even the ones you couldn't see yet. This made the phone slow and tired, like it was carrying all those books!

But what if the library had a super smart, special moving shelf system? When you walk into an aisle, it only brings the books for that aisle into view. As you walk further down, the books you just passed disappear to save space, and new ones smoothly slide into view. It's like the shelves know exactly what you're looking at right now, plus a few books just before and after, so it feels smooth and instant. This clever trick is what FlatList does for your phone apps. Instead of drawing all the friends' names, it only draws the ones you can see on the screen, plus a few extra just above and below. As you scroll, it quickly swaps out the old names for new ones, without ever trying to draw everything at once. It's super efficient!

To make this special moving shelf work, you just tell it a few things: first, data – "Here's the whole list of all my friends (all the books in the library)." Second, renderItem – "For each friend, draw their name and picture like this (how each book cover looks)." And third, keyExtractor – "And here's how to uniquely identify each friend, like each book having a special number, so the shelves don't get confused." This means your phone only has to focus on a small part of the list at a time. It's much faster and uses less energy, so your apps feel snappy and smooth. And if you have a library where books are grouped into different sections, like "Mystery," "Science Fiction," and "Fantasy," then SectionList is like an even smarter shelf system that knows how to keep those groups organized with their own special headers!

So when you build an app that needs to show a really long list – maybe a list of video games, or all the ingredients for a giant recipe book, or posts from your favorite creator – you use FlatList or SectionList. This means your app will stay fast and easy to use, even with tons of information, making your users happy because their phone isn't slowing down or running out of battery just to look at a list. It's like having the biggest library in the world that still feels easy to navigate!

When building mobile apps, displaying long lists of items, like a feed of posts or a long menu, can severely impact performance if not handled correctly. Simply mapping over an array with ScrollView renders every single item, even those off-screen, consuming excessive memory and CPU. React Native's FlatList is designed to solve this exact problem. It's a "virtualized" list component, meaning it only renders items that are currently visible on screen, plus a small buffer above and below. As the user scrolls, FlatList efficiently recycles and re-renders only the necessary items, leading to significantly smoother scrolling and reduced memory footprint, crucial for a native-like user experience.

FlatList requires three primary props: data (your array of items), renderItem (a function that takes an item and returns the JSX to render for it), and keyExtractor (a function to extract a unique, stable key for each item, vital for React's reconciliation process and optimal performance). For lists where items are grouped into distinct sections, like a contacts list with A-Z headers or a menu categorized by food type, SectionList is your go-to. It builds upon FlatList's virtualization but adds robust support for section headers and footers. SectionList uses a sections prop (an array of objects, each with a title and a data array) and renderSectionHeader to display these groupings effectively.

The choice between FlatList and SectionList boils down to your data structure: FlatList for a single, flat array of items, and SectionList for grouped, sectional data. Both components come with advanced props for handling features like pull-to-refresh, infinite scrolling, empty list states, and custom separators, making them highly versatile. Mastering these components is fundamental for building performant and scalable React Native applications, ensuring your users enjoy a fluid and responsive experience regardless of the list's length. Always prefer FlatList or SectionList over ScrollView for lists that might contain many items to leverage their built-in performance optimizations.

Key Takeaways

  • FlatList and SectionList use virtualization to render only visible items, significantly improving performance for long lists.
  • Choose FlatList for displaying a simple, flat array of data.
  • Opt for SectionList when your data is grouped into distinct sections with headers.
  • Essential FlatList props: data, renderItem, keyExtractor (for uniqueness and performance).
  • Always prefer these components over ScrollView for lists that may grow large to ensure a smooth user experience.

Code Example

javascript
Preview

How this code works

This code creates a highly efficient, scrollable list of items using React Native's FlatList component. Its primary job is to take an array of data and render each piece of data as a visually distinct item within a long, scrollable view, optimized for performance, especially with many items. The FlatList component itself handles all the complex logic for rendering only what's visible on screen, rather than attempting to render every item at once.

To achieve this, the FlatList relies on a few key props. The data prop receives the array of objects (like the data variable) that will be displayed in the list. The renderItem prop is a function that tells FlatList how to draw each individual item; it receives an object containing the current item from the data array, which is then styled using View and Text components. Crucially, keyExtractor is provided to give each item a unique identifier, usually item.id. This is vital for React to efficiently track items when they are added, removed, or reordered, significantly improving performance and preventing rendering bugs that might otherwise occur in long lists.

Related Articles

Hand-picked reads to go deeper on core components & styling.

Back to Mobile Developer Roadmap