React Native FlatList – What is the better alternative?

Getting your Trinity Audio player ready...

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?

The 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.

The 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.

The 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:

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:

The 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.
It was built for performance, uses cell recycling to achieve smooth scrolling.”

RecyclerListView Tagline

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 FlatList component.

The flaws of FlatList were taken into consideration when developing the RecyclerListView package. 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.

To use 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.
Swap from FlatList in seconds. Get instant performance.”

FlashList Tagline

Since FlashList and 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 FlashList.

Pros & Cons of RecyclerListView & React Native FlashList:

Let’s go over some pros & cons of the 2 packages.

RecyclerListView

FlashList

Comparing React Native FlatList with RecyclerListView and FlashList:

FlatList, RecyclerListView, and 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

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, RecyclerListView and 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.

The built-in 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.

Utilizing the 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.

Conclusion:

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.

The built-in FlatList component’s drawbacks were taken into account when the RecyclerListView & 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 FlatList component.

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/