Skip to content

Optimize model picker search rerenders#3659

Draft
cursor[bot] wants to merge 1 commit into
mainfrom
cursor/component-performance-optimization-adff
Draft

Optimize model picker search rerenders#3659
cursor[bot] wants to merge 1 commit into
mainfrom
cursor/component-performance-optimization-adff

Conversation

@cursor

@cursor cursor Bot commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

What Changed

  • Split the model picker search field into a small memoized ModelPickerSearchInput that owns the raw input value.
  • Kept ModelPickerContent state normalized to the trimmed query used for filtering.
  • Preserved Escape and Enter behavior while preventing whitespace-only input from invalidating the expensive picker/list subtree.

Why

React Doctor was run with pnpm dlx react-doctor@latest . --verbose --category performance --no-telemetry to identify performance/rerender concerns, then I manually profiled the model picker hot path with React Scan enabled. The baseline showed whitespace-only search input, which does not change visible results, still caused excessive model picker commits.

UI Changes

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

  • Before: before_model_picker_whitespace_rerenders.mp4 — five spaces in the search field increased ModelPicker profiler commits from 4 to 35.
  • After: after_model_picker_whitespace_rerenders.mp4 — the same interaction finished at 9 commits, with only the local input work remaining.

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:

  • vp check (passed; existing warnings reported outside this change)
  • vp run typecheck (passed)
Open in Web View Automation 

Note

Reduce rerenders in model picker search by extracting a memoized ModelPickerSearchInput component

  • Extracts the search input UI and its event handling into a new memoized ModelPickerSearchInput component in ModelPickerContent.tsx, preventing the parent from rerendering on every keystroke.
  • The new component maintains its own inputValue state and emits only trimmed values via onSearchQueryChange, so the parent ModelPickerContent updates searchQuery only when the trimmed value actually changes.
  • Enter and Escape key handling is moved into the child component via callbacks (onEnterHighlightedModel, onEscape), and model selection logic is extracted into a reusable handleSearchEnterHighlightedModel handler in the parent.

Macroscope summarized 31520e0.

Co-authored-by: Julius Marminge <juliusmarminge@users.noreply.github.com>
@github-actions github-actions Bot added size:L 100-499 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. labels Jul 2, 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.

1 participant