recyclerlistview

recyclerlistview copied to clipboard

recyclerlistview is performant with class components. but when I use hooks and functions there is too much white space. I hope the maintainer @naqvitalha look at the edge cases when Implementing hooks with RLV

Check this comment out if it will be useful https://github.com/Flipkart/recyclerlistview/issues/517#issuecomment-669153093

tnx @myckhel for the snack. but the issue is not with how to implement. it's with the performance issue that only exist in hooks but in class it's performant

did you mean its not performant in hooks?

hi @EhsanSarsharany solution found ?

@EhsanSarshar

@myckhel I'm not sure what TheEhsanSarshar was seeing when using hooks, but I what I'm running into is extra rendering when items are added in the visible window or above it. Basically it re-renders all the items in the window (plus potentially others) regardless if they are a pure component or using shouldComponentUpdate(). I took your snack and made it into a (very messy :) ) example at https://snack.expo.dev/@jpooton/reactnative-recyclerlistview-hooks-example

I you click on the "Load 1 at top" bottom and check the console log for the Snack you'll see several items get re-rendered, not just the new addition. Using "Load 1 at bottom" will only render the new addition (if it's in the visible window). Using FlatView if I add a data item at the top, only that item is rendered.

Edit: Actually I'm seeing this with class based RLV as well I guess. I took their example snack and modified it to add a new dog at the top periodically and it also re-renders more than the addition. I guess it must be something about the layout logic vs FlatList (where I don't see this). https://snack.expo.dev/@jpooton/rlv-demo

@Codelica I think that is the usual behaviour. assuming you have array [1,2,3] when you prepend 4 to the array [4,1,2,3] This will make each column a changed column if the system want to know if column has changed it will compare the old value with the current value e.g old = 1 current = 4 current == old ? // false

old = 2 current = 1 current == old ? // false

old = 3 current = 2 current == old ? // false

old = 3 current = undefined current == old ? // false

Thats why all data will rerender

but if you append to the array [1,2,3,4] old = 1 current = 1 current == old ? // true

old = 2 current = 2 current == old ? // true

old = 3 current = 3 current == old ? // true

old = 4 current = undefined current == old ? // false

Then only the new data will be rendered

Thats why when you click LOAD 1 AT BOTTOM it only log once

(if it's in the visible window)

I guess i cant tell about that

Yes, that appears to be the case with RLV. I guess that's the tradeoff for allowing layout flexibility, otherwise the new element could just be inserted. But for an application like ours, where all the lists have real-time additions coming into the top of the list, it's a pretty heavy tradeoff. I'm still a little curious if the stableId feature might help inserts like that, but I was never able to get it to work without warnings and errors.