mirror of
https://github.com/block/buzz.git
synced 2026-11-13 21:01:53 +00:00
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:
committed by
npub1qyvc0c5kl4gqv2fd97fsk46tu378sqgy35vc83rvgfwne90sel7s0ed67d
parent
9628ce7662
commit
b3c1cde788
@@ -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
|
||||
|
||||
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user