I am building a new mobile app at my company in React Native (I am the only one with React Native experience). I also cannot much share code due to privacy and security reasons but I am not asking for specific code, just suggestions.
In this new app I am using a <FlatList/> to render an array of dynamic slides. The core functionality of the app is for users to work through a decision tree. There are many decision trees in our database.
When the user has made a selection to determine the tree they will get, I fetch the first 3 levels of nodes, each time they get to the 2nd to last level, I fetch a new batch of nodes.
I then have some const slides = useMemo(...) which then determines which nodes need to be rendered. This slides array is passed into the data attribute of my FlatList and then I have a function renderItem which returns the relevant component based on the item in the slides array.
Of course, with a big tree, this array could grow a lot, and thus the FlatList would be rendering countless components.
I am guessing this could be the reason for the log:
LOG VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 2751, "dt": 38699, "prevDt": 539}
I have considered perhaps only rendering the current item, as well as the items prior and after the current item, so that only 3 items are in the FlatList at all times.
I am not sure if this would solve the problem, as the items in the FlatList would still be changing.
I am also not sure how I would handle the indexing, but I am sure I can work that out myself.
But yeah, I guess my main point of concern is how to improve performance with my FlatList, given the data can be quite big and dynamic.
Thanks