refactor(command): stabilize channel refs for task-channel map

Address review: memoize the derived `channels` array in useChannels so its
reference is stable while the data is unchanged, and have useTaskChannelMap
take channels as a parameter instead of opening a second useChannels
subscription. Removes the duplicate subscription and the per-render Map
rebuild that cascaded into taskSections recomputing.

Generated-By: PostHog Code
Task-Id: bc6e7269-db09-4ef7-b3a4-41f0ca03abaf

Author: raquelmsmith

packages/ui/src/features/canvas/hooks/useChannels.ts

@@ -2,7 +2,7 @@ import type { Schemas } from "@posthog/api-client";
 import { useOptionalAuthenticatedClient } from "@posthog/ui/features/auth/authClient";
 import { useAuthenticatedQuery } from "@posthog/ui/hooks/useAuthenticatedQuery";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 
 const CHANNELS_POLL_INTERVAL_MS = 30_000;
 const CHANNELS_QUERY_KEY = ["canvas-channels"] as const;
@@ -37,10 +37,16 @@ export function useChannels(options?: { enabled?: boolean }): {
       refetchInterval: CHANNELS_POLL_INTERVAL_MS,
     },
   );
-  const channels = (query.data ?? [])
-    .filter((fs) => fs.type === "folder")
-    .map(toChannel)
-    .sort((a, b) => a.name.localeCompare(b.name));
+  // Memoize so the array reference is stable while the underlying data is
+  // unchanged — callers depend on `channels` in their own memos/effects.
+  const channels = useMemo(
+    () =>
+      (query.data ?? [])
+        .filter((fs) => fs.type === "folder")
+        .map(toChannel)
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [query.data],
+  );
   return { channels, isLoading: query.isLoading };
 }
 

packages/ui/src/features/canvas/hooks/useTaskChannelMap.ts

@@ -1,8 +1,5 @@
 import { useHostTRPC } from "@posthog/host-router/react";
-import {
-  type Channel,
-  useChannels,
-} from "@posthog/ui/features/canvas/hooks/useChannels";
+import type { Channel } from "@posthog/ui/features/canvas/hooks/useChannels";
 import { useQueries } from "@tanstack/react-query";
 import { useMemo } from "react";
 
@@ -12,12 +9,15 @@ import { useMemo } from "react";
  * the mapping is unambiguous. Fans out one `channelTasks.list` query per
  * channel; results are shared with the channel sidebar's per-section queries
  * through the react-query cache.
+ *
+ * Takes the already-fetched `channels` rather than subscribing to `useChannels`
+ * itself, so the caller owns the single subscription and a stable reference.
  */
-export function useTaskChannelMap(options?: {
-  enabled?: boolean;
-}): Map<string, Channel> {
+export function useTaskChannelMap(
+  channels: Channel[],
+  options?: { enabled?: boolean },
+): Map<string, Channel> {
   const enabled = options?.enabled ?? true;
-  const { channels } = useChannels({ enabled });
   const trpc = useHostTRPC();
   const results = useQueries({
     queries: channels.map((channel) =>

packages/ui/src/features/command/CommandMenu.tsx

@@ -96,7 +96,7 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const closeSettingsDialog = closeSettings;
   const { folders } = useFolders();
   const { channels } = useChannels();
-  const taskChannelMap = useTaskChannelMap({ enabled: open });
+  const taskChannelMap = useTaskChannelMap(channels, { enabled: open });
   const { theme, setTheme } = useThemeStore();
   const toggleLeftSidebar = useSidebarStore((state) => state.toggle);
   const view = useAppView();