Skip to content

Avoid extra composer menu highlight renders#2794

Draft
cursor[bot] wants to merge 3 commits into
mainfrom
cursor/react-component-health-20cc
Draft

Avoid extra composer menu highlight renders#2794
cursor[bot] wants to merge 3 commits into
mainfrom
cursor/react-component-health-20cc

Conversation

@cursor
Copy link
Copy Markdown
Contributor

@cursor cursor Bot commented May 24, 2026

What Changed

  • Removed the ChatComposer slash-command menu highlight synchronization effect.
  • Derived the active menu item during render and only write highlight state from direct keyboard/hover interactions.
  • Added focused tests for menu highlight nudging behavior.
  • Included React Scan before/after recordings:
    • docs/react-scan-recordings/composer-menu-highlight-before.webm
    • docs/react-scan-recordings/composer-menu-highlight-after.webm

Why

React Doctor flagged the menu highlight sync as derived state updated from an effect, causing an avoidable follow-up render when the composer command menu opens or filters. The new approach follows React's “you might not need an effect” guidance by keeping the active menu item as render-time derived data and reserving state updates for user navigation.

React Doctor full scan found the wider app still has existing issues, but the targeted diff score is 95 and the removed no-derived-state/highlight-sync finding is gone.

UI Changes

No intended visual change. The committed React Scan recordings exercise the same /m composer command-menu interaction before and after the fix with React Scan enabled.

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes

Verification:

  • bun run test src/components/chat/composerMenuHighlight.test.ts (from apps/web)
  • npx -y react-doctor@latest apps/web --project @t3tools/web --diff main --offline --json
  • bun fmt
  • bun lint
  • bun typecheck
Open in Web View Automation 

Note

Reduce extra renders in composer menu highlight by computing nudge from active item

  • Removes the useEffect in ChatComposer.tsx that synced highlight state with menu open/close and dependency changes, so highlight state no longer resets when the menu closes.
  • Adds resolveComposerMenuNudgedItemId in composerMenuHighlight.ts, a utility that computes the next/previous item id with wrap-around, used by the nudgeComposerMenuHighlight callback instead of reading composerHighlightedItemId directly.
  • The nudge callback now derives next item from activeComposerMenuItem?.id (the server-resolved active item) rather than the previously stored highlighted id, keeping keyboard navigation consistent with actual menu state.
  • Behavioral Change: highlight state persists after the menu closes rather than being cleared; it is only updated on explicit nudge or search key change.

Macroscope summarized 83a0044.

cursoragent and others added 3 commits May 24, 2026 16:24
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
@github-actions github-actions Bot added size:M 30-99 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. labels May 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:M 30-99 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant