# Multiple Lists

This example covers the case where you render two `ChannelList` components in the same app.

By default, both lists listen to `message.new` events for all channels. If a message arrives in list B, list A will also bump that channel to the top. That’s not desirable when lists are separate, but you can control it.

## Best Practices

- Use `channelRenderFilterFn` to keep lists isolated by type or purpose.
- Ensure each list has distinct `filters` and `sort` to avoid overlap.
- Avoid heavy filtering logic in render; keep it deterministic and fast.
- Document the intended separation so future handlers don’t merge lists.
- Test real-time events to confirm cross-list updates are blocked.

## channelRenderFilterFn prop

This happens because `ChannelList` pulls channels from `client.activeChannels` when it receives events, even if the channel isn’t part of the list’s original query.

Use `channelRenderFilterFn` to apply custom filtering to the rendered list. You can filter by type, custom fields, or anything else in the channel object.

```tsx
const customChannelFilterFunction = (channels: Channel[]) => {
  return channels.filter(/** your custom filter logic */);
};

<ChannelList
  channelRenderFilterFn={customChannelFilterFunction}
  filters={filters}
  sort={sort}
  options={options}
/>;
```


---

This page was last updated at 2026-04-21T07:55:47.536Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/guides/multiple_channel_lists/](https://getstream.io/chat/docs/sdk/react/v13/guides/multiple_channel_lists/).