[🐛] Performance Issue: MessageList Component Re-render Behavior

[VadymBezpalko]

Issue

Hello! 👋 In our React Native app, we are using the GetStream library and have encountered a performance issue with the MessageList component. It appears to rerender all the messages in the list on every change to the list data (e.g., adding new messages or updating existing ones). Additionally, during scrolling, we’ve observed that the entire list sometimes rerenders continuously, further impacting performance. This behavior leads to noticeable lag and reduced app performance, especially when working with a large dataset or frequent updates to the message list. We have tested the component using the default settings without overriding any internal components, but the issue persists.

We have noticed that the component seems to lack perf optimizations, such as the use of useMemo or useCallback. Could you provide any information about the expected performance of the MessageList component? Are there existing optimizations to address these issues, or are there plans to improve its performance in future updates?

Additionally, I am attaching a recording from the simulator showing an example of the application re-rendering where MessageList is used, with a visualization using the DevTools Profiler:
console.log for message Message YYY rendered X times is added here.

Screen.Recording.2025-01-07.at.17.51.30.online-video-cutter.com.mp4

Any guidance or recommendations would be greatly appreciated. 🙇

Steps to reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
   etc...

Expected behavior

Project Related Information

Customization

Click To Expand

# N/A

Offline support

• I have enabled offline support.
• The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

# N/A

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• stream-chat-react-native version you're using that has this issue:
  • e.g. 5.4.3
• Device/Emulator info:
  • I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

Additional context

Screenshots

Click To Expand

---

[khushal87]

Hey, @VadymBezpalko, you seem to be on a pretty old version of v5(v5.4.3 is almost 2 years old now). We already have v5.44.3 along these lines, and we have also released v6. Can you upgrade your app to the latest version of the SDK and see if similar problems occur? Over time, a ton of improvements have been made to the SDK on the message list. I would not ask for a major bump to v6, but a minor bump to v5.44.3 would be fine for you.

Though this might now solve what you are facing, it would at least put us on the same page. Let us know how it does after the upgrade. :)

[arekkubaczkowski]

@khushal87, we’ve just upgraded the library to version 5.44.3, but the issue still persists. Additionally, I’ve noticed that using useThreadContext causes some unexpected re-renders during completely unrelated actions in the chat. For instance, it re-renders even when we make an API call or open the bottom sheet.

I haven’t checked its implementation in detail, but removing this hook resolves some unnecessary re-renders:
MessageList.tsx, line 1273 and https://github.com/GetStream/stream-chat-react-native/blob/v5.44.3/package/src/components/MessageList/hooks/useMessageList.ts#L61

However, the other mentioned issues remain. For example, adding new messages causes the entire list, as well as each individual item, to re-render. After using the app for some time, it becomes very laggy, and memory consumption increases significantly, eventually leading to device overheating. If we remove the chat from that screen, all these issues disappear.

[arekkubaczkowski]

Moreover, when there are a lot of messages in the chat and we try to send a new message, the app freezes for a few seconds until the message is sent. This happens because the re-renders block the JS thread, causing delays.

[arekkubaczkowski]

@khushal87 please take a look at this recording, you can notice that sending messages and opening the bottom sheet is getting laggy when interacting with chat, if no chat actions then bottom sheet opens smoothly. When I was testing on dev env I could notice that those lags are tightly coupled with MessageList rerenders.
https://streamable.com/a6l5wf

I am testing on samsung s23 so it's technically quite good device (it's a prod build), however on the lower and devices the lags could take over few seconds which makes the app very unresponsive.

[khushal87]

Hey @arekkubaczkowski, we don't have suggestions right now on how you can make improvements to the message list you are using. This has to do with a lot of factors: animation, message list performance, and react native performance on low-end devices, and all combined, this could be an issue here. We have improved our MessageList and Message on v6, which could help you optimize a bit of it, but I can't guarantee it will stop all the re-renders that you are currently facing, so you can try that out. We got rid of the bottom-to-top data drill approach to MessageOverlay in v6, which can help. We will take a look and work on the feedback and continue to improve the MessageList in the near future. How we pass on data from the Channel to other parts of the list and underlying message components are reasons for re-renders which we try to improve from time to time.

[arekkubaczkowski]

@khushal87 I am just wondering, is there any option to "freeze" refreshing the chat if it's somewhere in the background (e.g. in the closed bottom sheet)?

[khushal87]

Is your chat/channel wrapper a children of the Bottomsheet?

[arekkubaczkowski]

yes, you can see it on the video that I've attached in the comment above

[khushal87]

I am just wondering, is there any option to "freeze" refreshing the chat if it's somewhere in the background (e.g. in the closed bottom sheet)?

In that case, there isn't a way currently. But we can think about it for sure

[arekkubaczkowski]

how could that be handled if chat is not in the bottom sheet then?

[khushal87]

Technically, as I mentioned before, there should be only Chat wrapper for the app. All other problems can be separately solved. I would have to go through your implementation to understand what is going on under the hood that results in messages in both the Channels. That's a strange behaviour.

[arekkubaczkowski]

@khushal87 I've observed that using a message list for about 3min it increases the memory consumption by 250mb, it actually doubles our total app's memory consumption in a relative short period. However it gets more increased over time so it reaches very high values at some point. Moreover, if I leave the screen so that chat is unmounted it doesn't garbage collect that memory so it actually can increase infinitely which points to some memory leaks.

[arekkubaczkowski]

you can notice it on this screenshot that shows stats about memory consumption, the live/room screen renders the chat and its memory consumption peaks significantly, after getting back it doesn't get back to normal. I already tried to not render the chat and it's not reproducible anymore in such scenario so I am pretty sure it's about the chat.

[IsaacStakemate]

@arekkubaczkowski have you been able to resolve this issue or found a way around it? I'm having the same issue when I use useMessageInputContext() in my component, and I need the hook currently to handle the attachment upload.

or has there been any update from your end? @khushal87