From 1c6b57baf14011ade620ff0590a21ebdf520de49 Mon Sep 17 00:00:00 2001 From: Dexploarer <211557447+Dexploarer@users.noreply.github.com> Date: Thu, 30 Apr 2026 00:52:00 +0000 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Optimize=20timestamp=20sort?= =?UTF-8?q?ing=20in=20ConversationsSidebar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Wrap conversation sorting logic in `useMemo` to prevent sorting on every render. - Replace `new Date(a.updatedAt).getTime()` with raw string comparison for O(n log n) performance improvements, eliminating unnecessary Date allocation overhead. - Documented learning in `.jules/bolt.md`. --- .jules/bolt.md | 3 +++ apps/app/src/components/ConversationsSidebar.tsx | 13 +++++++------ 2 files changed, 10 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..8018f03b62 --- /dev/null +++ b/.jules/bolt.md @@ -0,0 +1,3 @@ +## 2026-04-30 - Optimize React List Rendering Timestamp Sorting +**Learning:** Using new Date() allocations inside array sorts within React components leads to unnecessary memory allocation and performance overhead on every re-render. +**Action:** Always memoize derived lists that require sorting and prefer raw string comparisons (e.g., b.updatedAt > a.updatedAt) for ISO 8601 timestamp fields over allocating Date objects. diff --git a/apps/app/src/components/ConversationsSidebar.tsx b/apps/app/src/components/ConversationsSidebar.tsx index 75d768bee2..6af6b97dbb 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; - }); + const sortedConversations = useMemo(() => { + return [...conversations].sort((a, b) => { + // ⚡ Bolt: Memoize the sorting and use raw string comparison for O(n log n) performance without Date allocation overhead + return b.updatedAt > a.updatedAt ? 1 : b.updatedAt < a.updatedAt ? -1 : 0; + }); + }, [conversations]); const handleDoubleClick = (conv: { id: string; title: string }) => { setEditingId(conv.id);