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.
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:
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.
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.
Some of its notable features include:
Learn more →GridView to ListView and vice versaThe 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:
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.
FlatList and RecyclerListViewAs 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.
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 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.
We show how to use Goxgen to scaffold a full-stack React app. See how to integrate React with Go and modify Goxygen to suit your project requirements.
Express.js is a Node.js framework for creating maintainable and fast backend web applications in JavaScript. In the fast-paced world of […]
Web components are underrated for the performance and ergonomic benefits they provide in vanilla JS. Learn how to nest them in this post.
Angular’s new defer feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.
