Skip to content

⚡ Bolt: Optimize Chat UI rendering in Ink#17

Merged
the-abra merged 2 commits intomainfrom
bolt-ui-perf-optimization-4183969796264143660
Apr 28, 2026
Merged

⚡ Bolt: Optimize Chat UI rendering in Ink#17
the-abra merged 2 commits intomainfrom
bolt-ui-perf-optimization-4183969796264143660

Conversation

@the-abra
Copy link
Copy Markdown
Collaborator

💡 What:

  • Wrapped the ChatMessage component in React.memo() to prevent unnecessary re-renders when props haven't changed.
  • Used useMemo for the expensive marked.parse markdown parsing in ChatMessage based on the message content identity.
  • Used useMemo in App.tsx for creating the staticItems array to prevent mapping over the entire history array on every single chunk stream.

🎯 Why:
During streaming (when streamingText updates frequently), the UI forces re-renders. Previously, this caused the history.map to run on every chunk, and could potentially cause ChatMessage to 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

- 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>
@google-labs-jules
Copy link
Copy Markdown
Contributor

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

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>
@the-abra the-abra merged commit 25f2d90 into main Apr 28, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant