CODEWITHSUNDEEP
react-nativereact-native-flatlist
Rom Shiri
Rom Shiri

Reputation: 1437

ReactNative FlatList render all items at once?

I'm using ReactNative's new List component - FlatList.

It seems like FlatList renders all items at once even though the cell isn't actually visible on the screen.

<FlatList data={this.props.items} 
          keyExtractor={(item, index) => generateKey()}
         renderItem={this.renderStrip}/>

 renderItem = ({item}) => { 
   console.warn('rendered!');
   return <View style={{height:200, height: 100}} />
}

Setting 30 items and seems like 'rendered' warning was called according to the total number of the items.

I thought FlatList is similar to the way RecycleView in Android works, render an item only when it's about to be visible on the screen.

Am I missing something? Won't it decrease performance?
I wished it could render an item only when it's about to be shown.

Upvotes: 23

Views: 25222

Answers (4)

ConcernedHobbit
ConcernedHobbit

Reputation: 874

I ended up being able to solve the issue by including the windowSize field.

The docs for windowSize say:

Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing this number will reduce memory consumption and may improve performance, but will increase the chance that fast scrolling may reveal momentary blank areas of unrendered content.

By adding windowSize alongside initialNumToRender and maxToRenderPerBatch, I was able to stop rendering 90+ items at once and actually render items as I scrolled:

<FlatList
  removeClippedSubviews={false}
  data={displayedItems}
  windowSize={2}
  initialNumToRender={8}
  maxToRenderPerBatch={8}
  renderItem={<render item code here>}
  keyExtractor={item => item.itemId}
/>

Upvotes: 3

suther
suther

Reputation: 13608

Had the same issue in one of my Apps. It cost me a couple of hours to solve this Issue for me.

⇓⇓⇓

TDLR; Check out, that you don't nest your FlatList in a ScrollList (or other kind of lists).

⇑⇑⇑

Detailed Description:

ISSUE

Same as the Thread-Opener, at first, my Flatlist render only the amount of renders I defined in initialNumToRender, but immediately after that, the app starts to render the whole rest of the List.

Enviroment

I use native-base.io as UI-Library and encapsulated the Content of the Screen with the Component

Solution

I've figured out, that native-base component <Content> replace ScrollList. A FlatList inside of a ScrollList will pipe you to strange results. As I replaced the -Component for the given Screen with an <View>, all things work like expected.

Upvotes: 17

naqvitalha
naqvitalha

Reputation: 793

FlatList renders too many items in advance to get better fill rate. We have similar issues. We build RecyclerListView to workaround such problems. Very similar to RecyclerView but it is JS only. It is faster than FlatList and battle tested at Flipkart. You can try it.

Link: https://github.com/Flipkart/ReactEssentials

You can read more about it here: https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

Upvotes: 1

EnriqueDev
EnriqueDev

Reputation: 1247

it is same. In the documentation you can find the following:

In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.

So it doesn't render all items at once.

and besides:

This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.

Let me know if you need further details.

Upvotes: -1

Related Questions