Skip to content

⚡ Bolt: Optimize list sorting performance in ConversationsSidebar #501

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Dexploarer wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

⚡ Bolt: Optimize list sorting performance in ConversationsSidebar #501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .jules/bolt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Comment on lines +1 to +3
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot Apr 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This file appears to be a tool-generated learning log. While the optimization logic is sound, including such metadata files in the source repository can lead to clutter and is generally not considered a best practice for repository cleanliness. Consider moving these logs to a separate documentation system, a wiki, or a dedicated metadata store outside of the application source tree.

Additionally, the action described here should be applied consistently across the codebase. For instance, apps/app/src/AppContext.tsx still contains multiple instances of new Date().getTime() sorting (e.g., lines 5034 and 5051) that would benefit from this optimization.

13 changes: 7 additions & 6 deletions apps/app/src/components/ConversationsSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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]);
Comment on lines +57 to +62
Copy link
Copy Markdown

@codereviewbot-ai codereviewbot-ai Bot Apr 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Potential Incorrect Sorting of Conversations

The sorting logic in useMemo compares updatedAt fields as strings:

return b.updatedAt > a.updatedAt ? 1 : b.updatedAt < a.updatedAt ? -1 : 0;

This approach assumes that updatedAt is always in a format (such as ISO 8601) where string comparison matches chronological order. If updatedAt is not guaranteed to be ISO 8601, this could result in conversations being sorted incorrectly.

Recommended Solution:
Ensure that updatedAt is always an ISO 8601 string, or use Date.parse() for comparison:

return Date.parse(b.updatedAt) - Date.parse(a.updatedAt);

This guarantees correct chronological sorting regardless of the string format.


const handleDoubleClick = (conv: { id: string; title: string }) => {
setEditingId(conv.id);
Expand Down
Loading