diff --git a/.jules/bolt.md b/.jules/bolt.md new file mode 100644 index 0000000..fb634a8 --- /dev/null +++ b/.jules/bolt.md @@ -0,0 +1,3 @@ +## 2024-04-06 - O(N) Icon Lookup Bottleneck +**Learning:** The custom `IconifyIcon` wrapper iterates through all imported static icon sets for prefix-less icons on EVERY render of an icon. With hundreds of icons rendered on a page, this O(N) lookup (where N is the number of icon sets multiplied by their size) becomes a significant main-thread blocker during render. +**Action:** Always cache/memoize the results of expensive, pure lookup functions that are called frequently during React renders, especially when dealing with large datasets like icon packs. diff --git a/client/src/components/base/IconifyIcon.tsx b/client/src/components/base/IconifyIcon.tsx index b48f0dc..72d49f8 100644 --- a/client/src/components/base/IconifyIcon.tsx +++ b/client/src/components/base/IconifyIcon.tsx @@ -33,18 +33,37 @@ const iconSets: Record = { "mdi-light": mdiLightIcons, }; +// ⚡ Bolt Performance Optimization: +// Cache the resolved icon data using a Map to avoid prototype pollution risks +// and to cache negative lookups (when data is undefined) as well. +// Although getIconData internally uses O(1) lookups, caching the result at the top level +// saves redundant split operations and multiple set iterations on every render. +const iconCache = new Map(); + const iconData = (icon: string) => { + if (iconCache.has(icon)) return iconCache.get(icon); + const [prefix, name] = icon.includes(":") ? icon.split(":") : ["", icon]; if (prefix && iconSets[prefix]) { const data = getIconData(iconSets[prefix], name); - if (data) return data; + if (data) { + iconCache.set(icon, data); + return data; + } } for (const [_, icons] of Object.entries(iconSets)) { const data = getIconData(icons, name); - if (data) return data; + if (data) { + iconCache.set(icon, data); + return data; + } } + + // Cache negative result + iconCache.set(icon, undefined); + return undefined; }; const IconifyIcon = ({