Performance Improvements - Part I

[vishalnarkhede]

We have received some complains around performance of RN SDK in case of high concurrency (messages coming in too fast), e.g., livestream applications. Recently we did some investigation and we have pinpointed some things which can be improved to boost the performance.

We are currently working on following fixes/improvements to avoid performance issues:

1. Throttling

Issue

• We currently throttle state updates (messages, members etc) to 500 ms. These state updates when messages are coming in too fast, cause a lot of work for JS thread resulting in slow behaviour.

https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Channel/Channel.tsx#L674

const copyChannelState = lightThrottle(() => {
    setLoading(false);
    if (channel) {
      setMembers({ ...channel.state.members });
      setMessages([...channel.state.messages]);
      setRead({ ...channel.state.read });
      setTyping({ ...channel.state.typing });
      setWatcherCount(channel.state.watcher_count);
      setWatchers({ ...channel.state.watchers });
    }
  }, 500);

Fix

• This throttling time should be configurable, so that for high concurrency applications customers can increase throttling interval to 1 sec. It gives a huge relief to JS thread causing massive performance gain

2. Image Viewer

Issue

With the current designs when user opens an image attachment in image viewer, he can keep swiping through all the images (for messages that have been loaded so far) within channel. And we do a lot of work within SDK to keep smooth UX of image viewer opening and keeping track of all the messages with image attachments as the new messages keep coming in, even if user never opens the viewer. When the number of images in channel go above 50 or 100, this introduces quite some performance hit.

Fix

We can easily fix this issue by tweaking the UX for our image viewer. Instead of allowing user to swipe through all the images of channel, we should load the images of only single message from which image viewer was opened. This way we can avoid any work around image viewer, before user opens the viewer.

3. UX features

Issue

Following features are quite intensive for JS thread since it loops through entire list of messages.

• Inline date separators
• Sticky date headers
• Message grouping
• Read receipts

Fix

• Introduce a guide within docs for performance boost. In this document we can recommend all the props or features which are performance intensive and how to disable them.
• Avoid getReadStates() call if read events are disabled for application, since it involves looping through messages.
• Avoid calls to channel.markRead() if read events are disabled.
• Introduce prop to disable sticky date headers. This prop should add/remove onViewableItemsChanged prop on FlatList, since we loop through messages here.

[vishalnarkhede]

The above mentioned improvements are available on v3.9.0-next.6. We would really appreciate if you could give it a try and let us know. Please follow the doc from this PR for implementation - https://github.com/GetStream/stream-chat-react-native/pull/891/files

[vishalnarkhede]

These changes have been released as part of 3.9.0. We have more improvements coming soon for image attachments and avoiding un-necenssary re-renders of Gallery component. Please stay tuned.