Flatlist performance and loading mechanism

[alickcai]

Description

I'm testing initial performance of Flatlist (without any optimization code) and found something interesting:

• it used 7.37 seconds to finish loading of 300 simple numbers
• after initial batch of load (<100 numbers) is finished, system loaded 10 numbers per batch, but repeat start from 1-100, 1-110,1-120...until 1-300 (so in total around 3000 times)

I don't understand this mechanism as well as long duration to load just 300 numbers. Maybe somewhere is wrong? Thanks in advance for help and clarifications.

Since this is testing only for initial performance, pls forget any optimization solution temporarily.

Version

0.68.2

Output of npx react-native info

{ "name": "myunittest", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject" }, "dependencies": { "@react-native-async-storage/async-storage": "^1.17.7", "@react-native-community/netinfo": "8.2.0", "@react-navigation/native": "^6.0.10", "@react-navigation/native-stack": "^6.6.2", "axios": "^0.27.2", "cos-js-sdk-v5": "^1.3.9", "expo": "~45.0.0", "expo-av": "~11.2.3", "expo-camera": "^12.2.0", "expo-media-library": "~14.1.0", "expo-web-browser": "^10.2.1", "react": "17.0.2", "react-native": "0.68.2", "react-native-countdown-component": "^2.7.1", "react-native-radio-buttons-group": "^2.2.11", "expo-file-system": "~14.0.0" }, "devDependencies": { "@babel/core": "^7.12.9" }, "private": true }

Steps to reproduce

import React from "react"; import { StyleSheet, Text, View, FlatList } from "react-native";

export default function App() { const list = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 260, 261, 262, 263, 264, 265, 266, 267, 268, 269, 270, 271, 272, 273, 274, 275, 276, 277, 278, 279, 280, 281, 282, 283, 284, 285, 286, 287, 288, 289, 290, 291, 292, 293, 294, 295, 296, 297, 298, 299, 300, ];

console.log(Date.now());

function renItem({ item, index }) { if (index === 299) console.log(Date.now()); return <Text style={{ width: 100 }}>{item}</Text>; }

return ( <View style={styles.container}> <FlatList data={list} renderItem={renItem} showsVerticalScrollIndicator={true}></FlatList> </View> ); }

const styles = StyleSheet.create({ container: { backgroundColor: "fff", justifyContent: "center", alignItems: "center", marginVertical: 36, paddingVertical: 16, }, });

Snack, code example, screenshot, or link to a repository

[alickcai]

Don't know why codes on Return are not shown, post again

return ( <View style={styles.container}> <FlatList data={list} renderItem={renItem} showsVerticalScrollIndicator={true}></FlatList> </View> );

[DigitalZebra]

I recommend taking a look at this resource to help understand the performance characteristics of FlatList and what you can do to tweak/optimize for your use case: https://reactnative.dev/docs/optimizing-flatlist-configuration

[alickcai]

yes，I have read it. Yet I just want to understand initial performance of RN on Flatlist, seems not good enough... thanks anyway for your advice, cheers.

[mmmoussa]

@alickcai did you test this on an Android device running Android 13 by any chance? I have encountered an issue where flatlist performance is massively degraded on Android 13.

[alickcai]

not yet, I actually tested all optimization solutions as I know, saying better than no but not that much... I have to use traditional solution, i.e. pagination to limit data as less as possible.

[GenoD]

flatlist performance is massively degraded on Android 13.

@mmmoussa is your flatlist inverted by chance? We experienced a huge drop in performance on Android 13 as well and found it to be the inverted prop on flatlists. Implementing this solution was a good patch fix

[mmmoussa]

Thanks @GenoD! We did end up finding the cause to be the inverted prop as well and we ended up fixing it by reversing our data before feeding it to the list and then also inverting all logic that made use of item index.