react-native-draggable-flatlist icon indicating copy to clipboard operation
react-native-draggable-flatlist copied to clipboard

Published 20 hours ago • verified publisher icon computerjazz

Performance Issue on long lists

Open roo12312 opened this issue 2 years ago • 4 comments
trafficstars

Hi, I'm facing a huge performance issue with my list. Currently, I'm rendering around 100 fields and the ui just freezes on drag.

roo12312 avatar Feb 19 '23 15:02 roo12312

what version of reanimated are you on?

computerjazz avatar Feb 22 '23 19:02 computerjazz

what version of reanimated are you on?

im using with expo "react-native-reanimated": "~2.12.0",

roo12312 avatar Feb 23 '23 07:02 roo12312

I have the same issue.

I think an issue here is that the FlatList does not render all 100 items on initial load, so if your rendered component inside of the list is heavy or takes time to load like a WebView, it will freeze until the next part of the list is loaded. I tried to solve it with setting initialNumToRender to the list length, but that makes the UI freeze longer while building the list initially but solves the freeze on drag issue.

I feel like this issue could be solved with a FlashList integration because of the way FlashList reuses list items on scroll.

Thoughts @computerjazz ?

ahansson89 avatar Feb 24 '23 19:02 ahansson89

I'm facing performance issues as well. Are you guys seeing all of the rows being rendered instead and not respecting the initialNumToRender property? I'm adding logs in the rendered item component and am seeing all of the items (even off screen items) being logged.

dchhetri avatar May 02 '23 02:05 dchhetri