bug: MessageList does not respond to stateful `customActiveChannel` prop after initial render

[lukewilson2002]

I am trying to set the user's focused channel from a URL parameter once the page loads, and after the client has initialized. I get this channel URL and try to set the customActiveChannel value but it doesn't seem to update if it's a stateful value that starts undefined.

To Reproduce

Steps to reproduce the behavior:

1. Create a stateful value: const [activeChannel, setActiveChannel] = useState<string | undefined>(undefined)
2. Call setActiveChannel after the initial load and once MessageList has already received a prop of customActiveChannel = undefined
3. After the value has been changed and the component is rendered, the MessageList won't have the channel selected and nothing has changed.

Expected behavior

The ChannelList should focus the channel with the id of customActiveChannel prop if it has changed.

Package version

• stream-chat-react: 12.10.0
• stream-chat-css:
• stream-chat-js: 8.55

Desktop:

• OS: macOS Silicon
• Browser Chrome
• Version 133

[MartinCupela]

Hey @lukewilson2002 , are you setting active channel with the following?

  const {setActiveChannel} = useChatContext();

[lukewilson2002]

@MartinCupela Yes, I was but that wasn't working for me.

I eventually made it work as described in my Stack Overflow QA: https://stackoverflow.com/questions/79477012/how-to-set-the-default-focused-channel-for-channellist-and-channel-component-on/79477013#79477013

It seems that either intentionally, or unintentionally, customActiveChannel only applies on component mount and never responds to state changes.

Using setActiveChannel was very difficult for me because I needed to check whether the channel existed on page load in order to present an error toast to the user. It seemed that the client wouldn't be hydrated with the channels until after a few re-renders of the component. Thus, I didn't know when it would be fully ready to check for the channel.

I possibly could have done an API request instead to check if the channel existed, but I thought that would be a waste since the channel must be loaded for the client to focus it.