Skip to content

Conversation

@TrevorBurnham
Copy link

This PR optimizes the CodeView component by moving static computations out of the per-line render loop.

Problem

The Children.map loop in InternalCodeView was computing values that don't change per-line:

  1. clsx(styles["line-number"], styles.unselectable) - called for every line, always returns the same string
  2. clsx(codeElement.props.className, wrapLines ? ...) - called for every line, only depends on wrapLines prop
  3. Inline style objects { width: 1 } and { width: "auto" } - recreated on every render

For a code block with 500 lines, this means ~1000 unnecessary clsx calls per render.

Solution

  • Hoist style objects to module-level constants (COL_STYLE_SHRINK, COL_STYLE_AUTO)
  • Pre-compute line number className at module level (lineNumberClassName)
  • Compute code line span className once before the loop (codeLineSpanClassName)

Testing

  • All existing unit tests pass
  • No changes to component behavior or API

Impact

  • Reduced CPU work per render, especially for large code blocks
  • Fewer object allocations (style objects are now singletons)
  • More efficient garbage collection

Move static computations out of the per-line render loop:
- Hoist inline style objects to module scope constants
- Pre-compute line number className at module level
- Compute code line span className once before the loop

For a 500-line code block, this eliminates ~1000 redundant clsx calls
and prevents style object recreation on every render.
@TrevorBurnham TrevorBurnham requested a review from a team as a code owner January 24, 2026 23:19
@TrevorBurnham TrevorBurnham requested review from YueyingLu and removed request for a team January 24, 2026 23:19
@TrevorBurnham TrevorBurnham changed the title perf: hoist static values outside render loop refactor: hoist static values outside render loop Jan 24, 2026
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