Skip to content

perf(messages): reduce rerenders during streaming#144

Merged
Dimillian merged 4 commits intoDimillian:mainfrom
VikashLoomba:perf/messages-rerender
Jan 20, 2026
Merged

perf(messages): reduce rerenders during streaming#144
Dimillian merged 4 commits intoDimillian:mainfrom
VikashLoomba:perf/messages-rerender

Conversation

@VikashLoomba
Copy link
Contributor

Summary

  • Move timer rendering into a memoized WorkingIndicator and memoize per-item rows so only the active/changed item re-renders.
  • Remove the per-second full-list re-render during streaming while preserving existing UI behavior.

Perf Validation

Methodology:

  • Local jsdom harness with 200 message items.
  • Mocked Markdown component to count renders.
  • Compared current implementation vs a legacy model (timer state in parent + no memoized rows).

Results:

  • Timer tick (1s while thinking): current 0 Markdown renders vs legacy 200 (200× fewer).
  • Streaming delta (update last item): current 1 render vs legacy 200 (~200× fewer).

Note: harness was temporary and not committed; results recorded during local run.

Testing

  • npm run lint
  • npm run test
  • npm run typecheck

Copilot AI review requested due to automatic review settings January 20, 2026 07:37
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR optimizes rendering performance during message streaming by isolating timer updates and memoizing individual message rows. The key optimization moves timer state management into a memoized WorkingIndicator component, preventing unnecessary rerenders of message items when only the timer updates.

Changes:

  • Extracted message rendering logic into memoized row components (MessageRow, ReasoningRow, ReviewRow, DiffRow, ToolRow)
  • Created a memoized WorkingIndicator component with isolated timer state
  • Wrapped callback functions with useCallback for stable references across renders

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated no comments.

File Description
src/features/messages/components/Messages.tsx Refactored Messages component to use memoized row components and moved timer state to WorkingIndicator, achieving ~200× reduction in rerenders during streaming
package-lock.json Updated dependency metadata by removing "peer": true flags from various packages

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@Dimillian
Copy link
Owner

This is really good, thanks!

@Dimillian Dimillian merged commit 853d288 into Dimillian:main Jan 20, 2026
5 checks passed
gersmann pushed a commit to gersmann/codex-monitor-web that referenced this pull request Mar 10, 2026
Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>
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.

3 participants