Skip to content

Reduce model picker whitespace search rerenders#3676

Draft
cursor[bot] wants to merge 2 commits into
mainfrom
cursor/component-performance-optimization-6896
Draft

Reduce model picker whitespace search rerenders#3676
cursor[bot] wants to merge 2 commits into
mainfrom
cursor/component-performance-optimization-6896

Conversation

@cursor

@cursor cursor Bot commented Jul 3, 2026

Copy link
Copy Markdown
Contributor

What Changed

  • Isolated the model picker search input's raw text state into a small memoized ModelPickerSearchInput component.
  • Publish only normalized model-picker search queries to the heavier ModelPickerContent state, so whitespace-only or redundant-spacing edits do not rerender the full picker.
  • Moved the model jump keyboard listener into a named useModelPickerJumpShortcuts hook.
  • Added coverage for model-picker search normalization.

Why

A React best-practices/performance scan found large hot spots around chat/model picker surfaces. Manual React Scan profiling of the model picker showed that typing whitespace in the search box caused ModelPickerContent to rerender once per keypress even though the visible model results were unchanged. Keeping raw input churn local to the search input preserves behavior while avoiding unnecessary parent picker work.

UI Changes

Before/after React Scan recordings were captured as Cursor walkthrough artifacts:

  • Before: react_scan_model_picker_before_whitespace_rerenders.mp4 — five spaces increased ModelPickerContent renders from 0 to 5.
  • After: react_scan_model_picker_after_whitespace_rerenders_fixed.mp4 — the same five-space interaction left ModelPickerContent, ModelListRow, and ModelPickerSidebar at 0; only the search input highlighted.

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

Validation:

  • corepack pnpm dlx react-doctor@latest . --verbose --category performance --no-telemetry (reported performance findings; used to select/manual-profile hot spots)
  • corepack pnpm dlx react-scan@latest --help (CLI only exposes init; runtime overlay used for recordings)
  • corepack pnpm --filter @t3tools/web test -- src/components/chat/modelPickerSearch.test.ts (148 files / 1279 tests passed)
  • NODE_OPTIONS="--experimental-strip-types" corepack pnpm exec vp check (passed; existing lint warnings remain)
  • corepack pnpm exec vp run typecheck (passed)
Open in Web View Automation 

Note

Reduce rerenders in model picker by normalizing search queries before updating state

  • Extracts a ModelPickerSearchInput component that maintains raw input locally and publishes a normalized query (lowercased, whitespace-collapsed) via onSearchQueryChange, preventing redundant state updates when only whitespace changes.
  • Adds normalizeModelPickerSearchQuery in modelPickerSearch.ts and reuses it in scoreModelPickerSearch tokenization.
  • Extracts window keydown shortcut logic into a useModelPickerJumpShortcuts hook in ModelPickerContent.tsx.
  • Behavioral Change: ModelPickerContent now stores a normalized search string instead of raw input; filtering checks searchQuery directly rather than trimming at each use site.

Macroscope summarized bdd4455.

cursoragent and others added 2 commits July 3, 2026 16:18
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 vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:L 100-499 changed lines (additions + deletions). labels Jul 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L 100-499 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.

2 participants