Flatlist rendering issue.

Expo SDK
1

I am using flatlist to render post having media like images and video and also text and i am getting following error:-

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. Object {
“contentLength”: 12258,
“dt”: 2954,
“prevDt”: 1204,
}

I have implemented purecomponent for rendering row in flatlist and also used shouldComponentUpdate wherever required to prevent re-rendering. I have used redux-thunk for updating data in flatlist.

But issue still persists.

Can you suggest any solution for the same, how to handle such large feeds. ?

2

Hi!

For this answer I am assuming you are using a (self made) API from which you want the data to render in the Flatlist that has pagination capabilities:

If you have pagination within the API you are using, I strongly recommend you to use the onEndReached and onEndReachedTreshold Props that can be used in the Flatlist component. So basically paginate further in the API when the treshold is reached, for example 0.7, add the new data from the new API call that is made by the onEndReached Prop to the data storage used by your Flatlist.

For this answer I am assuming you are either using a API that you didn’t made and has no pagination or not using a API at all to get the data(???):

Don’t render all data to the user’s viewport immediately. Store the data and only load new data when needed. This should prevent your Flatlist from being slow. You should use a similar approach as shown in the answer above, using onEndReached and onEndReachedTreshold.

I hope this helped you out a bit!

3

@rauldeheer:- I have pagination in api and i have also implemented onEndReached and onEndReachedThreshold, even i have put initialNumToRender and windowSize property for uniterrupted scrolling, but still issue persists.

This is my flatlist Code

feedPaginationCount = 50
gpsFeeds = data from api and then stored in redux and displayed
Feed = PureComponent

<FlatList ref = “flatReference” ListFooterComponent={ } onEndReached = {() => {this.onEndReached(gpsFeeds)}} bounces={false} initialNumToRender = {feedPaginationCount} windowSize={Dimensions.get(‘window’).height} onEndReachedThreshold={0.01} onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }} scrollEnabled={true} data={ gpsFeeds } renderItem={ ({ item }) => <Feed feeddata = { item } navigation={navigation}/> } keyExtractor={(item, index) => (String)(item.id)} >

4

It seems like your onEndReachedTreshold is triggered really early. I wouldn’t recommend 0.01 since that would mean more data is already getting loaded if the user just scrolls a bit. To better understand how this works, read this quote from the FlatList documentation page:

How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.

To better understand what you are working on I would like to know a few more things:

  • Is your Feed component considered big, as in: does it load allot of views and other components?
  • How much data does the Item contain?
5

@rauldeheer:- I have also tried with 0.5 earlier but issue persists, i believe issue would be inside feed component.

Regarding feed component, it has username, user profile image, then media content which would be maximum of 4 including of images/videos, then there is a text content of 4-5 lines and then two small images of favourite and comments.

Structure mentioned is as below:-

<View style = { feedContainer }>
<View style = { userContent }>
<View style = { feedImageContent }>
<Image style = { feedUserImage } source={require(‘./Images/profilePic.png’)} />

<View style = { feedDetailContent }>
{ author.name } { id }
<Text style = { modifiedOnText }>{ formattedDateString }


<View style = { mediaContent }>
<MediaGallery medias = { medias } feedId = { id } authorName = { author.name } modifiedOn = { modifiedOnText } verticalMeasure = { mediaContent.height } navigation = { navigation }/>

<View style = { extraContent }>
<View style = { feedContent }>
<View style = { feedContentView }>
<ExpandedText text={ content } textStyle={feedContentText} linesOfText={5}/>


<View style = { optionView }>
<View style = { optionContentView }>
<TouchableOpacity style = { favouriteContent } onPress={()=>{this.reDirect(‘Favourite’)}}>
<Image style = { favouriteImage } source={require(‘./Images/favorite.png’)} />
Favorite

<TouchableOpacity style = { commentContent } onPress={()=>{this.reDirect(‘Comments’)}}>
<Image style = { commentImage } source={require(‘./Images/comment.png’)} />
{commentsCount} Comments




6

That looks like a pretty big component to render 40 times at once. Have you tried rendering it 20 or maybe even 10 times?

  • Does rendering less make the performance better?
  • Can you show the amount of ram the app is using?
7

If the number of item is reduced to 20, issues doesn’t occur immediately it occurs after 7-8 scroll of pagination but with 50 issue appears with 2-3 scrolls.

8

Ok, I see. Please do the following and it (should) be fixed:

  1. Make sure FlatList is not a child of a ScrollView as ScrollView will render all child components, even those not on the screen in FlatList.
  2. Add prop removeClippedSubviews={true} to FlatList so it removes items out of view.

To learn more about FlatList performance improvements please read this article. The article is full of usefull tips and tricks to improve the performance of the FlatList.

I hope this will help.

1 Like
9

@rauldeheer :- By adding removeClippedSubViews, we face issue of smooth scrolling as we get blank space while scrolling fast.
And also using flatlist individually outside of scrollview, issue still persists.

10

Did you read the full article I sent you? If you didn’t find anything useful in the article I’ve sent you, I’m sorry to say that I am not able to help further as that were all of my options.

If you do get it figured out on your own, please post the solution in this thread and maybe consider creating a PR for the article I’ve sent you!

11

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.