Row changes does not carry the Props and states with it

Hi @naqvitalha, I am making a chat application with realm db, so when ever db is updated with a new message, the list of chats from different users shall be re-ordered according to the messages received time in descending order as WhatsApp does

I am able to update the row positions according to the db update. But there are problem when the position of a row has changed.

Example: Suppose rows are in below order:’

Person A’s Chat row (Containing props and stated of Person A) Person B’s Chat row (Containing props and stated of Person B) Person C’s Chat row (Containing props and stated of Person C)

now if person B sends a message the chat list shall be re rendered and it shall be shown as below, but the props and states are remaining same.

Person B’s Chat row (Containing props and stated of Person A) Person A’s Chat row (Containing props and stated of Person B) Person C’s Chat row (Containing props and stated of Person C)

So next time if any event is send to Person B’s Chat, it is not updating it as we have implemented shouldComponentUpdate checks.

My data Provider is as below: new DataProvider((r1, r2) => { return r1.id !== r2.id }).cloneWithRows(this.state.chats) (ids are unique) So how each row should carry its props? If I have to use rowHasChanged I do not understand how to implement that and the sample examples does not have any example regarding that.

Please help me…

[tafelito]

@naqvitalha I’m not sure if the issue I’m having is similar to this one or not. I’m trying to remove items from a list and before an item gets deleted, there is an animation that scales down the row. The problem is that after the animation is run and the data is updated, if I removed row A, then row B will re use row A and because row A was scaled down, now row B is not shown.

here is a quick demo

https://codesandbox.io/s/4j38w51ql7

I tried using optimizeForInsertDeleteAnimations or even disableRecycling and none of that worked.

I had to set the getStableIds to get it to work, but I thought that optimizeForInsertDeleteAnimations was meant for that

[maxakak1998]

Local states will cause issues with recycling because when a component is recycled, it is not unmounted but instead only updated with the new data. The older state will therefore persist in the new item and lead to unpredictable behaviour. You could store such state at a parent level and pass it down as a prop or use the extendedState prop but make a note to not change extendedState too frequently for performance reasons.

I think i have a trouble with this part https://github.com/Flipkart/recyclerlistview/issues/432