diff --git a/.jules/bolt.md b/.jules/bolt.md new file mode 100644 index 0000000000..4c138e4dcb --- /dev/null +++ b/.jules/bolt.md @@ -0,0 +1,3 @@ +## 2024-04-28 - Component Array Sorting Performance +**Learning:** In React components like `ConversationsSidebar`, copying and sorting arrays on every render (e.g., `[...conversations].sort(...)`) causes unnecessary object allocation and CPU overhead, especially if the component has local state causing frequent re-renders (like input selection). Additionally, when dealing with standard ISO 8601 timestamp strings, allocating `new Date()` objects purely for chronological sorting is an expensive anti-pattern. +**Action:** Always wrap array mapping/sorting in `useMemo` when deriving lists from props. Furthermore, use lexicographical string comparison (`b.localeCompare(a)`) to sort ISO 8601 date strings instead of parsing them into `Date` objects. diff --git a/apps/app/src/components/ConversationsSidebar.tsx b/apps/app/src/components/ConversationsSidebar.tsx index 75d768bee2..ee6319c5e9 100644 --- a/apps/app/src/components/ConversationsSidebar.tsx +++ b/apps/app/src/components/ConversationsSidebar.tsx @@ -2,7 +2,7 @@ * Conversations sidebar component — left sidebar with conversation list. */ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { useApp } from "../AppContext"; interface ConversationsSidebarProps { @@ -54,11 +54,11 @@ export function ConversationsSidebar({ } }, [editingId]); - const sortedConversations = [...conversations].sort((a, b) => { - const aTime = new Date(a.updatedAt).getTime(); - const bTime = new Date(b.updatedAt).getTime(); - return bTime - aTime; - }); + const sortedConversations = useMemo(() => { + // ⚡ Bolt: Memoize the sorting and use lexicographical string comparison + // for ISO 8601 timestamps to avoid expensive new Date() allocations on every render. + return [...conversations].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt)); + }, [conversations]); const handleDoubleClick = (conv: { id: string; title: string }) => { setEditingId(conv.id);