Skip to content

⚡ Bolt: Memoize conversations sorting in sidebar #477

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 conversations sorting in sidebar #477

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-24 - Memoizing expensive list sorting in React
**Learning:** Parsing Dates inside a sort function during every render cycle scales poorly as list size grows (O(n log n) operations where n is the number of conversations).
**Action:** Always wrap list sorting operations, especially those involving Date parsing or string conversions, in a `useMemo` hook to prevent redundant calculations on unaffected state updates.
15 changes: 9 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,14 @@ 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 to avoid O(n log n) work and Date parsing on every render
const sortedConversations = useMemo(() => {
return [...conversations].sort((a, b) => {
const aTime = new Date(a.updatedAt).getTime();
const bTime = new Date(b.updatedAt).getTime();
return bTime - aTime;
});
Comment on lines +59 to +63

@gemini-code-assist gemini-code-assist Bot Apr 24, 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 memoizing the sort is a significant improvement, the sorting logic itself can be further optimized. Since updatedAt is an ISO 8601 string, you can compare the strings directly using localeCompare instead of parsing them into Date objects on every comparison. This avoids the overhead of object instantiation and parsing inside the O(n log n) sort operation.

    return [...conversations].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));

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

@codereviewbot-ai codereviewbot-ai Bot Apr 24, 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.

Potential Stale Memoization

The useMemo dependency array only includes the conversations array reference. If the array is mutated in place (i.e., its reference does not change but its contents do), sortedConversations may become stale and not reflect the latest data, leading to UI inconsistencies.

Recommended Solution:
Ensure that the conversations array is always replaced immutably when updated. Alternatively, consider using a deep comparison or a library like use-deep-compare-effect if in-place mutations are possible, or avoid memoization if the array is small and performance is not a concern.


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