0

I have a large list approximately 250+ Items that is inserted in the Flatlist on render it is very slow but i think it is manageable. My real problem is about the real time listener which is very active and always updating the state of the list. maybe 1 item per 100ms. after some time listening to the data. I got this warning Excessive number of pending callbacks: 501 and the application become more delay to the touch response. how can i optimize it? is there a better way to load a large list?

Here is my sample code:

    import React, { FunctionComponent, useState, useEffect, useRef } from "react";
    import { View } from "react-native"
    
        const Sample : FunctionComponent<any> = props => {
        
        // contains 250+ items
        const [list, setList] = useState<any[]>();
        
          useEffect(() => {
//updates the list everytime it catches a data
            myListener((somevalue) => setList(somevalue))
          };
        
        // very slow
        render(){
            <FlatList
                      data=[list]
                      renderItem={renderItem}
                      getItemLayout={getItemLayout}
                      initialNumToRender={initialItemRender}
                      maxToRenderPerBatch={5}
                      keyExtractor={(item, index) => item.value}
                    />
        }
        
        
        }

This is only my sample code. if you have an idea on better way optimizing the list. i'll appreciate it

Mervzs
  • 1,114
  • 7
  • 21
  • Have a look at [this answer](https://stackoverflow.com/questions/44384773/react-native-100-items-flatlist-very-slow-performance). – Shahnawaz Hossan Jul 13 '20 at 10:16
  • take a look at [React Native FlatList optimize doc](https://reactnative.dev/docs/optimizing-flatlist-configuration) – flix Jul 13 '20 at 10:16
  • You also can check this: https://reactnative.dev/docs/virtualizedlist#docsNav – Peter Jul 13 '20 at 10:21
  • Thank you for the suggestions. I also tried optimization on flatlist. I think the performance get better a little bit. but still laggy. because all of the item in the list is updating, every time new data is listened. triggering 5-10 times per second. is there any optimization method for this? – Mervzs Jul 13 '20 at 23:58

0 Answers0