Skip to content

⚡ Bolt: Optimize chat performance via state colocation and memoization #523

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

Open
ngoiyaeric wants to merge 1 commit into
base: main
Choose a base branch
from
Open

⚡ Bolt: Optimize chat performance via state colocation and memoization #523

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
6 changes: 6 additions & 0 deletions .jules/bolt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
## 2025-05-14 - [State Colocation & Memoization]
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 16, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Fix markdown lint warnings: add a blank line before the heading and use a top-level # heading.

Static analysis flags MD022 (blank lines around headings) and MD041 (first line should be a top-level heading).

Proposed fix 
-## 2025-05-14 - [State Colocation & Memoization]
+# Bolt Architecture Notes
+
+## 2025-05-14 - [State Colocation & Memoization]
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
## 2025-05-14 - [State Colocation & Memoization]
# Bolt Architecture Notes
## 2025-05-14 - [State Colocation & Memoization]
🧰 Tools
🪛 markdownlint-cli2 (0.20.0)

[warning] 1-1: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below

(MD022, blanks-around-headings)

[warning] 1-1: First line in a file should be a top-level heading

(MD041, first-line-heading, first-line-h1)

🤖 Prompt for AI Agents 
In @.jules/bolt.md at line 1, Change the heading "## 2025-05-14 - [State
Colocation & Memoization]" to a top-level heading and ensure there is a blank
line before it: replace the leading "##" with "#" and insert one blank line
above that heading in .jules/bolt.md so the file starts with a level-1 heading
and satisfies MD041 and MD022.

**Learning:** Moving high-frequency state (like text input) from a large parent container (Chat) to a leaf component (ChatPanel) eliminates massive re-render cycles across the entire application shell (Header, Map, History). Even with React's efficient diffing, the overhead of executing render functions for large component trees on every keystroke causes noticeable lag in complex interfaces.

**Learning:** When using early returns for empty states (e.g., "no messages"), always ensure `useMemo` and other hooks are declared BEFORE the return to avoid breaking the Rules of Hooks, even if the computation isn't needed for the empty state.

**Action:** Always check for high-frequency state in parent components during profiling. Use `useImperativeHandle` to maintain parent-to-child control for "one-off" events (like suggestions) while keeping state local.
68 changes: 35 additions & 33 deletions components/chat-messages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,51 +3,53 @@
import { StreamableValue, useUIState } from 'ai/rsc'
import type { AI, UIState } from '@/app/actions'
import { CollapsibleMessage } from './collapsible-message'
import React, { useMemo } from 'react'

interface ChatMessagesProps {
messages: UIState
}

