What is the best React Native list component?

This is a guest post from Simon Grimm, creator of Galaxies.dev, where Simon helps developers learn React Native through fast-paced courses and personal support.

...

If you’re developing in React Native, you’ve probably faced the need to render lists at some point. Lists are essential to most apps, from infinite scrolling feeds in social media to product catalogs in e-commerce.

However, finding the right component for efficient list rendering can be challenging.

In this article, we’ll explore the best solutions for lists in React Native, particularly focusing on performance.

When you initially got started with React Native, you possibly thought it was possible to simply iterate an array of objects, wrap them inside a ScrollView and call it a day.

Apparently, that’s a terrible idea in most cases.

Why?

Imagine your data array has 10k elements, and maybe you are not only rendering text but also images and more information. That means, your React Native app would try to render all 10,000 items at once, resulting most likely in lags, dropped frames, or in the worst case, memory problems.

It’s even directly stated in the official docs:

“ScrollView renders all its react child components at once, but this has a performance downside.”

That’s why React Native comes with dedicated List components that improve rendering.

There are 2 specific, built-in list components in React Native that will instantly improve your performance over the previous example:

• FlatList
• SectionList

Because SectionList is like a twin of FlatList with just tiny differences, we’ll focus on FlatList for the moment.

With FlatList, you get a powerful component that supports common features like:

• Pull to Refresh
• Horizontal mode
• Header/Footer/Separator components
• Scroll to index

Most of these features are pretty easy to implement, giving FlatList a simple yet powerful API.

The good news is that in some cases, this can be a great choice for your app!

Because under the hood, FlatList actually does some magic for your app:

“FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.”

This means, without additional work on your side, rendering your large datasets becomes a lot more efficient.

On top of that, you can work with memoization to make sure your list items are not re-rendering all the time, which could make the difference between a slow and snappy list.

However, at some point you might still encounter problems like drops in FPS, sluggish behavior white items while scrolling fast.

These are the signs that you should probably move on to FlashList, an even better List.

What if there was a drop-in replacement that made your lists even better?

Well, turns out there is one, and it’s called FlashList.

And it’s between 5x-10x faster than your usual FlatList!

FlashList was built by the team at Shopify to deliver instant performance upgrades to your React Native app while keeping the API mostly the same.

If you know how FlatList works, you know how FlashList works. It’s that easy.

On top of the usual FlatList props, you can now also improve the performance even further by using getItemType or estimatedItemSize, which will additionally contribute to a smaller memory footprint.

Under the hood, FlashList uses an improved version of RecyclerListView to achieve almost native like list performance.

Combined with the performance gains of the New Architecture and synchronous communication without a bridge, this is the list component React Native developers should use in 95% of the apps.

Are there downsides to FlashList?

As people say, there are no solutions, only trade-offs.

If you render incredibly long lists with different item sizes, scrolling to a particular item might not work correctly, as Aron Berezkin described in his article about the Ascension Bible app.

However, overall the trade-offs of using FlashList are minimal compared to the gains you make over using FlatList, and you should try to use it until you actually run into limitations.

And even from there, you could further investigate your performance bottlenecks, use native view components for list items, or rethink how you display data.

This article wouldn’t be complete without mentioning other ways to achieve great list performance.

The team at Margelo tried to develop an even better list called WishList but ultimately stopped development as the API got too challenging. However, you can still try to use the prototype of it today.

Additionally, the team at Candle wrapped the native iOS table view in React Native, giving you the exact look and feel of the iOS version. But this means no Android yet.

Finally, with things like React Native Skia, you could eventually just render everything on your own like Samuel described on X.

While this might turn into a future component, it’s probably not applicable for most apps and developers as it requires significant effort and understanding of Skia.

To recap this article, here’s a quick recommendation:

• Use ScrollView for really basic UIs
• Use FlatList/SectionList for simple lists and if you need header/footer/pull to refresh or more features
• Use FlashList if you want better performance - it’s a drop in replacement for most apps

On top of that you should of course follow best practices around React for reducing memory consumption of list items, components, or images through things like Expo image.

Remember to test your apps on low end devices!

You might not see substantial issues on the latest iPhone, but things become very apparent once you use older devices.

It remains to be seen whether an even better list component appears in the future, but it’s certainly an area that is paramount to the performance of your React Native app.

And the best bang for your buck right now is FlashList.

If you like React Native tips, I also created a special Expo Cheat Sheet for you!

It contains important CLI flags and syntax examples for new features like API routes, and you can download it for free here.

PS: I also talked about the topic of React Native lists on my YouTube channel 👇