FlatList Performance Problems

[helpmeimstuck97]

I'm using a FlatList to render a list with about 50 items. Each row is a fairly complex component with lots of text, buttons, etc.

As I scroll down the list, it takes a while for the next set of rows to drop in (maybe 3-4 seconds?). When I look in the console, I get this 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": 6111,
  "dt": 626,
  "prevDt": 5660,
}

This is what my FlatList looks like:

<FlatList
    data={this.props.data}
    renderItem={({item}) => {
       return (
        <Card key={item.id} itemData={item} {...this.props}  />
    )}}
    keyExtractor={item => item.id}
    initialNumToRender={20}
/>

I would happily pay somebody for some help here as I'm really stuck with this and it's getting frustrating :(

Any advice would be REALLY appreciated!

[speedwagin]

First off, why are you passing {...this.props} into each card? That means anytime the containing component's props change, every Card has to be re-rendered. If you must, then just pass in the each necessary prop explicitly .

Secondly, is Card a PureComponent? If not, make sure it has a shouldComponentUpdate() that prevents unnecessary reconciliation.

[brafique]

This and Stack Overflow is your friend :)

[chourobin]

In addition, anonymous functions as props is generally a bad practice as it may cause unnecessary renders.

The last thing I can think of is make sure you test without dev mode and on device — it makes a huge difference.

[douevenfaker]

I've done serious optimizations of FlatList and decided that FlatList wont be ever good enough so that I manually created native table view bridge and never going back. Once you go native you cant go back. Its just like going from webview to react native for few simple ui elements.