⚡ Bolt: consolidate array derivations in CategoryFilterWidget

.jules/bolt.md

@@ -1,7 +1,3 @@
-## 2023-10-27 - Preventing Unnecessary Re-renders in Interval Components
-**Learning:** A `setInterval` that blindly updates state with `new Date()` causes full component re-renders every second, even if the displayed time (e.g., hours and minutes only) hasn't changed. In interval-based components, React will re-render if the state reference changes, wasting CPU cycles on unnecessary DOM diffing when the visual output remains identical.
-**Action:** Use functional state updates (`setState(prev => ...)`) and return the exact `prev` state reference when the derived displayed value (minutes or seconds) remains the same to safely abort the React render cycle.
-
-## 2025-03-09 - Replace .map() with point updates for React state arrays
-**Learning:** For updating single items in small React state arrays (e.g., layout configurations or task lists), using `array.map()` introduces significant performance overhead by iterating through the entire array and calling the callback for every element. This causes unnecessary processing.
-**Action:** Prefer "point updates" using `findIndex` and array spreading over `array.map()`. This minimizes object allocations and improves fluidity, especially on lower-power devices.
+## 2025-03-09 - Consolidate iterative derivations with a single loop in `useMemo`
+**Learning:** Extracting distinct derived data pieces from the same collection using multiple sequential `.map()` and `.flatMap()` operations incurs heavy performance costs through multiple traversals and unneeded temporary array allocations.
+**Action:** When extracting multiple distinct unique sets (e.g. categories and profiles) from a single list of objects (like shortcuts), iterate via a single `for...of` loop inside one combined `useMemo` block, updating multiple `Set` objects concurrently to minimize object allocation and reduce computation time.

components/CategoryFilterWidget.tsx

@@ -6,12 +6,24 @@ import { UsersIcon } from '@heroicons/react/24/outline';
 export const CategoryFilterWidget: React.FC = () => {
   const { shortcuts, filterCategory, setFilterCategory, filterProfile, setFilterProfile } = useGTab();
 
-  const activeCategories = useMemo(() => {
-    return ['All', ...new Set(shortcuts.map(s => s.category))];
-  }, [shortcuts]);
+  const { activeCategories, uniqueProfiles } = useMemo(() => {
+    const categorySet = new Set<string>(['All']);
+    const profileSet = new Set<string>();
+
+    // Single pass to gather both categories and profiles to avoid multiple mapping arrays
+    for (const s of shortcuts) {
+      if (s.category) categorySet.add(s.category);
+      if (s.profiles) {
+        for (const p of s.profiles) {
+          if (p.name) profileSet.add(p.name);
+        }
+      }
+    }
 
-  const uniqueProfiles = useMemo(() => {
-    return Array.from(new Set(shortcuts.flatMap(s => s.profiles?.map(p => p.name) || []))).sort();
+    return {
+      activeCategories: Array.from(categorySet),
+      uniqueProfiles: Array.from(profileSet).sort(),
+    };
   }, [shortcuts]);
 
   return (