Use Flashlist instead of Flatlist for your React native app

Introduction

If you try to create a scrollable component in React Native, the usage of ScrollView always comes to mind, which enables users to navigate through content that exceeds the dimensions of the display.

The issue with ScrollView is when we have a huge list, we can see a huge drop in performance ( higher CPU usage, higher Memory usage, and a drop in Frames), this is when it is recommended by the React Native Official Page to use FlatList

What is FlatList

FlatList is a performant component used in React Native to render large lists of data efficiently. It’s designed to optimize performance by only rendering the currently visible items on the screen, rather than rendering the entire list at once.

Key differences from other list components:

• Performance: FlatList is specifically optimized for handling large datasets, making it much faster than traditional list components like ScrollView when dealing with many items.

• Virtualization: It uses techniques to improve performance by only rendering the visible items, reducing memory usage, and improving scrolling smoothness.

• Features: FlatList offers a rich set of features like header/footer support, pull-to-refresh, infinite scrolling, and section support, making it versatile for various use cases.

• Flexibility: It supports vertical and horizontal layouts, allowing you to create different list styles.

When to use FlatList:

• When you have a large dataset to display.

• When you need to optimize performance for scrolling.

• When you require features like infinite scrolling, pull-to-refresh, or section headers.

Introduction of Flashlight

While both FlatList and FlashList are components designed to efficiently render large lists of data in React Native, FlashList is generally considered a performance improvement over FlatList.

Key advantages of FlashList over FlatList:

• Higher frame rates: FlashList often achieves smoother scrolling and animations due to better optimization.

• Reduced blank cell visibility: FlashList is more efficient in preventing empty cells from appearing during scrolling.

• Improved recycling: FlashList’s recycling mechanism is more effective, leading to better performance.

• Native view for first render: FlashList uses a native view to enhance initial render performance.

Installation

npm install @shopify/flash-list

Example

import React from 'react';
import { Text, View } from 'react-native';
import { FlashList } from '@shopify/flash-list';

interface Property {
id: number;
title: string;
}

const data: Property[] = [
{ id: 1, title: 'Long view' },
{ id: 2, title: 'Item 2' },
// ... more items
];

const PropertyList = () => {
const renderPropertyList = ({ item }: { item: Property }) => (
<View style={{ padding: 10 }}>
<Text>{item.title}</Text>
</View>
);

return (
<FlashList
data={data}
renderItem={renderPropertyList}
keyExtractor={(item) => item.id.toString()}
estimatedItemSize={50} // Estimate the average height of an item
/>
);
};

export default PropertyList;

FlashList: Use the FlashList component with the following props:

• data: The array of data to be rendered.

• renderItem: The function to render each item.

• keyExtractor: A function to extract a unique key for each item.

• estimatedItemSize: An estimated height of each item for performance optimization.

• For complex list items, consider using getItemType to improve performance.

• Measure performance differences between FlatList and FlashList in your specific use case.

• Explore other props and features offered by FlashList for further customization

Conclusion

To switch from the usage of FlatList to Flashlist is pretty straightforward, and can bring better performance to your app.

if you are using a good app architecture, you can achieve this fast ( just change the FlatList, with a Flashlist, and test the app)

otherwise, it might be a pain in the ass to do that, but for a faster app, do it