How to fix lag on select element containing a large list of options

Question

I have a react application that uses react material ui, i am using the autocomplete react-select example which you can find here.

https://material-ui.com/components/autocomplete/

When the number of items in the select is large for example around 2500~ it lags and becomes unusable.

I have modified the original demo to make suggestions of length 2500 to populate the select.

const suggestions = [];
for (let i = 0; i < 2500; i = i + 1) {
  suggestions.push({ value: i, label: `Option ${i}` });
}

Please see the below demo example of my problem.

https://codesandbox.io/s/material-demo-vp59j

When you click the first selector it is very laggy.

Answer 1

I used "filterOptions" to show first 500 items and other items still be matched when searched, like this.

  import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';

  const filterOptions = createFilterOptions({
    matchFrom: 'any',
    limit: 500,
  });
  
  <Autocomplete
    filterOptions={filterOptions}
  />

For more arguments. >> https://material-ui.com/components/autocomplete/#custom-filter