IncludeEmpty option is re-rendering the ChannelList

Sendbird Chat UIKit React
, ,
1

Hello, I’m using “sendbird-uikit”: “2.4.3” in React, and I’m encountering a strange issue with the ChannelList component. For some reason, when I include the includeEmpty: true option, it’s re-rendering the ChannelList every time I select a channel, which effectively means I can’t select a channel. Every time it re-renders I get sent back to the first channel.

However, if I remove the queries prop, it works just fine. Any ideas?

Here’s the code:

const [currentChannelUrl, setCurrentChannelUrl] = useState<string>(``);

return (
    <SendBirdProvider
      appId={process.env.REACT_APP_SENDBIRD_APP_ID}
      accessToken={tokenQuery.data?.token}
      userId={userInfo.externalId ?? ``}
      nickname={`${userInfo.firstName} ${userInfo.lastName}`}
      colorSet={colorSet}
    >
      <StyledGridContainer>
        <ChannelList
          onChannelSelect={(channel) => {
            if (channel?.url) {
              setCurrentChannelUrl(channel.url);
            }
          }}
          queries={{ channelListQuery: { includeEmpty: true } }}
        />
        <Channel channelUrl={currentChannelUrl} />
      </StyledGridContainer>
    </SendBirdProvider>
);

Thanks!

2

Hi @henry,

Welcome to the Sendbird Community. Could you provide a quick video showcasing what you’re seeing? I’ll try to recreate the behavior on my side but would be great to ensure we’re both on the same page in regards to what you’re seeing.

3

Thanks! I’ve uploaded a video here since it seems it won’t let me attach files.

4

@Tyler Have you had a chance to look at this?

5

Hi @henry,

Unfortunately I’ve not yet had a chance to look at this. Let me put it on my to-do list for today. Apologies about the delay.

6

Hi @Tyler, just following up again. We are still having this issue and would appreciate any assistance you can provide. Thanks!

7

Hi @henry,

My apologies that this took so long to get back to you. If we take a look at the example code in the documents, we actually suggest passing in custom queries like such:

// queries.channelListQuery & queries.applicationUserListQuery
export const CustomQueryExample = () => {
    // if channelListQuery object changes, ChannelList rerenders, so its better to keep them in state/memoized
    const [queries] = useState({
        channelListQuery: {
            includeEmpty: true,
            order: 'latest_last_message',
        },
        applicationUserListQuery: {
            limit: 30,
            userIdsFilter: ['katherine', 'cindy'],
            },
    });
    return (
        <Sendbird appId={appId} userId={userId}>
            <ChannelList queries={queries} />
    </Sendbird>
    );
};

I tested this myself here: channelListQuery Example - CodeSandbox
And verified that it does not re-render when passing it in this way.

Docs: Group channel | UIKit React SDK | Sendbird Docs (Scroll down to code examples).

1 Like
8

Thanks! This works great.

9

This is such a footgun, I think it should be considered a bug in the UIKit library and should get fixed. This happened to me, pretty much exactly as it happened to Henry. Using the components in this way, there seems to be no way to get empty channels without this React hack.