Optimizing search of array of objects

Question

I have an array of objects that is a length of 5,866 like formatted like this {label: "Luke Skywalker", value: "556534"} and I am searching the objects and filtering by their label like so

  onChange = (e) => {
        e.persist()
         this.setState({filter:e.target.value, filtered_array: 
            this.state.raw_user_list.filter(user =>
              user.label.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1)})
    }

...
     <form style={{paddingBottom:'10px'}}>
              Filter: <input name="filter" value={this.state.filter} onChange={this.onChange} type="text" style={{
                border: '1px solid #cccccc',
              }}/>
            </form>

this.state.filter is the value that is being types in to filter. Before I was working with less than 1,000 entries initially and now with the user_list being 5,866 causes performance issues with the way I am filtering. I want to filter the data real-time when the user types.

Don't perform e.target.value.toLowerCase() for each iteration. Store it in a scoped variable that you reference from the iteration function. That's one easy fix that should give you immediate results. — Patrick Roberts
– Patrick Roberts, Commented Dec 17, 2018 at 16:14
Aside from externalizing the lowerCase (you're repeating it each loop), you may think about using some external libraries, if allowed. Fuse.js seems to be your friend in that case specifically: github.com/krisk/Fuse — briosheje
– briosheje, Commented Dec 17, 2018 at 16:15
Issue is more likely related to how you are using this. 5900 elements is not a lot — charlietfl
– charlietfl, Commented Dec 17, 2018 at 16:15
Okay let me restructure it based off the comments. I'll look into Fuse.js after. I want to avoid using another library. — Snoopy
– Snoopy, Commented Dec 17, 2018 at 16:22
Some throttling in the onChange would help if it is related to continuous typing — charlietfl
– charlietfl, Commented Dec 17, 2018 at 16:24

Treycos · Accepted Answer · 2019-01-04 09:26:22Z

1

I can think of 2 ways to optimize your searching function :

Using includes instead of indexOf, wich does not return an index, but only true/false

this.state.raw_user_list.filter(user => user.label.toLowerCase().includes(e.target.value.toLowerCase()))

According to this stack overflow answer, a Regex would be a lot faster (for Chrome in particular) :

this.state.raw_user_list.filter(user => user.label.match(new RegExp(e.target.value, 'i')))

Using the 'i' option in your Regex means that it is case insensitive

UPDATE

According to these tests, your function can be even faster than the previous one with a cached Regex :

const rValue = new RegExp(e.target.value, 'i')
this.state.raw_user_list.filter(user => rValue.test(user.label))

edited Jan 4, 2019 at 9:26

answered Dec 17, 2018 at 16:57

Treycos

7,4913 gold badges29 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Raluy · Accepted Answer · 2018-12-17 16:58:40Z

1

You can use a Trie data structure (https://github.com/Draluy/MCsolver/blob/master/src/services/DictService.js)

Basically that will allow you to find words a lot quickier. I used it in a project to store all the words of the dictionnary and searches are tipically under a millisecond.

You can find my implementation here: https://github.com/Draluy/MCsolver/blob/master/src/services/DictService.js

answered Dec 17, 2018 at 16:58

David Raluy

1845 bronze badges

Collectives™ on Stack Overflow

Optimizing search of array of objects

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related