From 14e1482d559174cc02bed403517b38fb0d0027b2 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Mon, 8 Jun 2026 11:06:02 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Cache=20IconifyIcon=20resol?= =?UTF-8?q?ution?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: sshahriazz <34005640+sshahriazz@users.noreply.github.com> --- .jules/bolt.md | 1 + client/src/components/base/IconifyIcon.tsx | 21 +++++++++++++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 .jules/bolt.md diff --git a/.jules/bolt.md b/.jules/bolt.md new file mode 100644 index 0000000..f48025e --- /dev/null +++ b/.jules/bolt.md @@ -0,0 +1 @@ +## 2024-06-08 - IconifyIcon Performance Bottleneck\n**Learning:** The IconifyIcon component was doing O(N) array iteration lookups over all icon sets on every render for prefix-less icons, which is a performance bottleneck in React 19 / MUI applications.\n**Action:** Use a Map to cache iconData resolution to prevent performance-blocking lookups. diff --git a/client/src/components/base/IconifyIcon.tsx b/client/src/components/base/IconifyIcon.tsx index b48f0dc..c3aa5af 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, }; +// ⚡ Bolt: Cache icon resolution to avoid O(N) iteration over iconSets 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 to avoid re-searching missing icons + iconCache.set(icon, null); + return undefined; }; const IconifyIcon = ({