From e116a6dc8e245d067dc28d433dd3c6853dd69f3d Mon Sep 17 00:00:00 2001
From: Dexploarer <211557447+Dexploarer@users.noreply.github.com>
Date: Sun, 26 Apr 2026 00:51:17 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20Memoize=20conversation=20li?=
 =?UTF-8?q?st=20sorting=20and=20optimize=20date=20comparison?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .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..965ad287d6
--- /dev/null
+++ b/.jules/bolt.md
@@ -0,0 +1,3 @@
+## 2025-04-26 - React list rendering performance optimization
+**Learning:** Creating `new Date()` instances for sorting operations in React list renders causes significant overhead (O(n log n) object allocations), especially if the list changes frequently or is large. Also, doing this computation synchronously on every render wastes CPU cycles.
+**Action:** Use `localeCompare` for lexicographical string comparison of ISO 8601 timestamps and wrap the sorting logic in `useMemo` to prevent unnecessary allocations and redundant calculations.
diff --git a/apps/app/src/components/ConversationsSidebar.tsx b/apps/app/src/components/ConversationsSidebar.tsx
index 75d768bee2..2ce6af5b19 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 and use lexicographical string comparison instead of allocating new Date objects
+  const sortedConversations = useMemo(() => {
+    return [...conversations].sort((a, b) => {
+      return b.updatedAt.localeCompare(a.updatedAt);
+    });
+  }, [conversations]);
 
   const handleDoubleClick = (conv: { id: string; title: string }) => {
     setEditingId(conv.id);