[🐛] 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

---