# Unread count of all messages

**URL:** <https://community.sendbird.com/t/unread-count-of-all-messages/1777>\
**Category:** React\
**Created:** [March 1, 2021, 12:51pm UTC](https://community.sendbird.com/t/unread-count-of-all-messages/1777 "2021-03-01T12:51:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![oroce](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/oroce/32/999_2.png) [@oroce](https://community.sendbird.com/u/oroce)\
**Post date:** [March 1, 2021, 12:51pm UTC](https://community.sendbird.com/t/unread-count-of-all-messages/1777/1 "2021-03-01T12:51:42Z")

</div>

Hello is there a way to get the overall number of unread message count in UIKit using React? (I’m using 2.0.2)

I can see that the SDK receives and internally it tracks the number of unread messages it seems it isn’t exposed.

Our goal is to show a red dot badge next to the chat menu in our application if there’s an unread message (the SendbirdProvider is already initialized but the ChannelList is not yet at this point).

Right now I couldn’t come up with a better solution but poll the API every 30 seconds. Also, it might be even better to have a selector for that so the UI could be updated on its change.

```auto
// useInterval is Dan Abramov's setInterval as React hook: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
import useInterval from './useInterval'; 

import Sendbird from 'sendbird';
import _ from 'lodash';

const Menu = (props: { sdk: Sendbird.SendBirdInstance }) => {
    const location = useLocation();
    const [unreadCount, setUnreadCount] = useState(0);
    useInterval(async () => {
      if (_.isEmpty(props.sdk)) {
        return;
      }

      const unread = await props.sdk.getTotalUnreadMessageCount();

      setUnreadCount(unread);
    }, 30 * 1000); // every 30 seconds

   return (
     <ChatMenuItem showBadge={unreadCount > 0} />
   );
})

const MenuWithSendbird = withSendBird(Menu, state => ({ sdk: sendBirdSelectors.getSdk(state) }));

```

---

<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:** [March 1, 2021, 1:54pm UTC](https://community.sendbird.com/t/unread-count-of-all-messages/1777/2 "2021-03-01T13:54:22Z")

</div>

@oroce

Just to make sure I understand, you want to display the total number of unread messages across all chats on the chat menu in your application, correct?

Thanks,  
Tyler

---

<div class="post-metadata">

**Author:** ![oroce](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/oroce/32/999_2.png) [@oroce](https://community.sendbird.com/u/oroce)\
**Post date:** [March 1, 2021, 2:28pm UTC](https://community.sendbird.com/t/unread-count-of-all-messages/1777/3 "2021-03-01T14:28:38Z")

</div>

@Tyler yes, that’s the goal.  
Robert

---

<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:** [March 1, 2021, 2:53pm UTC](https://community.sendbird.com/t/unread-count-of-all-messages/1777/4 "2021-03-01T14:53:56Z")

</div>

Thanks for that! So while you can’t do it with the UIKit alone, you could implement the Core SDK alongside the UIKit, and utilize the following call to retrieve the number you’re looking for: [https://sendbird.com/docs/chat/v3/javascript/guides/group-channel-advanced#2-retrieve-number-of-unread-messages-in-all-channels](https://sendbird.com/docs/chat/v3/javascript/guides/group-channel-advanced#2-retrieve-number-of-unread-messages-in-all-channels)

You could then use the onChannelChanged() event handler to re-query the number.  
A rough example of this could look something like this:

```javascript
export const getTotalUnreadMessageCount = () => async (dispatch) => {
  try {
    const sb = SendBird.getInstance();
    sb.getTotalUnreadMessageCount((count, error) => {
      if (error) {
        console.log(error);
      }

      console.log(count);
    });
  } catch (err) {
    console.log('getTotalUnreadMessageCount', err);
  }
};

```

And then your handler would be:

```javascript
const channelHandler = new sb.ChannelHandler();
channelHandler.onChannelChanged = (channel) => {
    getTotalUnreadMessageCount();
  };

sb.addChannelHandler('ChatWindowHandler', channelHandler);

```

---

<div class="post-metadata">

**Author:** ![oroce](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/oroce/32/999_2.png) [@oroce](https://community.sendbird.com/u/oroce)\
**Post date:** [March 1, 2021, 3:00pm UTC](https://community.sendbird.com/t/unread-count-of-all-messages/1777/5 "2021-03-01T15:00:32Z")

</div>

Awesome. I used the core sdk before, so I’m kinda familiar with it I just wasn’t sure which handler I should use.  
This will make our implementation so much cleaner. Thanks for that @Tyler!

---

<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:** [March 1, 2021, 3:13pm UTC](https://community.sendbird.com/t/unread-count-of-all-messages/1777/6 "2021-03-01T15:13:32Z")

</div>

Anytime! Should you have any additional questions regarding it, don’t hesitate to reach out.

-Tyler