RecyclerListView vs. FlatList for long lists in React Native

Introduction

Efficiently rendering long lists has been a problem for a while in React and React Native. Doing so can be a daunting challenge, and several packages have been developed in the React ecosystem to fix it. Some of the notable solutions in React Native include the built-in FlatList component and the RecyclerListView third-party package.

The two packages have a lot in common. Both of them were optimized to a large extent for rendering longer and more complex lists. This article will compare the built-in FlatList component and the third-party RecyclerListView package by focusing on how they work.

If your interest is to learn how to render lists using the FlatList component or the RecyclerListView package, you can check their respective documentation. The primary goal of this article is to compare the two by focusing on how they work.

Hopefully, this comparison will help you pick one that meets your use case.

What is React Native’s FlatList component?

The built-in FlatListcomponent is a convenience wrapper for the VirtualizedList component. VirtualizedList is the base implementation for FlatList and SectionList components.

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:

• Support for horizontal mode
• Header support
• Footer support
• Separator support
• Pull to refresh
• Fully cross-platform
• Configurable viewability callbacks
• Scroll loading
• Multiple column support

For a complete list of features of the FlatList component, you can check the corresponding section of the React Native documentation.

Primarily, the FlatList component renders list items lazily. To reduce memory usage and processing time, FlatList renders items just about to appear on the screen and removes those that have scrolled offscreen. It replaces views for offscreen list items with appropriately spaced blank spaces.

It also renders content asynchronously offscreen to constrain memory and enable smooth scrolling. This, however, has the downside of momentarily showing blank content if the scroll rate is faster than the fill rate.

This built-in performance optimization was intended to make FlatList more performant than other built-in list rendering components like ScrollView.

Despite being feature-rich and more performant, FlatList has its shortcomings. Though creating and destroying views for onscreen and offscreen items helps to reduce memory usage, it is computationally expensive. In the end, lots of objects have to be garbage collected. If the user scrolls through the whole list, FlatList creates as many views as items in the list — creating and destroying views as the user scrolls.

Because content is rendered asynchronously offscreen to constrain memory and enable smooth scrolling, quickly scrolling through a long list can create visible blanks on the screen. This effect can be more pronounced on Android with faster scrolling speed.

What is the RecyclerListView package?

Unlike FlatList, a built-in component, RecyclerListView is a third-party package for rendering a long list of items. It has support for React Native and React Native Web, and you can install it like so:

# Using npm

npm install recyclerlistview

# Using yarn

yarn add recyclerlistview

RecyclerListView is a JavaScript-only list view without any native dependencies. This package was 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.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Some of its notable features include:

• Support for horizontal mode
• Footer support
• It is cross platform, so it works on the web
• Supports staggered grid layouts
• Supports variable height items
• Instant layout switching from GridView to ListView and vice versa
• End reach detections
• Scroll position preservation

The RecyclerListView package was built with the shortcomings of FlatList in mind. Instead of creating views for onscreen elements and destroying views for offscreen elements, RecyclerListView intelligently recycles previously created views.

The RecyclerListView package has three building blocks, namely:

• Data and layout providers
• Viewability tracker
• Virtual tenderer

It is through the data and layout providers that you specify the data, its type, and estimated or exact dimensions. RecyclerListView then uses the specified types to decide whether to create new views or reuse existing views that are not visible in the viewport.

The viewability tracker, like its name suggests, tracks visible items and informs the virtual renderer about the state of the viewport. The virtual renderer then uses this information to generate the render stack.

Comparing FlatList and RecyclerListView

As mentioned in the preceding sections, FlatList and RecyclerListView are performant list views for React Native and React Native Web. FlatList, however, is less performant than RecyclerListView.

FlatList is a built-in component. It was optimized to render views asynchronously offscreen to constrain memory and enable smooth scrolling. It destroys offscreen items replacing them with appropriately sized blank spaces. This optimization, however, comes with its shortcomings as well.

Creating and destroying views as a user scrolls through very long lists is inefficient and might result in a performance hit when handling very long lists. It is worth mentioning that FlatList creates at least as many views as there are items if a user scrolls up or down through the entire list. This is problematic, especially when dealing with infinite lists.

RecyclerListView, on the other hand, is built to address some of the shortcomings of the built-in FlatList component highlighted above. Instead of creating and destroying views like FlatList, RecyclerListView instead recycles them.

Offscreen views are efficiently recycled to display items that are in view. Because of this optimization, the RecyclerListView package is more efficient and a lot more performant than the FlatList component.

If you are looking to render simple lists in a React Native application, the built-in FlatList component will most likely suffice. It is very easy to pick up and has good documentation.

However, if you are dealing with long or infinite lists, it is easy to run into some of the performance bottlenecks that come with using FlatList as highlighted above. In that case, the RecyclerListView package might be a better option than FlatList.

Unfortunately, if you choose to use the RecyclerListView package, you will need to do a little more work. Using RecyclerListView is not as straightforward as FlatList, and its documentation is not that great. You will need to play with it to attain some level of familiarity.

Conclusion

It is common to come across problems that require rendering a long or infinite list. React Native has the built-in FlatList component optimized for doing just that, but this built-in solution also has its shortcomings.

The RecyclerListView package was developed to address the limitations of the built-in FlatList component. It supports React Native and React Native Web.

As its name suggests, the RecyclerListView package efficiently recycles off-view items instead of creating and destroying views as the FlatList component does. RecyclerListView is a better option than the FlatList component if your use case involves rendering a long list of items, probably several views worth of content.

Though the FlatList component is well documented and easy to pick up, the RecyclerListView package is not. The downside of using the RecyclerListView package (despite the immense performance benefits it brings) is that it is difficult to set up and has relatively poor documentation.

If there are some similarities or differences between FlatList and RecyclerListView that I have missed, do let me know in the comments section below.

LogRocket: Instantly recreate issues in your React Native apps.

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.

Start proactively monitoring your React Native apps — try LogRocket for free.