perf(desktop): hoist non-DM channel-name filter into ChannelNavigation provider

Finding [L4] MessageRow channelNames (Tier 3): every row ran
`channels.filter(non-dm).map(name)` in its own useMemo, so the identical
derivation was recomputed once per mounted row and re-ran whenever the channel
list changed. Compute it once in `ChannelNavigationProvider` as
`nonDmChannelNames` (memoised on `[channels]`) and have rows read it directly.

Additive to the context value — `channels` is unchanged, so other consumers are
unaffected.

Co-authored-by: Tyler Longwell <tlongwell@block.xyz>
Signed-off-by: Tyler Longwell <tlongwell@block.xyz>
This commit is contained in:
npub1cc3ha7z055mu0rwwu7806t2wt8mj3pvu0uv5mfp2c50dahaqhczshdalg6
2026-07-08 10:25:55 -04:00
committed by npub1qyvc0c5kl4gqv2fd97fsk46tu378sqgy35vc83rvgfwne90sel7s0ed67d
parent 9628ce7662
commit b3c1cde788
2 changed files with 14 additions and 6 deletions

View File

@@ -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

View File

@@ -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<ChannelNavigationContextValue>({
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 (
<ChannelNavigationContext.Provider value={value}>