# Setting initial channel

**URL:** <https://community.sendbird.com/t/setting-initial-channel/2291>\
**Category:** React\
**Tags:** javascript, uikit, question\
**Created:** [May 20, 2021, 10:17pm UTC](https://community.sendbird.com/t/setting-initial-channel/2291 "2021-05-20T22:17:55Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevinkasson](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@kevinkasson](https://community.sendbird.com/u/kevinkasson)\
**Post date:** [May 20, 2021, 10:17pm UTC](https://community.sendbird.com/t/setting-initial-channel/2291/1 "2021-05-20T22:17:56Z")

</div>

Hi all,

I’m trying to find a way to automatically set the initial channel when loading the page (use case is so that we can link directly to certain channels). I’m using the Channel and ChannelList components, with a stateful currentChannelUrl variable - it’s pretty much all the same as the sample app.

I can pass a channel URL and update the currentChannelUrl variable, but I’m finding that the ChanneList automatically triggers onChannelSelect (sometimes multiple times) with the top channel in the list. So even if I set it to an initial value, something is automatically resetting it to the top value when the channel list loads. I haven’t found a way around this without hacky ideas like ignoring the onChannelSelect call for the first X times. It seems to be triggered twice, but I don’t know why or if it that’s consistent

Any thoughts? Is there a way to prevent it from automatically triggering on its own when loading the component?

I’m using the react UI Kit version 2.2.1.

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:** [May 21, 2021, 2:16pm UTC](https://community.sendbird.com/t/setting-initial-channel/2291/2 "2021-05-21T14:16:13Z")

</div>

Hi @kevinkasson,

Looking at the code, it doesn’t look like there is a way to prevent it from firing. `onChannelSelect` is fired in a `useEffect()` when initially loaded and selects a channel based on the loaded channel list.

Using a sandbox created by @Sravan_S, I was able to use a react hook that the UIKit exposes to grab the sdk instance:

```javascript
const context = useSendbirdStateContext();
const sdkInstance = sendBirdSelectors.getSdk(context);

```

Using this, I was able to alter the `onChannelSelect()` to only update the channel after the SDK is initialized:

```javascript
<SBChannelList
  onChannelSelect={(channel) => {
    if (channel && channel.url && sdkInstance.initialized) {
      setCurrentChannelUrl(channel.url);
    }
  }}
/>

```

Here is the sandbox I used, where you can test it:

> **[Custom typing indicator + hook (forked) - CodeSandbox](https://codesandbox.io/s/custom-typing-indicator-hook-forked-g8301?file=%2Fsrc%2FCustomizedApp.jsx)**
>
> Custom typing indicator + hook (forked) by tylerhammer using prop-types, react, react-dom, react-scripts, sendbird, sendbird-uikit, uuid

---

<div class="post-metadata">

**Author:** ![kevinkasson](https://avatars.discourse-cdn.com/v4/letter/k/73ab20/32.png) [@kevinkasson](https://community.sendbird.com/u/kevinkasson)\
**Post date:** [May 21, 2021, 7:06pm UTC](https://community.sendbird.com/t/setting-initial-channel/2291/3 "2021-05-21T19:06:33Z")

</div>

Thanks, that seems to work. It doesn’t highlight the new channel in the ChannelList, but that’s a separate issue. I think I can move forward from here.

---

<div class="post-metadata">

**Author:** ![John\_Ottenlips](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/john_ottenlips/32/663_2.png) [@John\_Ottenlips](https://community.sendbird.com/u/John_Ottenlips)\
**Post date:** [May 21, 2021, 7:47pm UTC](https://community.sendbird.com/t/setting-initial-channel/2291/4 "2021-05-21T19:47:51Z")

</div>

Is there a way we can pass an initially selected channel? I would like for it to be highlighted with the channel I navigate to. I am not seeing a channelUrl prop on this component. 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:** [May 21, 2021, 8:10pm UTC](https://community.sendbird.com/t/setting-initial-channel/2291/5 "2021-05-21T20:10:13Z")

</div>

There is not a way to pass in an initially selected channel, which is why we had to look at a potential workaround for Kevin. The channel likely cannot be highlighted without actually clicking on the channel as there is some deeper logic that is not exposed.

---

<div class="post-metadata">

**Author:** ![John\_Ottenlips](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/john_ottenlips/32/663_2.png) [@John\_Ottenlips](https://community.sendbird.com/u/John_Ottenlips)\
**Post date:** [May 21, 2021, 8:37pm UTC](https://community.sendbird.com/t/setting-initial-channel/2291/6 "2021-05-21T20:37:23Z")

</div>

Any chance it will be exposed in a future version?

---

<div class="post-metadata">

**Author:** ![John\_Ottenlips](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/john_ottenlips/32/663_2.png) [@John\_Ottenlips](https://community.sendbird.com/u/John_Ottenlips)\
**Post date:** [May 21, 2021, 8:47pm UTC](https://community.sendbird.com/t/setting-initial-channel/2291/7 "2021-05-21T20:47:20Z")

</div>

In the code sandbox, `sdkInstance.initialized` is always undefined so the workaround actually just breaks channel selecting.

> **[Custom typing indicator + hook (forked) - CodeSandbox](https://codesandbox.io/s/custom-typing-indicator-hook-forked-g8301?file=%2Fsrc%2FCustomizedApp.jsx)**
>
> Custom typing indicator + hook (forked) by tylerhammer using prop-types, react, react-dom, react-scripts, sendbird, sendbird-uikit, uuid

---

<div class="post-metadata">

**Author:** ![omar.lopez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/omar.lopez/32/1537_2.png) [@omar.lopez](https://community.sendbird.com/u/omar.lopez)\
**Post date:** [November 16, 2021, 9:47pm UTC](https://community.sendbird.com/t/setting-initial-channel/2291/8 "2021-11-16T21:47:23Z")

</div>

We need this functionality also. It seems odd not being able to decide when to load a channel or not.

---

<div class="post-metadata">

**Author:** ![ryanburns](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/ryanburns/32/2038_2.png) [@ryanburns](https://community.sendbird.com/u/ryanburns)\
**Post date:** [February 8, 2022, 5:15am UTC](https://community.sendbird.com/t/setting-initial-channel/2291/9 "2022-02-08T05:15:55Z")

</div>

An alternate solution is to use the `sortChannelList` param. When this is provided, the `ChannelList` component will select the first item in your list.

There is an example of this [here](https://github.com/sendbird/sendbird-uikit-react/blob/d0feff1a18ec526b92386328848e2ae7af6f66b3/src/smart-components/ChannelList/stories/index.stories.js#L95-L96)

It still seems odd the ability to set an initial channel is not supported out of the box by `ChannelList`.  
How might a PR be raised to support this? Do any dev’s at sendbird have a preferred solution for a proper fix?

Cheers!

---

<div class="post-metadata">

**Author:** ![minhdat97](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/minhdat97/32/1811_2.png) [@minhdat97](https://community.sendbird.com/u/minhdat97)\
**Post date:** [February 11, 2022, 3:35am UTC](https://community.sendbird.com/t/setting-initial-channel/2291/10 "2022-02-11T03:35:23Z")

</div>

I’m still stuck at this problem. Does anyone have any solution?

---

<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:43pm UTC](https://community.sendbird.com/t/setting-initial-channel/2291/11 "2022-03-25T19:43:13Z")

</div>

I was experiencing this problem and it ended up being related to passing a value for the `queries` prop to the `ChannelList` component.

I found the solution here: [IncludeEmpty option is re-rendering the ChannelList - #9 by Jared](https://community.sendbird.com/t/includeempty-option-is-re-rendering-the-channellist/3315/9)
