stream-chat-react-native
stream-chat-react-native copied to clipboard
fix: performance improvement for message list render item
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
getGroupStylesandgetDateSeparatorsto do the same job. - As a result,
renderItemjust was dependent on stable props so I decided to create a contextMessageListItemContextfor the same and use it insideMessageWrappercomponent thereby moving therenderItemout 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.