export function ChatMessages({ messages }: ChatMessagesProps) {
if (!messages.length) {
return null
}

export const ChatMessages = React.memo(function ChatMessages({ messages }: ChatMessagesProps) {
// Group messages based on ID, and if there are multiple messages with the same ID, combine them into one message
const groupedMessages = messages.reduce(
(acc: { [key: string]: any }, message) => {
if (!acc[message.id]) {
acc[message.id] = {
id: message.id,
components: [],
isCollapsed: message.isCollapsed
const groupedMessagesArray = useMemo(() => {
if (!messages.length) {
return []
}
const groupedMessages = messages.reduce(
(acc: { [key: string]: any }, message) => {
if (!acc[message.id]) {
acc[message.id] = {
id: message.id,
components: [],
isCollapsed: message.isCollapsed
}
}
}
acc[message.id].components.push(message.component)
return acc
},
{}
)
acc[message.id].components.push(message.component)
return acc
},
{}
)

// Convert grouped messages into an array with explicit type
const groupedMessagesArray = Object.values(groupedMessages).map(group => ({
...group,
components: group.components as React.ReactNode[]
})) as {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
}[]
// Convert grouped messages into an array with explicit type
return Object.values(groupedMessages).map(group => ({
...group,
components: group.components as React.ReactNode[]
})) as {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
}[]
}, [messages])
Comment on lines +14 to +42
Copy link

@charliecreates charliecreates bot Feb 16, 2026

Choose a reason for hiding this comment

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

The message grouping logic uses (acc: { [key: string]: any }, message) => ... and later uses as React.ReactNode[] casts. Even if tsc passes, any here defeats type safety and makes it easier to accidentally push non-renderables into components (which becomes a runtime rendering bug).

Since this is central rendering logic (and now memoized), it’s worth typing it properly to prevent subtle regressions.

Suggestion

Replace the any accumulator with an explicit type.

For example:

  • Define a type Group = { id: string; components: React.ReactNode[]; isCollapsed?: StreamableValue<boolean> }.
  • Type the reducer as Record<string, Group> and initialize components: [] as React.ReactNode[].
  • Then you can return Object.values(groupedMessages) without the as ...[] cast.

Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this typing cleanup.

Comment on lines +12 to +42
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 16, 2026

Choose a reason for hiding this comment

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

🧹 Nitpick | 🔵 Trivial

Good use of React.memo and useMemo for performance.

The memoization strategy is sound. Two minor observations:

  1. The empty-check on line 44–46 is redundant with the one inside useMemo (line 15–17) — the outer check could rely on groupedMessagesArray.length === 0 instead of re-reading messages.length.
  2. The reduce accumulator is typed as { [key: string]: any } (line 19), which undermines the explicit cast on lines 34–41. Typing the accumulator directly avoids the need for as assertions.
♻️ Suggested typing improvement 
-    const groupedMessages = messages.reduce(
-      (acc: { [key: string]: any }, message) => {
+    type GroupedMessage = {
+      id: string
+      components: React.ReactNode[]
+      isCollapsed?: StreamableValue<boolean>
+    }
+    const groupedMessages = messages.reduce(
+      (acc: Record<string, GroupedMessage>, message) => {
         if (!acc[message.id]) {
           acc[message.id] = {
             id: message.id,
-            components: [],
+            components: [] as React.ReactNode[],
             isCollapsed: message.isCollapsed
           }
         }
         acc[message.id].components.push(message.component)
         return acc
       },
       {}
     )
 
-    // Convert grouped messages into an array with explicit type
-    return Object.values(groupedMessages).map(group => ({
-      ...group,
-      components: group.components as React.ReactNode[]
-    })) as {
-      id: string
-      components: React.ReactNode[]
-      isCollapsed?: StreamableValue<boolean>
-    }[]
+    return Object.values(groupedMessages)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const ChatMessages = React.memo(function ChatMessages({ messages }: ChatMessagesProps) {
// Group messages based on ID, and if there are multiple messages with the same ID, combine them into one message
const groupedMessages = messages.reduce(
(acc: { [key: string]: any }, message) => {
if (!acc[message.id]) {
acc[message.id] = {
id: message.id,
components: [],
isCollapsed: message.isCollapsed
const groupedMessagesArray = useMemo(() => {
if (!messages.length) {
return []
}
const groupedMessages = messages.reduce(
(acc: { [key: string]: any }, message) => {
if (!acc[message.id]) {
acc[message.id] = {
id: message.id,
components: [],
isCollapsed: message.isCollapsed
}
}
}
acc[message.id].components.push(message.component)
return acc
},
{}
)
acc[message.id].components.push(message.component)
return acc
},
{}
)
// Convert grouped messages into an array with explicit type
const groupedMessagesArray = Object.values(groupedMessages).map(group => ({
...group,
components: group.components as React.ReactNode[]
})) as {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
}[]
// Convert grouped messages into an array with explicit type
return Object.values(groupedMessages).map(group => ({
...group,
components: group.components as React.ReactNode[]
})) as {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
}[]
}, [messages])
export const ChatMessages = React.memo(function ChatMessages({ messages }: ChatMessagesProps) {
// Group messages based on ID, and if there are multiple messages with the same ID, combine them into one message
const groupedMessagesArray = useMemo(() => {
if (!messages.length) {
return []
}
type GroupedMessage = {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
}
const groupedMessages = messages.reduce(
(acc: Record<string, GroupedMessage>, message) => {
if (!acc[message.id]) {
acc[message.id] = {
id: message.id,
components: [] as React.ReactNode[],
isCollapsed: message.isCollapsed
}
}
acc[message.id].components.push(message.component)
return acc
},
{}
)
return Object.values(groupedMessages)
}, [messages])
🤖 Prompt for AI Agents 
In `@components/chat-messages.tsx` around lines 12 - 42, The outer empty-check
should use groupedMessagesArray.length === 0 instead of re-reading
messages.length and the reduce accumulator should be given a concrete type to
avoid the final "as" cast: update the ChatMessages component to remove the
redundant messages.length check and change the accumulator type used in the
reduce inside groupedMessagesArray (the object built for message grouping) to a
properly typed interface (e.g., mapping ids to { id: string; components:
React.ReactNode[]; isCollapsed?: StreamableValue<boolean> }) so the final
Object.values(...).map no longer needs an assertion.


if (!messages.length) {
return null
}

return (
<>
{groupedMessagesArray.map(
(
groupedMessage: {
id: string
components: React.ReactNode[]
isCollapsed?: StreamableValue<boolean>
},
groupedMessage,
index
) => (
<CollapsibleMessage
Expand All @@ -67,4 +69,4 @@ export function ChatMessages({ messages }: ChatMessagesProps) {
)}
</>
)
}
})
24 changes: 18 additions & 6 deletions components/chat-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,17 @@ import SuggestionsDropdown from './suggestions-dropdown'

interface ChatPanelProps {
messages: UIState
input: string
setInput: (value: string) => void
onSuggestionsChange?: (suggestions: PartialRelated | null) => void
}

export interface ChatPanelRef {
handleAttachmentClick: () => void
submitForm: () => void
submitForm: (value?: string) => void
}

export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, input, setInput, onSuggestionsChange }, ref) => {
export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, onSuggestionsChange }, ref) => {
const [input, setInput] = useState('')
const [triggerSubmit, setTriggerSubmit] = useState(0)
const [, setMessages] = useUIState<typeof AI>()
const { submit, clearChat } = useActions()
const { mapProvider } = useSettingsStore()
Expand All @@ -48,11 +48,22 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
handleAttachmentClick() {
fileInputRef.current?.click()
},
submitForm() {
formRef.current?.requestSubmit()
submitForm(value?: string) {
if (value !== undefined) {
setInput(value)
setTriggerSubmit(prev => prev + 1)
} else {
formRef.current?.requestSubmit()
}
}
}));

useEffect(() => {
if (triggerSubmit > 0) {
formRef.current?.requestSubmit()
}
}, [triggerSubmit])

// Detect mobile layout
useEffect(() => {
const checkMobile = () => {
Expand Down Expand Up @@ -127,6 +138,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i

const handleClear = async () => {
setMessages([])
setInput('')
clearAttachment()
await clearChat()
}
Expand Down
23 changes: 4 additions & 19 deletions components/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,7 @@ export function Chat({ id }: ChatProps) {
const { activeView } = useProfileToggle();
const { isUsageOpen } = useUsageToggle();
const { isCalendarOpen } = useCalendarToggle()
const [input, setInput] = useState('')
const [showEmptyScreen, setShowEmptyScreen] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const [suggestions, setSuggestions] = useState<PartialRelated | null>(null)
const chatPanelRef = useRef<ChatPanelRef>(null);

Expand Down Expand Up @@ -85,12 +83,6 @@ export function Chat({ id }: ChatProps) {
// Get mapData to access drawnFeatures
const { mapData } = useMapData();

useEffect(() => {
if (isSubmitting) {
chatPanelRef.current?.submitForm()
setIsSubmitting(false)
}
}, [isSubmitting])

// useEffect to call the server action when drawnFeatures changes
useEffect(() => {
Expand All @@ -110,10 +102,8 @@ export function Chat({ id }: ChatProps) {
<SuggestionsDropdown
suggestions={suggestions}
onSelect={query => {
setInput(query)
chatPanelRef.current?.submitForm(query)
setSuggestions(null)
// Use a small timeout to ensure state update before submission
setIsSubmitting(true)
}}
onClose={() => setSuggestions(null)}
className="relative bottom-auto mb-0 w-full shadow-none border-none bg-transparent"
Expand All @@ -138,8 +128,6 @@ export function Chat({ id }: ChatProps) {
<ChatPanel
ref={chatPanelRef}
messages={messages}
input={input}
setInput={setInput}
onSuggestionsChange={setSuggestions}
/>
</div>
Expand All @@ -152,8 +140,7 @@ export function Chat({ id }: ChatProps) {
{showEmptyScreen ? (
<EmptyScreen
submitMessage={message => {
setInput(message)
setIsSubmitting(true)
chatPanelRef.current?.submitForm(message)
}}
/>
) : (
Expand Down Expand Up @@ -181,18 +168,16 @@ export function Chat({ id }: ChatProps) {
) : (
<>
<ChatPanel
ref={chatPanelRef}
messages={messages}
input={input}
setInput={setInput}
onSuggestionsChange={setSuggestions}
/>
<div className="relative min-h-[100px]">
<div className={cn("transition-all duration-300", suggestions ? "blur-md pointer-events-none" : "")}>
{showEmptyScreen ? (
<EmptyScreen
submitMessage={message => {
setInput(message)
setIsSubmitting(true)
chatPanelRef.current?.submitForm(message)
}}
/>
) : (
Expand Down