Searching for React Native FlatList Alternatives? Chances are if you are reading this blog post, it means you want to improve your React Native App’s Performance, especially if you are rendering
FlatLists and notice white bottoms when scrolling too fast. In this Article, you learn about the two most popular React Native FlatList Alternatives – RecyclerListView (by Flipkart) & FlashList (by Shopify).
The primary goal of this article is to compare the two with
FlatList and by focusing on how they work. Hopefully, this comparison will enable you to select the one that best suits your needs. If you need detailed implementation guides, you can check out their respective documentation.
What is React Native FlatList?
FlatList component is pre-built in React Native. It’s a useful interface that renders simple, flat lists quickly and efficiently. Similarly, formatted data is shown in a scrollable list using the
FlatList component. It works efficiently for large data lists where the number of list items may change over time. Instead of displaying the entire list at once, the
FlatList just renders those items that are visible on the screen.
FlatList component takes two required props: data and renderItem.
The data is the source of elements for the list, and renderItem takes one item from the source and returns a formatted component to render.
FlatList component is the de-facto interface for rendering basic, flat lists in React Native. It is performant and feature-packed. Some of its notable features include:
- Support for horizontal mode
- Header support
- Footer support
- Separator support
- Pull to refresh
- Fully cross-platform
- Configurable viewability callbacks
- Scroll loading
- Multiple column support
You can refer to the related section of the React Native documentation for a complete list of the
FlatList component’s features.
Shortcomings of React Native FlatList:
FlatList component passively renders list elements as its primary function.
FlatList only renders items that are going to appear on the screen and ignores any that have scrolled off of it in order to conserve memory and processing time. Views of off-screen list items are swapped out for appropriately spaced blank spaces.
Content render off-screen asynchronously, in order to reduce memory usage and facilitate seamless scrolling. The disadvantage of this is that if the scroll rate is higher than the fill rate, there may be brief periods where no content is displays.
The goal of this internal performance enhancement was to make
FlatList faster than other internal list rendering elements like ScrollView.
Though it aids in memory use reduction, creating and destroying views for on- and off-screen objects is computationally expensive. In the end, a sizable number of items must collect for garbage disposal. The number of views created by
FlatList when the user scrolls through the entire list is equal to the number of items in the list. As the user scrolls, views are created and destroyed.
In order to reduce memory usage and enable seamless scrolling, content is render offscreen asynchronously; hence, quickly scrolling through a big list can make visible blanks on the screen. With a quicker scrolling speed on Android, this effect may be more noticeable.
Let’s examine the 2 React Native FlatList Alternatives.
React Native FlatList Alternatives:
– What is RecyclerListView?
This is a high-performance listview for React Native and React Native Web with support for complex layouts. Created by Flipkart, an Indian e-commerce company headquartered in Bangalore.
“The listview that you need and deserve.RecyclerListView Tagline
It was built for performance, uses cell recycling to achieve smooth scrolling.”
JS only with no native dependencies, inspired by both
RecyclerView on Android and
UICollectionView on iOS. It is highly performant and is as feature-rich as the built-in
The flaws of
FlatList were taken into consideration when developing the
RecyclerListView cleverly recycles previously produced views rather than creating new views for onscreen components and destroying views for offscreen elements. This technique is known as “cell recycling“. And it allows views that are no longer visible to be used to render items.
RecyclerListView, you would need to know 3 core concepts:
- Data and layout providers – Layout Provider, Data Provider & Row Renderer
- Viewability tracker
- Virtual renderer
You specify the data, its type, and its approximate or precise dimensions through the data and layout providers.
RecyclerListView then decides whether to generate new views or reuse old views that are not visible in the viewport based on the provided types.
The viewability tracker, as its name implies, keeps track of items that are visible and tells the virtual renderer of the viewport’s status. Using this data, the virtual renderer then creates the render stack.
Refer to their GitHub Repo for more information on how to use
RecyclerListView in detail. You must read the package’s code comments because the documentation is not great.
– What is FlashList?
FlashList is another high-performance listview React Native and React Native Web (in beta), except it doesn’t support complex layouts like
RecyclerListView. Created by Shopify, a Canadian multinational e-commerce company headquartered in Ottawa, Ontario.
“Fast & performant React Native list. No more blank cells.FlashList Tagline
Swap from FlatList in seconds. Get instant performance.”
RecyclerListView are both managed and maintained by Talha Naqvi, they share a similar core idea of recycling views.
You only need to be familiar with
FlatList to use
FlashList. For optimal performance, you must pass the prop estimatedItemSize to the
FlashList with the ideal height.
Refer to their documentation for more information on how to use
Pros & Cons of RecyclerListView & React Native FlashList:
Let’s go over some pros & cons of the 2 packages.
- Used in Production by Flipkart
- Very Mature
- Easy to Create Advanced Layouts like Grids
- Better than FlatList
- Still Maintained
- Not Easy to Integrate
- Poor Documentation
- Used in Production by Shopify
- Very Easy to Integrate
- Great Documentation
- Better than FlatList
- Still Maintained
- Very Young
- Not Easy to Create Complex Layouts like RecyclerListView
Comparing React Native FlatList with RecyclerListView and FlashList:
FlashList are performant list views for React Native, as mentioned in the sections previously. But compared to the other two,
FlatList is less efficient.
FlatList is a built-in component. In order to save memory usage and support smooth scrolling, views are optimize to be render offscreen asynchronously. Offscreen objects are remove and replace with appropriately sized blank spaces. But there are drawbacks to this optimization as well.
When managing extremely large lists, creating and removing views as the user scrolls through them is inefficient and could hurt performance. It is important to note that whenever a user scrolls up or down the entire list,
FlatList generates at least as many views as there are items.
This is problematic, particularly when working with infinite lists.
– RecyclerListView & FlashList
On the other hand,
FlashList are designed to alleviate some of the drawbacks of the built-in
FlatList component mentioned above. Instead of creating and destroying views like
FlatList, they instead recycle them.
Views that are off-screen are effectively recycle to render items that are on-screen. They are more effective and significantly more performant than the
FlatList component as a result of this enhancement.
FlatList component in React Native applications should be more than sufficient if you want to render simple lists. It has excellent documentation and is quite simple to learn.
However, it is simple to encounter some of the performance issues associated with using
FlatList as mentioned above if you are working with long or infinite lists. In that case, either of the 2 packages might be a better option than FlatList.
Unfortunately, there will be a little more work involved if you decide to use the
RecyclerListView package. RecyclerListView’s documentation is not as great, and using it is not as simple as
FlatList. To become somewhat familiar with it, you’ll need to experiment with it.
FlashList package makes migrating quick and straightforward.
FlashList has better documentation than
RecyclerListView and can be used just like
FlatList. However, as this package is relativity new, there are several bugs, issues, and unfinished features on their repository.
It is typical to run into issues that require rendering a long or infinite list. The built-in
FlatList component in React Native is designed specifically to accomplish that, but it has some drawbacks as well.
FlatList component’s drawbacks were taken into account when the
FlashList package was developed. Instead of creating and destroying views as the
FlatList component does, both packages effectively recycle off-view items. If your use case involves rendering a large list of items, likely comprising multiple views’ worth of content, any of the two packages is preferable and alternative to the
RecyclerListView package is not well documented or intuitive to use. Despite the significant performance advantages it offers, utilizing the
RecyclerListView package has certain drawbacks, including poor documentation and a complex setup process.
FlashList, on the other hand, is a newcomer and relatively young, has excellent documentation, and is constantly improving.
In the end, it depends on how much performance and effort you would like to put in.
FlashList is a good place to start with, easy to work with, and has instant performance gain, but it does have quite a few bugs and features lacking. Maybe you are looking for something that is mature and battle-tested, then go for
RecyclerListView, but prepare yourself for the complex setup process and poor documentation.
Thanks for reading, if you think there are some better React Native FlatList Alternatives, or things that I might have missed out on, do let me know in the comments section below.
Useful Links & References:
- FlashList GitHub
- FlashList Documentation
- RecyclerListView GitHub
- Simple Guide for RecyclerListView
- RecyclerListView vs FlatList – LogRocket
- FlatList to FlashList – Shopify Engineering
- Measure & Improve Performance React Native – Bam Tech
Get to know about Rently at https://use.rently.com/
To get to know about more blogs visit https://engineering.rently.com/
Associate Software Engineer,
Rently Software Development Private Limited