CODEWITHSUNDEEP
iosreact-nativeredux
Viktor Jovanovic
Viktor Jovanovic

Reputation: 571

FlatList re-render with Redux

I'm using PureComponent to render items of my FlatList and when I use FlatList and pass a local state to it in data, the rendering works very well, I don't have wasteful re-rendering. However, when I use FlatList with an array from my redux store in data, if I scroll down, each time that onReachEnd is called, re-render work well. But when I don't have anymore data to load and I scroll up, all my items re-render one per one.

Like my whole list is lost.

I'm using exactly the same list with local state in data, and it works perfectly! The issue only appear when I try to make FlatList and Redux work together

<FlatList
   ref={(view) => this.list = view}
   data={this.props.requestsList}
   style={{flex: 1}}
   keyExtractor={(item) => String(item.emitter.id)}
   renderItem={this._renderRequestsItems}
   onEndReachedThreshold={0.5}
   onEndReached={!this.props.lastPage ? this._endReached : null}
   ListFooterComponent={reloadIndicator}
   ListHeaderComponent={this._getHeaderComponent}
   ListEmptyComponent={this._getEmptyComponent}
/>

Upvotes: 4

Views: 2191

Answers (2)

Jay
Jay

Reputation: 919

Can you try to add a new key to flat list?

 <FlatList
   key={Math.floor(Math.random())} 
   ref={(view) => this.list = view}
   data={this.props.requestsList}
   style={{flex: 1}}
   keyExtractor={(item) => String(item.emitter.id)}
   renderItem={this._renderRequestsItems}
   onEndReachedThreshold={0.5}
   onEndReached={!this.props.lastPage ? this._endReached : null}
   ListFooterComponent={reloadIndicator}
   ListHeaderComponent={this._getHeaderComponent}
   ListEmptyComponent={this._getEmptyComponent}
/>

It is work for me.

Upvotes: 1

Idan
Idan

Reputation: 4023

Use extraData property on your FlatList component, in your case, extra data can come from props so it will look like

extraData={this.prop}

Upvotes: 2

Related Questions