[🐛] Best Practices for handling multiple channels on the same screen

[arekkubaczkowski]

Issue

In our application, we currently display multiple channels on the same screen. To achieve this, we are:

1. Using Separate “Chat” Component Instances: We found that each channel requires its own instance of the Chat component. Without separate instances, we encountered issues where messages from one channel would incorrectly display in another channel’s chat UI. While this setup works, we are unsure if it’s the recommended or most efficient solution.
2. Calling channel.watch() for each Channel: Each channel on the screen has its own watch() call to listen for updates. However, we are unsure if this approach is optimal or could potentially cause performance or synchronization issues when multiple channels are active simultaneously.
3. Accessing Channel Instances Across the App: Beyond displaying messages on the UI, we also use channel instances to handle various types of events in different parts of the application. This raises further questions about the implications of managing multiple channel instances. For example: • Is there a recommended way to keep channel instances globally accessible while ensuring they remain properly synchronized? • How can we avoid conflicts or issues when the same channel is accessed and managed from different parts of the app?

Could you clarify if this is the correct approach for managing multiple channels on the same screen? Are there any best practices or alternative solutions we should consider to ensure proper functionality and performance?

We would greatly appreciate your guidance on this matter!

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 @arekkubaczkowski, I hope I can answer your questions with the best that I know.

Using Separate “Chat” Component Instances: We found that each channel requires its own instance of the Chat component. Without separate instances, we encountered issues where messages from one channel would incorrectly display in another channel’s chat UI. While this setup works, we are unsure if it’s the recommended or most efficient solution.

About this one, I don't think you really need multiple chat instances to simulate multiple-channel environments in your application. This doesn't seem to be a good practice and can be a source of undetected bugs in the future. It is strange that if a channel has a different channel ID, how would the message from one channel come to the other channel? Do you have snippets to explain it to us? In the ChannelList, we have seen this issue since our Channel events don't respect user custom filters. This is something that the end user should handle, and this is something you can handle using our event overrides props for ChannelList, but for Channel, I am assuming it to work automatically if it's watched appropriately. For channels, the messages of one channel should technically not pop onto other channels.

Calling channel.watch() for each Channel: Each channel on the screen has its own watch() call to listen for updates. However, we are unsure if this approach is optimal or could potentially cause performance or synchronization issues when multiple channels are active simultaneously.

This is something you would have to necessarily do for channels if you don't have a channel list with options prop with watch true. Each channel should be watched separately to make sure you receive channel-specific events. This also ensures that the channel is active on our system and ready to receive appropriate events.

Is there a recommended way to keep channel instances globally accessible while ensuring they remain properly synchronized?

Unless and until your component is wrapped with the Channel component, it shouldn't be a problem. That's the only way we support accessing channel/events through our SDK.

[arekkubaczkowski]

@khushal87 thank you for your input, I am afraid that we misunderstood each other. Let me clarify my concerns:

We need to handle multiple channels within the same screen, as well as display its content in multiple places across the same screen a) Display main chat (using MessageList) b) display some top messages from the main chat by listening on the main chat channel events and collecting it accordingly c) display some widgets that display selected messages from the main chat and allow to use GetStream's reactions for each. d) display additional channel (using MessageList)

each of those places needs to be rendered independently but across the same screen. Which means that I need to have an access to the channel instances from any part of that screen (in fact we have more widgets that display some content based on the channel data that come from getstream events).

That approach makes it difficult to handle it based on the rules that you've mentioned above, I am not able to wrap the entire screen with the <Channel /> component because in fact I need to have multiple instances of that component.

[khushal87]

Hey @arekkubaczkowski, you can have multiple channel context/channel wrappers in your application, but having multiple Chat instances for each Channel is not a thing that we recommend doing. Technically, that could lead you to problems.

[arekkubaczkowski]

@khushal87 I tried using a single Chat instance to render multiple Channel components, but this caused issues with conflicting messages between the two channels. Specifically, both MessageList components displayed messages based on the latest channel update. For example, when a new message arrived in Channel A, both message lists showed messages from Channel A. Similarly, when a new message arrived in Channel B, both lists switched to displaying messages from Channel B.

https://github.com/user-attachments/assets/0de613ac-d100-466f-8e38-e226b1179b1d

[khushal87]

Hey @arekkubaczkowski, is this issue still relevant for your application? Its getting stale and I am really sorry for missing a reply here. If you need further help we can dive deep into it.

[arekkubaczkowski]

@khushal87 we can close this one, I am not having any issues regarding this anymore