Filtering long lists take a long time to run

Question

I have a Dropdown with about 7000 objects. I have tried using semantic-ui react components but it still takes a long time to search and get results.

My copyList contains all the options and the filteredCopyList is what is rendered in the dropdown onKeyUp. Is it going slow due to rendering a long list of items and filtering them at the same time?

//list of 7000
const copyList = [
    {itemDesc: 'itemDesc1', shortDesc: 'shortDesc1'}
]


filterList = () => {
    const re = new RegExp(_.escapeRegExp(this.state.searchCopyList),'i');
    const isMatch = result => (re.test(result.shortDesc) || 
    re.test(result.itemDesc));
    this.setState({
        filteredCopyList: _.filter(this.state.copyList, isMatch)
    });
}

Answer 1

You can try with the following package of npm:

Infinite Scrolling package