Skip to content

⚡ Bolt: Optimize ConversationsSidebar sorting #489

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: main
Choose a base branch
from
Draft

⚡ Bolt: Optimize ConversationsSidebar sorting #489

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 Sorting Bottlenecks
**Learning:** In React components that render lists (like `ConversationsSidebar.tsx`), sorting an array inside the render cycle without `useMemo` causes an O(n log n) operation to run on *every single render*. Furthermore, allocating `new Date()` instances for comparison inside the sort callback adds significant heap allocation overhead, compounding the performance issue.
**Action:** When sorting arrays for rendering, wrap the sorted derived state in `useMemo`. When comparing ISO 8601 strings (like `updatedAt`), use string comparison (`b.updatedAt.localeCompare(a.updatedAt)`) to prevent unnecessary `Date` allocations.

@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

The recommendation should favor standard string comparison operators over localeCompare for ISO 8601 strings. localeCompare is much slower and unnecessary for strings that are already lexicographically sortable.

Suggested change
**Action:** When sorting arrays for rendering, wrap the sorted derived state in `useMemo`. When comparing ISO 8601 strings (like `updatedAt`), use string comparison (`b.updatedAt.localeCompare(a.updatedAt)`) to prevent unnecessary `Date` allocations.
**Action:** When sorting arrays for rendering, wrap the sorted derived state in `useMemo`. When comparing ISO 8601 strings (like `updatedAt`), use standard string comparison (`b.updatedAt > a.updatedAt ? 1 : -1`) to prevent unnecessary `Date` allocations and minimize comparison overhead.

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 of conversations and use string comparison for ISO 8601 dates to avoid O(N log N) Date allocations on every render
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 avoids Date object allocations, it is significantly more expensive than basic string comparison operators (> and <) because it accounts for locale-specific collation rules. Since ISO 8601 strings are designed to be lexicographically sortable, using standard comparison operators is a more efficient choice for this performance-focused optimization.

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

});
}, [conversations]);

Comment on lines +57 to 63

@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 logic in useMemo assumes that all updatedAt fields are valid ISO 8601 strings. If any updatedAt value is malformed or missing, localeCompare may produce incorrect results or cause runtime errors. To improve robustness, validate or sanitize updatedAt values before sorting, or provide a fallback mechanism:

return [...conversations].sort((a, b) => {
  if (!a.updatedAt || !b.updatedAt) return 0;
  return b.updatedAt.localeCompare(a.updatedAt);
});

Alternatively, log or handle cases where updatedAt is invalid to prevent silent failures.

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