react-native: v0.45.0+ - VirtualizedList slow performance and rendering

The rendering of VirtualizedList (namely <SectionList>) has extremely poor performance. I will be submitting a PR that seems fixes the issue introduced by this line https://github.com/facebook/react-native/blame/v0.45.0-rc.3/Libraries/Lists/VirtualizedList.js#L537 per this commit https://github.com/facebook/react-native/commit/52e50af56d601e63a0c83118c194149d3aed38ea#diff-25477c6bad509193f026645fd928dec6R515. There are a few more instances of the change from this._updateCellsToRenderBatcher.schedule(); to this._scheduleCellsToRenderUpdate();. Therefore I believe that there is more work to be done in order to fully fix this issue.

To reproduce, simply use RN v0.45.x+ and create a <SectionList> with a lot of records. The performance is horrible compared to v0.44.x. However I need v0.45.x since it brings the scrollTo* methods on <SectionList> component.

cc @sahrens

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 18 (9 by maintainers)

Most upvoted comments

@tjmadsen I haven’t found a silver bullet solution, but i’ve made some changes on my FlatList configurations that improved a lot, not 100%, but enough to keep using the new version. It was a lot of minor changes but there was 2 that I noticed had the most impact:

To reduce the FlatList prop “windowSize” from 21 to just 5. It brings some disadvantages, but on my case it was worth it. Check the flatlist/virtualized list documentation to see if it applies on your case;
To set the “maxToRenderPerBatch” to just 2. Almost the same as the change cited above, as each of my items occupies roughly 70% of the screen, loading 2 gives me some space.

The major drawback with these was not being able to do smooth fast scrolling, but in may case the performance boost paid off.

xilonxiao on Aug 14, 2017