fix: optimize ChatView to prevent excessive re-rendering when typing #7420
Conversation
- Properly memoized itemContent callback with stable dependencies - Added memoization for lastModifiedMessage to prevent unnecessary recalculations - Removed debug logging after confirming the fix works This fixes the UI jittering issue that occurred when typing in the chat input by preventing the groupedMessages and itemContent from being recalculated on every keystroke.
dosubot
bot
added
size:S
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| }, []) | ||
|
|
||
| // Memoize the last modified message to prevent unnecessary re-renders | ||
| const lastModifiedMessage = useMemo(() => modifiedMessages.at(-1), [modifiedMessages]) |
There was a problem hiding this comment.
While this memoization correctly prevents re-renders, I'm wondering if creating a new reference on every modifiedMessages change could lead to memory pressure in long-running sessions? Could we consider using a more granular dependency or perhaps a ref-based approach to track just the last message without triggering re-renders?
| const lastModifiedMessage = useMemo(() => modifiedMessages.at(-1), [modifiedMessages]) | ||
|
|
||
| // Properly memoized itemContent callback with stable dependencies | ||
| const itemContent = useCallback( |
There was a problem hiding this comment.
Since this is a performance fix, would it be helpful to add a comment documenting the performance improvement achieved? For example: "Reduces re-renders from X to Y when typing". Future me would appreciate knowing why past me made this change.
| expandedRows, | ||
| toggleRowExpansion, | ||
| modifiedMessages, | ||
| lastModifiedMessage, // Use the memoized value instead of recalculating |
There was a problem hiding this comment.
Could we add a comment explaining why switching from modifiedMessages to lastModifiedMessage in the dependency array prevents the re-rendering issue? The fix works, but documenting the reasoning would help future maintainers understand the optimization.
hannesrudolph
added
the
Issue/PR - Triage
daniel-lxs
moved this from Issue [In Progress]
to PR [Needs Prelim Review]
in Roo Code Roadmap
hannesrudolph
added
PR - Needs Preliminary Review
and removed
Issue/PR - Triage
daniel-lxs
moved this from PR [Needs Prelim Review]
to PR [Draft / In Progress]
in Roo Code Roadmap
hannesrudolph
added
PR - Draft / In Progress
and removed
PR - Needs Preliminary Review
labels
github-project-automation
bot
moved this from PR [Draft / In Progress]
to Done
in Roo Code Roadmap
Summary
This PR fixes the excessive re-rendering issue in the ChatView component that was causing UI jittering when typing in the chat input.
Problem
The ChatView component was experiencing excessive re-renders whenever the user typed in the chat input field. This was causing visible jittering in the messages displayed within the chat view.
Root Cause Analysis
After systematic debugging, we identified two primary causes:
itemContentcallback recreation: The callback passed to the Virtuoso component was being recreated on every render, bypassing React.memo optimization in ChatRowlastModifiedMessagerecalculation: ThemodifiedMessages.at(-1)was being recalculated on every renderSolution
Optimizations Applied:
itemContentcallback: Added correct dependencies to prevent unnecessary recreationlastModifiedMessage: Created a separate memoized value to prevent recalculationTesting
Impact
This fix eliminates the UI jittering issue when typing in the chat input, providing a smoother user experience without affecting any functionality.
Files Changed
webview-ui/src/components/chat/ChatView.tsx- Optimized memoizationwebview-ui/src/components/chat/ChatRow.tsx- Removed debug loggingImportant
Optimized
ChatViewto prevent excessive re-rendering by memoizingitemContentandlastModifiedMessage.itemContentcallback inChatView.tsxto prevent unnecessary re-renders by adding stable dependencies.lastModifiedMessageinChatView.tsxto avoid recalculating on every render.ChatRow.tsx.This description was created by
for a9a0975. You can customize this summary. It will automatically update as commits are pushed.