[🐛] Channel switching breaks if reusing an existing view

[oddanderson]

Issue

If you have a view with the following structure:

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

If this View is persisted when changing channels, and the channelObj changes to a new channel, the MessageList does not automatically update in most circumstances.

The exception to this is if you start using MessageInput to send messages. Once you "send a message," switching channels works as expected. However, if you load up a channel on a fresh boot without ever sending a message, the UI will not appropriately update until you send a message.

Steps to reproduce

Steps to reproduce the behavior:

1. Create a persistent View with Channel, MessageList, and MessageInput
2. Select a new channel in a popup modal, such that the View in question is not destroyed
3. Observe that messages shown in the View are still showing the old channel
4. Send a message, observe that the View will immediately update to show the correct channels in the new channel

Expected behavior

I expect to be able to see the messages in a newly selected channel in a View without destroying it and without needing to send a message.

Project Related Information

Customization

Click To Expand

      try {
        const channels = await chatClient.queryChannels(
          { type: "community", id: { $eq: newChannel.id } },
          [],
          {
            watch: true,
            state: true,
          },
        );
        const channel = channels[0];
        setChannel(channel);
      } catch (error) {
        console.error(error);
      }
      
<Chat client={chatClient} style={streamTheme}>
            {channel && (
              <Channel
                keyboardVerticalOffset={0}
                channel={channel}
                MessageSimple={CommunityMessage}
                hideStickyDateHeader={true}
                hideDateSeparators={true}
                hasCommands={false}
                hasFilePicker={false}
              >
                <MessageList
                  additionalFlatListProps={{
                    refreshControl: (
                      <RefreshControl
                        refreshing={refreshing}
                        onRefresh={reload}
                      />
                    ),
                  }}
                  inverted={false}
                  onListScroll={onScroll}
                  HeaderComponent={CustomHeader}
                  ScrollToBottomButton={empty}
                />
                <MessageInput />
              </Channel>
            )}
          </Chat>

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:
  • 5.33.1
• 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

---

[isekovanic]

Hi @oddanderson ,

Since channel is an object (a quite heavy one at that), for performance reasons we do not perform a check across the entirety of its properties. This means that the component might not yet realize the channel's changed. I'll try investigating this within our SDK, but for the time being would it be possible to set a key prop to your message list with basically anything that changes whenever your channel changes so that you can force a rerender ?

For example, you can do something like:

<Channel channel={channelObj}>
    <MessageList key={channelObj.cid} />
    <MessageInput />
</Channel>

or whatever and this should indeed rerender correctly.

[khushal87]

Hey, @oddanderson, did the above solution help fix your issues? If yes, please feel free to close the issue else we can debug further. Thanks 😄

[khushal87]

Hey, @oddanderson, is there any update on the issue? Did the above suggestion fix it for you? If yes, we will close it, or we can debug it together.

[ndotkarkut]

Hi, I had this same issue and and adding a key to did not trigger a re-render of the messages. However, adding a key to the did. Hope this helps.

[khushal87]

You mean the key to the Channel component, right?