stream-chat-react-native icon indicating copy to clipboard operation
stream-chat-react-native copied to clipboard

fix: performance improvement for message list render item

Open khushal87 opened this issue 2 months ago • 2 comments

The PR focuses into optimising the behaviour of our MessageList/MessageFlashList. As a result of it move renderItem completely out of the MessageList and MessageFlashList. The changes mostly are as follows:

  • Create a separate state store for channel unread state and use the state where it's intended to be used and not unnecessarily drilling it down.
  • Create a store for message list where each message id would store its prev and next message - this is later used to calculate the date separator and group styles for the message at the level of the message (should be much better can calculating on top as this avoids repetitive calculations as we had before). We were iterating over the entire list multiple times inside the getGroupStyles and getDateSeparators to do the same job.
  • As a result, renderItem just was dependent on stable props so I decided to create a context MessageListItemContext for the same and use it inside MessageWrapper component thereby moving the renderItem out of the MessageList which was always our goal.

This obviously came with a couple of deprecations which we cannot remove right now but may be in the future which will make the code cleaner and faster as we get rid of the unnecessary calculations we still need to have within the code.

khushal87 avatar Nov 28 '25 15:11 khushal87