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.

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

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