Skip to content

Conversation

@DeJeune
Copy link
Collaborator

@DeJeune DeJeune commented Jan 5, 2026

What this PR does

Before this PR:

  • No built-in way to monitor React component render performance during development

After this PR:

  • Adds react-scan integration for visual performance monitoring
  • Run pnpm dev:react-scan to start dev server with react-scan enabled
  • Shows render counts, unnecessary re-renders, and FPS in a toolbar overlay

Why we need it and why it was done in this way

The following tradeoffs were made:

  • react-scan is only enabled via environment variable (RENDERER_VITE_REACT_SCAN=true) to avoid any overhead in normal development
  • Integrated into all window entry points (main, mini, selection toolbar/action, trace) for comprehensive coverage

The following alternatives were considered:

  • CI integration with performance thresholds - decided against as team felt it was not valuable enough for the complexity

Breaking changes

None

Special notes for your reviewer

  • react-scan is a dev-only tool, no production impact
  • Usage: pnpm dev:react-scan to enable performance monitoring

Checklist

  • PR: The PR description is expressive enough and will help future contributors
  • Code: Write code that humans can understand and Keep it simple
  • Refactor: You have left the code cleaner than you found it (Boy Scout Rule)
  • Upgrade: Impact of this change on upgrade flows was considered and addressed if required
  • Documentation: A user-guide update was considered and is present (link) or not required

Release note

feat: add react-scan integration for performance monitoring (run `pnpm dev:react-scan`)

🤖 Generated with Claude Code

- Add react-scan package for React performance monitoring
- Add `yarn dev:react-scan` script to enable react-scan via environment variable
- Initialize react-scan in all window entry points (main, mini, selection toolbar/action, trace)
- Create reactScan.config.ts with default configuration

Usage: Run `pnpm dev:react-scan` to start dev server with react-scan enabled

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
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