fix(alerts): memoize selecting alerts (#231)

Author: alex-mcgovern

src/features/alerts/hooks/use-query-get-workspace-alerts-malicious-pkg.ts

@@ -1,9 +1,19 @@
+import {
+  AlertConversation,
+  V1GetWorkspaceAlertsResponse,
+} from "@/api/generated";
 import { filterAlertsCritical } from "../lib/filter-alerts-critical";
 import { isAlertMalicious } from "../lib/is-alert-malicious";
 import { useQueryGetWorkspaceAlerts } from "./use-query-get-workspace-alerts";
 
+// NOTE: This needs to be a stable function reference to enable memo-isation of
+// the select operation on each React re-render.
+function select(data: V1GetWorkspaceAlertsResponse): AlertConversation[] {
+  return filterAlertsCritical(data).filter(isAlertMalicious);
+}
+
 export function useQueryGetWorkspaceAlertsMaliciousPkg() {
   return useQueryGetWorkspaceAlerts({
-    select: (data) => filterAlertsCritical(data).filter(isAlertMalicious),
+    select,
   });
 }

src/features/alerts/hooks/use-query-get-workspace-alerts-secrets.ts

@@ -1,9 +1,19 @@
+import {
+  V1GetWorkspaceAlertsResponse,
+  AlertConversation,
+} from "@/api/generated";
 import { filterAlertsCritical } from "../lib/filter-alerts-critical";
 import { isAlertSecret } from "../lib/is-alert-secret";
 import { useQueryGetWorkspaceAlerts } from "./use-query-get-workspace-alerts";
 
+// NOTE: This needs to be a stable function reference to enable memo-isation of
+// the select operation on each React re-render.
+function select(data: V1GetWorkspaceAlertsResponse): AlertConversation[] {
+  return filterAlertsCritical(data).filter(isAlertSecret);
+}
+
 export function useQueryGetWorkspaceAlertSecrets() {
   return useQueryGetWorkspaceAlerts({
-    select: (data) => filterAlertsCritical(data).filter(isAlertSecret),
+    select,
   });
 }

src/features/workspace/hooks/use-active-workspace-name.ts

@@ -1,7 +1,14 @@
+import { ListActiveWorkspacesResponse } from "@/api/generated";
 import { useActiveWorkspaces } from "./use-active-workspaces";
 
+// NOTE: This needs to be a stable function reference to enable memo-isation of
+// the select operation on each React re-render.
+function select(data: ListActiveWorkspacesResponse | undefined): string | null {
+  return data?.workspaces?.[0]?.name ?? null;
+}
+
 export function useActiveWorkspaceName() {
   return useActiveWorkspaces({
-    select: (d) => d?.workspaces?.[0]?.name ?? null,
+    select,
   });
 }

src/hooks/useAlertsData.ts

@@ -52,6 +52,8 @@ export const useFilteredAlerts = () => {
   const { isMaliciousFilterActive, search } = useAlertSearch();
 
   return useAlertsData({
+    // NOTE: Inlined select will run on every render, we'll remove this over
+    // time though - AMG
     select: (
       data: Exclude<ReturnType<typeof useAlertsData>["data"], undefined>,
     ) => {

src/hooks/usePromptsData.ts

@@ -7,13 +7,13 @@ import {
 import { v1GetWorkspaceMessagesOptions } from "@/api/generated/@tanstack/react-query.gen";
 import { useActiveWorkspaceName } from "@/features/workspace/hooks/use-active-workspace-name";
 
-const selectConversations = (
-  data: V1GetWorkspaceMessagesResponse,
-): Conversation[] => {
+// NOTE: This needs to be a stable function reference to enable memo-isation of
+// the select operation on each React re-render.
+function select(data: V1GetWorkspaceMessagesResponse): Conversation[] {
   return data.filter((prompt) =>
     prompt.question_answers?.every((item) => item.answer && item.question),
   );
-};
+}
 
 export const usePromptsData = () => {
   const { data: activeWorkspaceName } = useActiveWorkspaceName();
@@ -26,6 +26,6 @@ export const usePromptsData = () => {
 
   return useQuery({
     ...v1GetWorkspaceMessagesOptions(options),
-    select: selectConversations,
+    select: select,
   });
 };