Repository navigation
[🐛] Performance Issue: MessageList Component Re-render Behavior #2873
Description
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:
- Go to '...'
- Click on '....'
- Scroll down to '....'
- See error
etc...
Expected behavior
Project Related Information
Customization
Click To Expand
# N/AOffline 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/Areact-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-nativeversion 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
Activity
khushal87 commentedon Jan 8, 2025
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 commentedon Jan 8, 2025
@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 commentedon Jan 8, 2025
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 commentedon Jan 8, 2025
@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 commentedon Jan 9, 2025
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 commentedon Jan 9, 2025
@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 commentedon Jan 9, 2025
Is your chat/channel wrapper a children of the Bottomsheet?
arekkubaczkowski commentedon Jan 9, 2025
yes, you can see it on the video that I've attached in the comment above
khushal87 commentedon Jan 9, 2025
In that case, there isn't a way currently. But we can think about it for sure
arekkubaczkowski commentedon Jan 9, 2025
how could that be handled if chat is not in the bottom sheet then?
khushal87 commentedon Jan 10, 2025
Technically, as I mentioned before, there should be only
Chatwrapper 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 commentedon Jan 15, 2025
@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 commentedon Jan 15, 2025
you can notice it on this screenshot that shows stats about memory consumption, the
live/roomscreen 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 commentedon May 14, 2025
@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
ertucaglar commentedon Sep 10, 2025
I'm experiencing a similar issue. I use both Stream's chat and voice call features. If I try to join a conversation by clicking on a message in a channel, the app freezes.
I haven't been able to find the problem, but if I add a view like <View style={{height: 100}} /> just below the component under , the problem goes away.
khushal87 commentedon Dec 4, 2025
We are doing continous improvements with the Message List with time so it would be great if you are in latest version of the SDK to have those changes on your end. You can also use MessageFlashList component after installing flash-list component in you app as it consumes lesser memory in practise and would be comparatively faster.