diff --git a/desktop/src/features/messages/ui/MessageRow.tsx b/desktop/src/features/messages/ui/MessageRow.tsx index e253a05c15..aa7e259c03 100644 --- a/desktop/src/features/messages/ui/MessageRow.tsx +++ b/desktop/src/features/messages/ui/MessageRow.tsx @@ -198,11 +198,7 @@ export const MessageRow = React.memo( ); const bodyOffsetClass = emojiOnly ? "mt-1" : "-mt-0.5"; - const { channels } = useChannelNavigation(); - const channelNames = React.useMemo( - () => channels.filter((c) => c.channelType !== "dm").map((c) => c.name), - [channels], - ); + const { nonDmChannelNames: channelNames } = useChannelNavigation(); const indentRem = getThreadReplyIndentRem(message.depth); const descendantGuideOffsetRem = connectDescendants diff --git a/desktop/src/shared/context/ChannelNavigationContext.tsx b/desktop/src/shared/context/ChannelNavigationContext.tsx index 62153338c4..8a3185ccd6 100644 --- a/desktop/src/shared/context/ChannelNavigationContext.tsx +++ b/desktop/src/shared/context/ChannelNavigationContext.tsx @@ -4,11 +4,15 @@ import type { Channel } from "@/shared/api/types"; type ChannelNavigationContextValue = { channels: Channel[]; + /** Names of non-DM channels, memoised once so render-hot consumers (message + * rows) don't each re-filter the full channel list on every render. */ + nonDmChannelNames: string[]; }; const ChannelNavigationContext = React.createContext({ channels: [], + nonDmChannelNames: [], }); export function ChannelNavigationProvider({ @@ -18,7 +22,15 @@ export function ChannelNavigationProvider({ channels: Channel[]; children: React.ReactNode; }) { - const value = React.useMemo(() => ({ channels }), [channels]); + const value = React.useMemo( + () => ({ + channels, + nonDmChannelNames: channels + .filter((c) => c.channelType !== "dm") + .map((c) => c.name), + }), + [channels], + ); return (