Skip to content

Conversation

@TrevorBurnham
Copy link
Contributor

This PR adds useMemo to cache the syntax highlighting result in the CodeView component, preventing expensive re-tokenization on every render.

Problem

The highlight function (which uses ace-code's tokenizer) runs on every render of InternalCodeView, even when content hasn't changed. This is wasteful because:

  • Tokenization is O(n) where n is the content length
  • It creates many React elements (one span per token, per line)
  • Parent re-renders trigger unnecessary re-computation
  • Common interactions like hovering action buttons or toggling dark mode cause re-tokenization

Solution

Wrap the highlight call in useMemo with [content, highlight] as dependencies:

const code = useMemo(
  () => (highlight ? highlight(content) : textHighlight(content)),
  [content, highlight]
);

Testing

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

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

The highlight function performs expensive tokenization on every render,
even when content hasn't changed. This adds useMemo to cache the result
based on content and highlight function, preventing unnecessary
re-tokenization during parent re-renders, dark mode toggles, or action
button interactions.
@TrevorBurnham TrevorBurnham requested a review from a team as a code owner January 24, 2026 22:40
@TrevorBurnham TrevorBurnham requested review from SpyZzey and removed request for a team January 24, 2026 22:40
@TrevorBurnham TrevorBurnham changed the title perf: memoize highlight result to avoid redundant tokenization refactor: memoize highlight result to avoid redundant tokenization Jan 24, 2026
@codecov
Copy link

codecov bot commented Jan 26, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.28%. Comparing base (a4cabe9) to head (585a37c).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #108   +/-   ##
=======================================
  Coverage   99.28%   99.28%           
=======================================
  Files          29       29           
  Lines         281      281           
  Branches       34       34           
=======================================
  Hits          279      279           
  Misses          1        1           
  Partials        1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

2 participants