-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Performance on renderItem #139
Comments
@edo1493 Wow, this is a real matter! Thanks for reporting in. I'm afraid that this is out of my hands (if it really has to do with |
Yes, I was looking at your shallow comparison, which is missing my array of objects and always returning true in shouldUpdateComponent. However, that's not the main issue. I have re-written that method and I still see performance problems, but it seems they are from RN core. I am concatenating new items at the end of the flat list, while I swipe through, so when I get to a couple of dozens, it's not smooth anymore. |
I'm interested in your rewriting of Does the issue remains if your convert the |
Well, I am just doing a comparison on this.props.data.length, when it changes, I return true, otherwise false. This, in theory, reduces the number of renderings. However, even in this case, I still have the FlatList issue. I have tried to move move the animation on the native thread, setting a windowSize, but I don't see any improvements. Nothing changes with PureComponent, I also tried to wrap Carousel around CustomCarousel and setting it to Pure. I have opened an issue here just to ask you guys if you have seen something like this. I have noticed this same exact behaviour on other FlatLists I am currently using. |
I'll run a few tests as soon as I can and I'll keep you posted. Unfortunately, this looks like a React Native issue... |
They say it's okay renderItem gets called every time, not sure how this impacts this component. It's getting really slow and bumping my ram. This is my configuration:
|
As I keep scrolling down and getting more rows, the ram goes up like crazy. :( |
Do you have the same issue with your other |
Not this bad. I have moved the animation to the native thread and set inactiveSlideScale={1} and inactiveSlideOpacity={1}. It looks better, but with large lists doesn't look good. It gets to the point it misses onPress events on the items. |
Have you tested on both Android and iOS? Have you tried to build a production version? |
I am on the iOS simulator. I have tried on production too. What I see here is that with 30 elements, I start getting: "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. ", which is quite ugly. I have removed the scale and opacity because I was getting delay on those animations too. It gets to the point where the element has a delay in order to align itself and so onSnapToItem returns after a while. The other thing I have noticed is that if I swipe fast and skip some elements, the carousel has a hard time figuring out where to stop and sometimes goes back. |
That's really annoying since we've recently migrated to Still, can you try the latest commit on master and see if it changes anything? It features a new animation mechanism as well as a few optimizations. Also, setting Regarding the fact that the carousel goes back, you can thank the many |
I didn't see much difference. I am just trying to load a set of balances horizontally as you can see from the pic. Each balance has an onPress which is supposed to call snapTo. After a couple of dozens of elements, I can't even click on the element, it gets sort of stuck. RemoveSubclippedSubViews seems to help a bit, but I still get the warning in the console about the poor performance of the VirtualizedList. Can you reproduce? What I haven't tried is to just pass a fixed list of 50 elements. |
Another thing I have noticed is when I set deceleration "fast", the component has even more issues; because it stops in the middle of two elements and has a much bigger delay in focusing. |
Btw, I am playing with your component and also tried to work out a better shouldComponentUpdate for my scenario with deepEqual, instead of shallow. However, what I am seeing is an actual delay on scrollToIndex from the FlatList component. This happens with 20 elements, your method gets triggered, but then the list takes a while before moving. |
I am closing this. After digging, I have realised redux-undo was creating performance issues with this component transitions. This was a really weird discovery, since no one of the props involved here were anything to do with one of my reducers that was implementing undo. |
@edo1493 Ok, thanks the detailed feedback. This has been very useful anyway ;-) |
I am noticing renderItem gets called every time position changes in my case. This happens on the whole set, so performance goes really down as I swipe through my list.
I was wondering if you guys were seeing this, which can probably be related to facebook/react-native#13597.
The text was updated successfully, but these errors were encountered: