Prevent keep calling Lists :id API for the title

Memoize all the things!!1!

src/components/shortcuts-settings.jsx

@@ -1,5 +1,6 @@
 import './shortcuts-settings.css';
 
+import mem from 'mem';
 import { useEffect, useState } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
 
@@ -90,10 +91,15 @@ export const SHORTCUTS_META = {
     icon: 'notification',
   },
   list: {
-    title: async ({ id }) => {
+    title: mem(
+      async ({ id }) => {
         const list = await api().masto.v1.lists.fetch(id);
         return list.title;
       },
+      {
+        cacheKey: ([{ id }]) => id,
+      },
+    ),
     path: ({ id }) => `/l/${id}`,
     icon: 'list',
   },
@@ -109,10 +115,15 @@ export const SHORTCUTS_META = {
     icon: 'search',
   },
   'account-statuses': {
-    title: async ({ id }) => {
+    title: mem(
+      async ({ id }) => {
         const account = await api().masto.v1.accounts.fetch(id);
         return account.username || account.acct || account.displayName;
       },
+      {
+        cacheKey: ([{ id }]) => id,
+      },
+    ),
     path: ({ id }) => `/a/${id}`,
     icon: 'user',
   },

src/components/shortcuts.jsx

@@ -1,7 +1,7 @@
 import './shortcuts.css';
 
 import { Menu, MenuItem } from '@szhsin/react-menu';
-import { useRef } from 'preact/hooks';
+import { useMemo, useRef } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
@@ -23,7 +23,9 @@ function Shortcuts() {
 
   const menuRef = useRef();
 
-  const formattedShortcuts = shortcuts
+  const formattedShortcuts = useMemo(
+    () =>
+      shortcuts
         .map((pin, i) => {
           const { type, ...data } = pin;
           if (!SHORTCUTS_META[type]) return null;
@@ -45,7 +47,9 @@ function Shortcuts() {
             icon,
           };
         })
-    .filter(Boolean);
+        .filter(Boolean),
+    [shortcuts],
+  );
 
   const navigate = useNavigate();
   useHotkeys(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (e, handler) => {