Skip to content

⚡ Bolt: Memoize conversation list sorting and optimize date comparison #485

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: Memoize conversation list sorting and optimize date comparison #485

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 @@
## 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.
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;
});
// ⚡ 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);

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

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

While localeCompare works for sorting ISO 8601 strings, it is significantly slower than standard string comparison operators (<, >) because it involves locale-specific collation logic (handling accents, case sensitivity, etc.) which is unnecessary for timestamp strings. Since this pull request specifically targets performance optimization by avoiding object allocations, using standard comparison operators is a more efficient approach for lexicographical sorting of ISO strings.

Suggested change
return b.updatedAt.localeCompare(a.updatedAt);
return b.updatedAt > a.updatedAt ? 1 : b.updatedAt < a.updatedAt ? -1 : 0;

});
}, [conversations]);
Comment on lines +58 to +62

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

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The sorting of conversations by updatedAt uses localeCompare on the string values. This approach assumes that updatedAt is always in a lexicographically sortable format (such as ISO 8601). If the format changes or is inconsistent, the sorting may be incorrect, resulting in conversations being displayed out of order.

Recommended solution:
If you want to ensure robust date sorting regardless of format, consider parsing the dates:

return [...conversations].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());

If you are certain that updatedAt is always ISO 8601, document this assumption clearly.


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