# Channel list data is inconsistent

**URL:** <https://community.sendbird.com/t/channel-list-data-is-inconsistent/8836>\
**Category:** React Native\
**Tags:** chatsdk, react-native\
**Created:** [January 4, 2024, 11:40am UTC](https://community.sendbird.com/t/channel-list-data-is-inconsistent/8836 "2024-01-04T11:40:35Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sumit\_Dey](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sumit_dey/32/4819_2.png) [@Sumit\_Dey](https://community.sendbird.com/u/Sumit_Dey)\
**Post date:** [January 4, 2024, 11:40am UTC](https://community.sendbird.com/t/channel-list-data-is-inconsistent/8836/1 "2024-01-04T11:40:35Z")

</div>

**[Problem/Question]**

```auto
// ChannelFlatList : 

const ChannelFlatList: GroupChannelListModule["List"] = (props) => {
  const { sdk } = useSendbirdChat();

  const { groupChannels } = useGroupChannelList(
    sdk,
    userDetails.userID,
  );
}

```

```auto
// ChannelListHeader : 

const ChannelListHeader: GroupChannelListModule["Header"] = () => {
  const { sdk } = useSendbirdChat();

  const { groupChannels } = useGroupChannelList(sdk, userDetails.userID);
// here the groups channel list is not same as the ChannelFlatList. FYI, this list is always correct.

}

```

This is strange, I could not find anything as well, while we are using the same sdk and same userId. This is occurring randomly.

Also, there are two options called queryCreator and collectionCreator. I could not find anything on the docs that explains these two options. This might solve the existing issue. Can you please help me understand how it works. Ideally i want to filter out the channels and render those in the channel list component.

```auto
  const { sdk } = useSendbirdChat();
  const [filteredChannels, setFilteredChannels] = useState<GroupChannel[]>([]);
  const { groupChannels } = useGroupChannelList(sdk, userDetails.userID,{
   queryCreator: ?? or collectionCreator:??
   });

// instead of the below code, I want to use collection creator.
  useEffect(() => {
    if (groupChannels) {
      const filtered = groupChannels.filter((channel) => {
        return !channel.lastMessage || channel.lastMessage.messageType === "admin";
      });
      setFilteredChannels(filtered);
    }
  
  }, [groupChannels]);

```

**[UIKit Version]**  
“@sendbird/chat”: “^4.10.6”,  
“@sendbird/uikit-react-native”: “^3.3.0”,

**[Frequency]**  
random

---

<div class="post-metadata">

**Author:** ![Airen\_Kang](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/airen_kang/32/1831_2.png) [@Airen\_Kang](https://community.sendbird.com/u/Airen_Kang)\
**Post date:** [January 5, 2024, 5:50am UTC](https://community.sendbird.com/t/channel-list-data-is-inconsistent/8836/2 "2024-01-05T05:50:58Z")

</div>

Hello @Sumit_Dey

Here is how to apply filters to the data source:

```tsx
const GroupChannelListFragment = createGroupChannelListFragment();
const GroupChannelListScreen = () => {
  const { sdk } = useSendbirdChat();

  return (
    <GroupChannelListFragment
      collectionCreator={() => {
        const filter = new GroupChannelFilter();
        filter.myMemberStateFilter = MyMemberStateFilter.JOINED;
        return sdk.groupChannel.createGroupChannelCollection({ filter });
      }}
    />
  );
};

```

* * *

The **useGroupChannelList** hook does not share data through Context or similar means. As two different data sources are created, there is a possibility of the data being different.

Each module’s component primarily handles the UI, and in the Fragment, data is injected into the module through a data source like **useGroupChannelList**.

If you wish to reconfigure the Fragment itself, it is advisable to use the data source at a higher level, where the module is rendered, rather than in the module’s component.

```tsx
import { createExampleModule } from '@sendbird/uikit-react-native';

const Module = createExampleModule();
const MyExampleFragment = () => {
  const { dataList } = useExampleDataSource();

  return <Module.Provider>
    <MyComponent dataSource={dataList} />
    <Module.Component dataSource={dataList} />
  </Module.Provider>
}

```