⚡ Bolt: Optimize Chat UI rendering in Ink#17
Conversation
- Wrapped ChatMessage in React.memo - Memoized expensive markdown parsing with useMemo - Memoized static history array mapping in App.tsx - Added journal entry for React+Ink performance learnings Co-authored-by: the-abra <83769871+the-abra@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
- Updated tests/regression.test.ts and tests/seth.test.ts to expect version '4.0.1' instead of '3.9.7', aligning with the actual VERSION constant in src/version.ts. Co-authored-by: the-abra <83769871+the-abra@users.noreply.github.com>
💡 What:
ChatMessagecomponent inReact.memo()to prevent unnecessary re-renders when props haven't changed.useMemofor the expensivemarked.parsemarkdown parsing inChatMessagebased on the message content identity.useMemoinApp.tsxfor creating thestaticItemsarray to prevent mapping over the entire history array on every single chunk stream.🎯 Why:
During streaming (when
streamingTextupdates frequently), the UI forces re-renders. Previously, this caused thehistory.mapto run on every chunk, and could potentially causeChatMessageto re-parse markdown heavily. React and Ink need optimizations for continuous updates like streaming.📊 Impact:
Reduces CPU spike and unnecessary component re-evaluations during text streaming by caching parsed markdown and preventing O(N) array mapping on every token chunk. Overall smoother terminal UI experience.
🔬 Measurement:
To verify, initiate a long conversation with streaming enabled and observe reduced CPU usage and no jitter in the terminal output. Code tests (
pnpm test) pass properly to ensure no functionality is broken.PR created automatically by Jules for task 4183969796264143660 started by @the-abra