Skip to content

[autocomplete] Optimize selected option lookup#47953

Merged
mj12albert merged 4 commits intomui:masterfrom
anchmelev:autocomplete/47843-selected-lookup
Mar 18, 2026
Merged

[autocomplete] Optimize selected option lookup#47953
mj12albert merged 4 commits intomui:masterfrom
anchmelev:autocomplete/47843-selected-lookup

Conversation

@anchmelev
Copy link
Copy Markdown
Contributor

Closes #47843

Summary

This PR improves Autocomplete performance in multiple mode with large datasets by optimizing selected-option lookups in useAutocomplete.

Problem

When many options are selected (for example, 10,000), selected-state checks are done repeatedly with linear scans (Array.some) in hot paths:

  • filtering with filterSelectedOptions
  • rendering option state (aria-selected via getOptionProps)

That leads to quadratic work and visible lag.

What changed

  1. Added a strict-equality fast path for selected lookup:
  • build a Set of selected values once per render when isOptionEqualToValue is the default (option === value)
  • use Set.has(option) for O(1) lookup
  1. Kept a safe fallback for custom equality:
  • when isOptionEqualToValue is customized, keep using some(...) to preserve user-defined semantics
  1. Reused a shared isOptionSelected helper in both hot paths:
  • filterSelectedOptions
  • getOptionProps (aria-selected)
  1. Added a regression test ensuring custom isOptionEqualToValue behavior is unchanged.

Why this approach

Set.has is only correct for strict reference equality.
For custom comparators (for example, compare by id), Set.has can be incorrect, so this PR explicitly falls back to comparator-based scans in that case.

This gives a large perf win for the default path without changing behavior for customized equality.

Benchmark notes

Local micro-benchmark (10,000 options, 10,000 selected, two selected-state passes):

  • Before: ~100,010,000 comparisons, ~121ms avg
  • After (strict-equality fast path): 0 comparator calls in lookup path, ~0.72ms avg

Tests

  • pnpm prettier
  • pnpm eslint packages/mui-material/src/useAutocomplete/useAutocomplete.js packages/mui-material/src/useAutocomplete/useAutocomplete.test.js
  • pnpm test:node useAutocomplete

…ocomplete

Use a Set-based fast path when isOptionEqualToValue is the default strict equality comparator.
This avoids quadratic selected-state checks in large multiple selections while preserving custom equality semantics.
Also add a regression test to ensure custom isOptionEqualToValue behavior is unchanged.
@mui-bot
Copy link
Copy Markdown

mui-bot commented Mar 11, 2026

Netlify deploy preview

https://deploy-preview-47953--material-ui.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/material 🔺+138B(+0.03%) 🔺+53B(+0.04%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against a0338d1

@anchmelev
Copy link
Copy Markdown
Contributor Author

Could a maintainer please add a label (e.g. scope: autocomplete)?
Check if PR has label is currently failing because the PR has no labels.

@anchmelev anchmelev changed the title [material-ui][Autocomplete] Optimize selected option lookup in useAut… [Autocomplete] Optimize selected option lookup in useAut… Mar 12, 2026
@zannager zannager added the scope: autocomplete Changes related to the autocomplete. This includes ComboBox. label Mar 12, 2026
@zannager zannager requested a review from ZeeshanTamboli March 12, 2026 13:57
@mj12albert mj12albert changed the title [Autocomplete] Optimize selected option lookup in useAut… [Autocomplete] Optimize selected option lookup Mar 18, 2026
Copy link
Copy Markdown
Member

@mj12albert mj12albert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR ~ I've left one comment

Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js Outdated
@mj12albert mj12albert added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Mar 18, 2026
Co-authored-by: Albert Yu <albert@albertyu.co>
Signed-off-by: an.chmelev <an.chmelev@gmail.com>
@anchmelev
Copy link
Copy Markdown
Contributor Author

Thanks for the PR ~ I've left one comment

Thank you for the review. I’ve addressed the comment and applied the suggested change.

Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js Outdated
Signed-off-by: Albert Yu <albert@albertyu.co>
@mj12albert mj12albert added v7.x needs cherry-pick The PR should be cherry-picked to master after merge. labels Mar 18, 2026
@mj12albert mj12albert merged commit 2301b2a into mui:master Mar 18, 2026
19 checks passed
@github-actions
Copy link
Copy Markdown

Cherry-pick PRs will be created targeting branches: v7.x

github-actions Bot pushed a commit that referenced this pull request Mar 18, 2026
Signed-off-by: an.chmelev <an.chmelev@gmail.com>
Signed-off-by: Albert Yu <albert@albertyu.co>
Co-authored-by: Andrei Chmelev <chmelev.andrey@rwb.ru>
Co-authored-by: Albert Yu <albert@albertyu.co>
@oliviertassinari oliviertassinari changed the title [Autocomplete] Optimize selected option lookup [autocomplete] Optimize selected option lookup Apr 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs cherry-pick The PR should be cherry-picked to master after merge. scope: autocomplete Changes related to the autocomplete. This includes ComboBox. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. v7.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[RFC] [Autocomplete] performance improvement

4 participants