How to handle ListView sorting performance?

Question

I have a ListView that displays a list of chat sessions (similar to Whatsapp / Facebook Messenger) with the following rowHasChanged :

 rowHasChanged: (r1, r2) => r1.id !== r2.id 

I noticed that elements that are not being updated get re-rendered, even if I use shouldComponentUpdate .

After some traces, I found that since I sort the elements differently, before cloning the dataSource (a new message forces the elements to go to the top of the list), rowHasChanged compares different strings. It makes sense to do this.

But isn’t there a solution to support performing sorting? In WPF, we had a CollectionViewSource that got something to sort by in addition to this data due to the same problem (also supported filtering and others).

Does anyone know how to get rid of these redundant renders?

Answer 1

Are you using dataSource?

 this.setState({ dataSource: this.ds.cloneWithRows(rowData) }); 

Try using it like this:

 this.setState(state => ({ dataSource: this.state.dataSource.cloneWithRows(rowData) })) 

In the first reduction, you set a new value for the dataSource, so it will not use rowHasChanged and treats it as a new data source.