From 773eb38f3ee89aeeae681e58c75649495a30c56e Mon Sep 17 00:00:00 2001 From: Dexploarer <211557447+Dexploarer@users.noreply.github.com> Date: Tue, 28 Apr 2026 22:05:15 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Memoize=20and=20optimize=20?= =?UTF-8?q?conversation=20sidebar=20sorting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Wrapped the expensive array copy and sorting logic in `useMemo` to prevent re-execution on every render. Replaced the `new Date().getTime()` allocation with lexicographical string comparison (`localeCompare`) for ISO 8601 timestamps to reduce memory allocation overhead. --- .jules/bolt.md | 3 +++ apps/app/src/components/ConversationsSidebar.tsx | 12 ++++++------ 2 files changed, 9 insertions(+), 6 deletions(-) create mode 100644 .jules/bolt.md 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);