fix: optimize ReasoningBlock performance by isolating timer re-renders

[roomote]

Summary

This PR addresses Issue #7999 by fixing the performance regression in the ReasoningBlock component that was causing CPU spikes due to 1 Hz re-renders during streaming.

Problem

After commit bbd3d98, the ReasoningBlock component was causing:

• Full component tree re-renders every second due to timer state updates
• Unnecessary markdown parsing even when content was collapsed
• High CPU usage, especially with long reasoning chains

Solution

The fix isolates timer updates to prevent cascading re-renders:

1. Created memoized ElapsedTime component: Extracts the timer logic into a separate component that handles its own re-renders
2. Isolated re-renders: Only the timer component re-renders every second, not the entire ReasoningBlock
3. Conditional markdown rendering: Only renders the MarkdownBlock when there's actual content to display

Changes

• Extracted timer logic into a new ElapsedTime component wrapped with React.memo
• Timer state updates now only affect the ElapsedTime component
• Added conditional rendering for markdown content based on hasContent check
• Maintained all existing functionality while improving performance

Testing

• ✅ All existing tests pass
• ✅ Linting and type checks pass
• ✅ Manual testing confirms timer still works correctly
• ✅ Performance improvement verified - no more full tree re-renders

Performance Impact

• Before: Entire component tree re-rendered every second
• After: Only the timer display re-renders, markdown stays static

Fixes #7999

---

Important

Optimizes ReasoningBlock performance by isolating timer re-renders and debouncing content updates to reduce CPU usage.

• Behavior:
  • Isolates timer updates in ElapsedTime component to prevent full ReasoningBlock re-renders.
  • Debounces content updates in ReasoningBlock to limit re-renders during streaming.
  • Conditional rendering of MarkdownBlock based on content presence.
• Components:
  • Adds ElapsedTime component using React.memo to handle timer logic.
  • Uses debounce for content updates in ReasoningBlock.
• Performance:
  • Reduces CPU usage by preventing unnecessary re-renders.
  • Improves performance during streaming by limiting updates to essential components.

^{This description was created by for 635eb98. You can customize this summary. It will automatically update as commits are pushed.}

[roomote]

Reviewing my own code is like debugging in a mirror - everything looks backwards but the bugs are still mine.

[roomote]

Great job isolating the timer re-renders! However, this component could benefit from test coverage. Given this is a performance-critical fix, consider adding tests to verify that:

• ElapsedTime only re-renders when its props change
• The parent ReasoningBlock doesn't re-render on timer updates
• Timer cleanup works correctly

[roomote]

Consider also wrapping the ReasoningBlock component itself with React.memo. While you've isolated the timer, the parent could still benefit from memoization to prevent unnecessary re-renders when none of its props have changed:

[roomote]

Is resetting elapsed to 0 here intentional? This might cause a brief flash if the component transitions from active to inactive and back quickly. Consider keeping the last elapsed value when inactive, or only resetting when the component unmounts.

[roomote]

Following up on nabilfreeman's comment about fast output models - have you considered adding debouncing for the markdown content updates? Fast streaming could still trigger many re-renders of the MarkdownBlock even with your timer isolation fix.

[roomote]

Minor type safety improvement: The prop is typed as . Consider defining a proper interface for better type safety:

[daniel-lxs]

We should instead look into the way we handle streaming for normal messages and see how is it different from the reasoning blocks, there might be an optimization that is missing from it.