# IncludeEmpty option is re-rendering the ChannelList

**URL:** <https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315>\
**Category:** React\
**Tags:** javascript, uikit, bug\
**Created:** [November 1, 2021, 11:16pm UTC](https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315 "2021-11-01T23:16:05Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![henry](https://avatars.discourse-cdn.com/v4/letter/h/df705f/32.png) [@henry](https://community.sendbird.com/u/henry)\
**Post date:** [November 1, 2021, 11:16pm UTC](https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315/1 "2021-11-01T23:16:05Z")

</div>

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:

```auto
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!

---

<div class="post-metadata">

**Author:** ![Tyler](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tyler/32/810_2.png) [@Tyler](https://community.sendbird.com/u/Tyler)\
**Post date:** [November 2, 2021, 5:05pm UTC](https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315/2 "2021-11-02T17:05:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![henry](https://avatars.discourse-cdn.com/v4/letter/h/df705f/32.png) [@henry](https://community.sendbird.com/u/henry)\
**Post date:** [November 2, 2021, 7:44pm UTC](https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315/3 "2021-11-02T19:44:11Z")

</div>

Thanks! I’ve uploaded a video [here](https://drive.google.com/file/d/1XyHG9bQu8m_jVsWvPUXeKY2gNYiQL10M/view?usp=sharing) since it seems it won’t let me attach files.

---

<div class="post-metadata">

**Author:** ![henry](https://avatars.discourse-cdn.com/v4/letter/h/df705f/32.png) [@henry](https://community.sendbird.com/u/henry)\
**Post date:** [November 9, 2021, 2:22pm UTC](https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315/4 "2021-11-09T14:22:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tyler](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tyler/32/810_2.png) [@Tyler](https://community.sendbird.com/u/Tyler)\
**Post date:** [November 9, 2021, 3:17pm UTC](https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315/5 "2021-11-09T15:17:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![henry](https://avatars.discourse-cdn.com/v4/letter/h/df705f/32.png) [@henry](https://community.sendbird.com/u/henry)\
**Post date:** [November 11, 2021, 5:00pm UTC](https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315/6 "2021-11-11T17:00:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tyler](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tyler/32/810_2.png) [@Tyler](https://community.sendbird.com/u/Tyler)\
**Post date:** [November 12, 2021, 1:55pm UTC](https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315/7 "2021-11-12T13:55:51Z")

</div>

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:

```auto
// 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](https://codesandbox.io/s/channellistquery-example-ixg0v)  
And verified that it does not re-render when passing it in this way.

Docs: [Group channel | UIKit React SDK | Sendbird Docs](https://sendbird.com/docs/uikit/v1/react/guides/group-channel#4-list-of-properties) (Scroll down to code examples).

---

<div class="post-metadata">

**Author:** ![henry](https://avatars.discourse-cdn.com/v4/letter/h/df705f/32.png) [@henry](https://community.sendbird.com/u/henry)\
**Post date:** [November 15, 2021, 4:13pm UTC](https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315/8 "2021-11-15T16:13:58Z")

</div>

Thanks! This works great.

---

<div class="post-metadata">

**Author:** ![Jared](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/jared/32/2243_2.png) [@Jared](https://community.sendbird.com/u/Jared)\
**Post date:** [March 25, 2022, 7:42pm UTC](https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315/9 "2022-03-25T19:42:26Z")

</div>

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.