Skip to content

⚡ Bolt: [memoize conversation sorting] #478

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: [memoize conversation sorting] #478

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 @@
## 2024-04-24 - Initializing Bolt Journal
**Learning:** Establishing the journal to document critical, codebase-specific performance insights.
**Action:** Will document learnings here as they are discovered.
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 unnecessary Date parsing and array mutations 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 good performance improvement, the sorting logic itself can be further optimized. Currently, it performs new Date() parsing twice for every comparison, leading to $O(N \log N)$ date parsing operations whenever the conversations list changes. Since updatedAt is an ISO 8601 string (as seen in AppContext.tsx), you can use direct string comparison. This is lexicographically correct for ISO dates and avoids the significant overhead of object instantiation and date parsing during the sort process.

    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 for stale sorting in useMemo

The useMemo for sortedConversations depends only on the conversations array reference. If the conversations array is mutated in place (i.e., its reference does not change), but the updatedAt property of a conversation changes, the memoized value will not update, resulting in incorrect ordering:

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;
  });
}, [conversations]);

Recommended solution:
Ensure that the conversations array is always replaced with a new reference when any conversation's updatedAt changes. Alternatively, consider using a more robust memoization strategy or avoid useMemo if the array is small and sorting is inexpensive.


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