diff --git a/.jules/bolt.md b/.jules/bolt.md new file mode 100644 index 0000000000..c81ab859c0 --- /dev/null +++ b/.jules/bolt.md @@ -0,0 +1,3 @@ +## 2024-06-03 - Memoizing ISO date sorting +**Learning:** In React list components, `Array.sort()` with `new Date()` allocations is incredibly expensive (~10x slower than string comparison) on re-renders. `useMemo` combined with `localeCompare` on ISO date strings prevents this bottleneck. +**Action:** Always memoize derived lists and prefer lexicographical string comparisons over `Date` parsing for ISO 8601 timestamps. diff --git a/apps/app/src/components/ConversationsSidebar.tsx b/apps/app/src/components/ConversationsSidebar.tsx index 75d768bee2..786521beb4 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,12 @@ 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; - }); + // ⚡ Bolt: Memoize the sorting of conversations and use string comparison instead of allocating new Date objects to prevent expensive computation on every re-render. + const sortedConversations = useMemo(() => { + return [...conversations].sort((a, b) => + b.updatedAt.localeCompare(a.updatedAt), + ); + }, [conversations]); const handleDoubleClick = (conv: { id: string; title: string }) => { setEditingId(conv.id);