bug: MessageList and MessageInput component re-render on active channel update

[moritzallgravy]

Describe the bug

We updated our stream-chat-react version from 11.4.0 => 13.12.0 and are experiencing an unexpected behavior of the MessageList and MessageInput inside the Channel component. The components are being re-rendered/unmounted/flashing constantly.

To Reproduce

Steps to reproduce the behavior:

1. Have package version 13.12.0 installed
2. Create a component like this:

<Channel channel={selectedChannel}>
    <MessageList />
    <MessageInput />
  </Channel>

3. The message list and input is always flashing/re-render/unmounting

Expected behavior

The MessageList and MessageInput components are not being re-rendered/unmounted/flashing with every channel change as with version 11.4.0. We even tried to remove everything around the channel component and simply using the stream components and every time we ended up with the re-rendering.

Screenshots

https://github.com/user-attachments/assets/e48c60b8-3f9a-4278-83d5-a139cbb27399

Package version

• stream-chat-react: 13.12.0
• stream-chat: 9.25.0

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome

Additional context

As mentioned even with the code examples from stream we encounter this behavior. We also have a header component which is wrapped in memo and is not being re-rendered on channel updates.

[MartinCupela]

Hello @moritzallgravy , message input and message list both depend on the channel you are passing as a prop, therefore they can be re-rendered. Could you try to use setActiveChannel from ChatContext instead of passing the channel object through the prop?

const {setActiveChannel} = useChatContext();

[moritzallgravy]

Hey @MartinCupela thanks for your answer!

I just tried it again with using setActiveChannel but the MessageList and MessageInput is still re-rendering every time we are changing the selected channel.

Alongside the stream components we're also using a header component we added which is working fine. The header is wrapped with a memo and we are using const { channel } = useChannelStateContext(); to consume the current channel within the header. This component is not flashing.

Is there anything else we can try? We already explored to wrap the components in memo but it's always behaving as described.