diff --git a/.jules/bolt.md b/.jules/bolt.md new file mode 100644 index 0000000..bb54e95 --- /dev/null +++ b/.jules/bolt.md @@ -0,0 +1,3 @@ +## 2026-05-11 - [IconifyIcon O(N) Lookup Optimization] +**Learning:** The custom `IconifyIcon` component uses an O(N) iteration over multiple large `@iconify-json` static icon sets to support offline prefix-less icon lookups. This lookup runs on every render, which is a significant bottleneck given the component is used hundreds of times across the application. +**Action:** Implement a simple memoization cache (e.g. `Map`) for `iconData` results to prevent redundant O(N) JSON tree iterations and `getIconData` calls during React re-renders. diff --git a/client/src/components/base/IconifyIcon.tsx b/client/src/components/base/IconifyIcon.tsx index b48f0dc..04e3c06 100644 --- a/client/src/components/base/IconifyIcon.tsx +++ b/client/src/components/base/IconifyIcon.tsx @@ -33,18 +33,35 @@ const iconSets: Record = { "mdi-light": mdiLightIcons, }; +const iconDataCache = new Map(); + const iconData = (icon: string) => { + if (iconDataCache.has(icon)) { + return iconDataCache.get(icon); + } + const [prefix, name] = icon.includes(":") ? icon.split(":") : ["", icon]; + let result; if (prefix && iconSets[prefix]) { const data = getIconData(iconSets[prefix], name); - if (data) return data; + if (data) { + result = data; + } } - for (const [_, icons] of Object.entries(iconSets)) { - const data = getIconData(icons, name); - if (data) return data; + if (!result) { + for (const [_, icons] of Object.entries(iconSets)) { + const data = getIconData(icons, name); + if (data) { + result = data; + break; + } + } } + + iconDataCache.set(icon, result); + return result; }; const IconifyIcon = ({