Memoize useQuickActions internally, make useMemo unnecessary at callsites

.oxlintrc.json

@@ -36,7 +36,7 @@
     "react/button-has-type": "error",
     "react/jsx-boolean-value": "error",
 
-    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/exhaustive-deps": ["error", { "additionalHooks": "useQuickActions" }],
     "react-hooks/rules-of-hooks": "error",
     "import/no-default-export": "error",
     "consistent-type-imports": "error",

app/hooks/use-quick-actions.tsx

@@ -101,15 +101,22 @@ function useParentActions(): QuickActionItem[] {
 }
 
 /**
- * Register action items with the global quick actions menu. `items` must
- * be memoized by the caller, otherwise the effect will run too often.
+ * Register action items with the global quick actions menu. Takes a factory
+ * and deps array like useMemo — the linter checks deps via additionalHooks.
  *
  * Each component instance gets its own source slot (via useId), so items are
  * cleaned up automatically when the component unmounts without affecting
  * other sources' registrations.
  */
-export function useQuickActions(items: QuickActionItem[]) {
+export function useQuickActions(
+  factory: () => QuickActionItem[],
+  deps: React.DependencyList
+) {
   const sourceId = useId()
+  // Deps are checked by the linter at call sites via the additionalHooks
+  // option in .oxlintrc.json, so we can safely forward them here.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const items = useMemo(factory, deps)
 
   useEffect(() => {
     setSourceItems(sourceId, items)

app/layouts/ProjectLayoutBase.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useMemo, type ReactElement } from 'react'
+import type { ReactElement } from 'react'
 import { useLocation, type LoaderFunctionArgs } from 'react-router'
 
 import { api, q, queryClient, usePrefetchedQuery } from '@oxide/api'
@@ -58,28 +58,27 @@ export function ProjectLayoutBase({ overrideContentPane }: ProjectLayoutProps) {
   const { data: project } = usePrefetchedQuery(projectView(projectSelector))
 
   const { pathname } = useLocation()
+
   useQuickActions(
-    useMemo(
-      () =>
-        [
-          { value: 'Instances', path: pb.instances(projectSelector) },
-          { value: 'Disks', path: pb.disks(projectSelector) },
-          { value: 'Snapshots', path: pb.snapshots(projectSelector) },
-          { value: 'Images', path: pb.projectImages(projectSelector) },
-          { value: 'VPCs', path: pb.vpcs(projectSelector) },
-          { value: 'Floating IPs', path: pb.floatingIps(projectSelector) },
-          { value: 'Affinity Groups', path: pb.affinity(projectSelector) },
-          { value: 'Project Access', path: pb.projectAccess(projectSelector) },
-        ]
-          // filter out the entry for the path we're currently on
-          .filter((i) => i.path !== pathname)
-          .map((i) => ({
-            navGroup: `Project '${project.name}'`,
-            value: i.value,
-            action: i.path,
-          })),
-      [pathname, project.name, projectSelector]
-    )
+    () =>
+      [
+        { value: 'Instances', path: pb.instances(projectSelector) },
+        { value: 'Disks', path: pb.disks(projectSelector) },
+        { value: 'Snapshots', path: pb.snapshots(projectSelector) },
+        { value: 'Images', path: pb.projectImages(projectSelector) },
+        { value: 'VPCs', path: pb.vpcs(projectSelector) },
+        { value: 'Floating IPs', path: pb.floatingIps(projectSelector) },
+        { value: 'Affinity Groups', path: pb.affinity(projectSelector) },
+        { value: 'Project Access', path: pb.projectAccess(projectSelector) },
+      ]
+        // filter out the entry for the path we're currently on
+        .filter((i) => i.path !== pathname)
+        .map((i) => ({
+          navGroup: `Project '${project.name}'`,
+          value: i.value,
+          action: i.path,
+        })),
+    [pathname, project.name, projectSelector]
   )
 
   return (

app/layouts/SettingsLayout.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useMemo } from 'react'
 import { useLocation } from 'react-router'
 
 import {
@@ -30,22 +29,20 @@ export default function SettingsLayout() {
   const { pathname } = useLocation()
 
   useQuickActions(
-    useMemo(
-      () =>
-        [
-          { value: 'Profile', path: pb.profile() },
-          { value: 'SSH Keys', path: pb.sshKeys() },
-          { value: 'Access Tokens', path: pb.accessTokens() },
-        ]
-          // filter out the entry for the path we're currently on
-          .filter((i) => i.path !== pathname)
-          .map((i) => ({
-            navGroup: `Settings`,
-            value: i.value,
-            action: i.path,
-          })),
-      [pathname]
-    )
+    () =>
+      [
+        { value: 'Profile', path: pb.profile() },
+        { value: 'SSH Keys', path: pb.sshKeys() },
+        { value: 'Access Tokens', path: pb.accessTokens() },
+      ]
+        // filter out the entry for the path we're currently on
+        .filter((i) => i.path !== pathname)
+        .map((i) => ({
+          navGroup: `Settings`,
+          value: i.value,
+          action: i.path,
+        })),
+    [pathname]
   )
 
   return (

app/layouts/SiloLayout.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useMemo } from 'react'
 import { useLocation } from 'react-router'
 
 import {
@@ -29,23 +28,21 @@ export default function SiloLayout() {
   const { me } = useCurrentUser()
 
   useQuickActions(
-    useMemo(
-      () =>
-        [
-          { value: 'Projects', path: pb.projects() },
-          { value: 'Images', path: pb.siloImages() },
-          { value: 'Utilization', path: pb.siloUtilization() },
-          { value: 'Silo Access', path: pb.siloAccess() },
-        ]
-          // filter out the entry for the path we're currently on
-          .filter((i) => i.path !== pathname)
-          .map((i) => ({
-            navGroup: `Silo '${me.siloName}'`,
-            value: i.value,
-            action: i.path,
-          })),
-      [pathname, me.siloName]
-    )
+    () =>
+      [
+        { value: 'Projects', path: pb.projects() },
+        { value: 'Images', path: pb.siloImages() },
+        { value: 'Utilization', path: pb.siloUtilization() },
+        { value: 'Silo Access', path: pb.siloAccess() },
+      ]
+        // filter out the entry for the path we're currently on
+        .filter((i) => i.path !== pathname)
+        .map((i) => ({
+          navGroup: `Silo '${me.siloName}'`,
+          value: i.value,
+          action: i.path,
+        })),
+    [pathname, me.siloName]
   )
 
   return (

app/layouts/SystemLayout.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useMemo } from 'react'
 import { useLocation } from 'react-router'
 
 import { api, q, queryClient } from '@oxide/api'
@@ -48,7 +47,7 @@ export default function SystemLayout() {
 
   const { me } = useCurrentUser()
 
-  const actions = useMemo(() => {
+  useQuickActions(() => {
     const systemLinks = [
       { value: 'Silos', path: pb.silos() },
       { value: 'Utilization', path: pb.systemUtilization() },
@@ -73,8 +72,6 @@ export default function SystemLayout() {
     return [...systemLinks, backToSilo]
   }, [pathname, me.siloName])
 
-  useQuickActions(actions)
-
   return (
     <PageContainer>
       <TopBar systemOrSilo="system" />

app/pages/ProjectsPage.tsx

@@ -7,7 +7,7 @@
  */
 import { useQuery } from '@tanstack/react-query'
 import { createColumnHelper } from '@tanstack/react-table'
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { Outlet, useNavigate } from 'react-router'
 
 import { api, getListQFn, q, queryClient, useApiMutation, type Project } from '@oxide/api'
@@ -103,22 +103,21 @@ export default function ProjectsPage() {
   })
 
   const { data: allProjects } = useQuery(q(api.projectList, { query: { limit: ALL_ISH } }))
+
   useQuickActions(
-    useMemo(
-      () => [
-        {
-          value: 'New project',
-          navGroup: 'Actions',
-          action: pb.projectsNew(),
-        },
-        ...(allProjects?.items || []).map((p) => ({
-          value: p.name,
-          action: pb.project({ project: p.name }),
-          navGroup: 'Go to project',
-        })),
-      ],
-      [allProjects]
-    )
+    () => [
+      {
+        value: 'New project',
+        navGroup: 'Actions',
+        action: pb.projectsNew(),
+      },
+      ...(allProjects?.items || []).map((p) => ({
+        value: p.name,
+        action: pb.project({ project: p.name }),
+        navGroup: 'Go to project',
+      })),
+    ],
+    [allProjects]
   )
 
   return (

app/pages/SiloAccessPage.tsx

@@ -166,16 +166,14 @@ export default function SiloAccessPage() {
   })
 
   useQuickActions(
-    useMemo(
-      () => [
-        {
-          value: 'Add user or group',
-          navGroup: 'Actions',
-          action: () => setAddModalOpen(true),
-        },
-      ],
-      []
-    )
+    () => [
+      {
+        value: 'Add user or group',
+        navGroup: 'Actions',
+        action: () => setAddModalOpen(true),
+      },
+    ],
+    []
   )
 
   return (

app/pages/SiloImagesPage.tsx

@@ -97,22 +97,21 @@ export default function SiloImagesPage() {
   const { table } = useQueryTable({ query: imageList, columns, emptyState: <EmptyState /> })
 
   const { data: allImages } = useQuery(q(api.imageList, { query: { limit: ALL_ISH } }))
+
   useQuickActions(
-    useMemo(
-      () => [
-        {
-          value: 'Promote image',
-          navGroup: 'Actions',
-          action: () => setShowModal(true),
-        },
-        ...(allImages?.items || []).map((i) => ({
-          value: i.name,
-          action: pb.siloImageEdit({ image: i.name }),
-          navGroup: 'Go to silo image',
-        })),
-      ],
-      [allImages]
-    )
+    () => [
+      {
+        value: 'Promote image',
+        navGroup: 'Actions',
+        action: () => setShowModal(true),
+      },
+      ...(allImages?.items || []).map((i) => ({
+        value: i.name,
+        action: pb.siloImageEdit({ image: i.name }),
+        navGroup: 'Go to silo image',
+      })),
+    ],
+    [allImages]
   )
 
   return (

app/pages/project/access/ProjectAccessPage.tsx

@@ -207,16 +207,14 @@ export default function ProjectAccessPage() {
   })
 
   useQuickActions(
-    useMemo(
-      () => [
-        {
-          value: 'Add user or group',
-          navGroup: 'Actions',
-          action: () => setAddModalOpen(true),
-        },
-      ],
-      []
-    )
+    () => [
+      {
+        value: 'Add user or group',
+        navGroup: 'Actions',
+        action: () => setAddModalOpen(true),
+      },
+    ],
+    []
   )
 
   return (

app/pages/project/affinity/AffinityPage.tsx

@@ -7,7 +7,7 @@
  */
 
 import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { Outlet, type LoaderFunctionArgs } from 'react-router'
 
 import {
@@ -140,21 +140,19 @@ export default function AffinityPage() {
   })
 
   useQuickActions(
-    useMemo(
-      () => [
-        {
-          value: 'New anti-affinity group',
-          navGroup: 'Actions',
-          action: pb.affinityNew({ project }),
-        },
-        ...antiAffinityGroups.map((g) => ({
-          value: g.name,
-          action: pb.antiAffinityGroup({ project, antiAffinityGroup: g.name }),
-          navGroup: 'Go to anti-affinity group',
-        })),
-      ],
-      [project, antiAffinityGroups]
-    )
+    () => [
+      {
+        value: 'New anti-affinity group',
+        navGroup: 'Actions',
+        action: pb.affinityNew({ project }),
+      },
+      ...antiAffinityGroups.map((g) => ({
+        value: g.name,
+        action: pb.antiAffinityGroup({ project, antiAffinityGroup: g.name }),
+        navGroup: 'Go to anti-affinity group',
+      })),
+    ],
+    [project, antiAffinityGroups]
   )
 
   return (