React-Native for-loop through large size array performance issue

Question

I have a search function in my react-native app where I am searching keywords in an array of 15,000 elements. When I am performing the search on an Android device, the performance is good and fast enough. However, when I am performing the same action on an iOS device, the performance is way too slower than android. I have tried the release version of the app on real devices but the result was the same. If the search function is taking 1 sec on an android device, it's taking 4-5 sec on iOS devices. I tried it on Samsung galaxy S7 and iPhone 6s. I know the processor of the device does matter but the difference is significant. Here is my code:

let query = this.state.searchQuery;

    query = query.toString().toLowerCase();

    let lastChar = query.substr(query.length - 1);

    if (query.length !== 0 && lastChar !== ' ') {

        let self = this.state.allProductData;

        let keywords = query.split(" ");

        this.setState({
            keywordsSearching: keywords
        });

        if (keywords.length !== 0) {

            let arr = [];

            for (var index = 0, selfLen = self.length; index < selfLen; index++) {

                if (!this.state.isSearching) {
                    break;
                }

                let counter = 0;
                var obj = self[index];
                let product_name = (obj.product_name).toString().trim().replace(/ /g, '').toUpperCase();
                let product_code = (obj.product_code).toString().trim().replace(/ /g, '').toUpperCase();
                let product_desc = (obj.product_desc).toString().trim().replace(/ /g, '').toUpperCase();

                for (var i = 0, len = keywords.length; i < len; i++) {
                    var key = keywords[i];
                    key = key.toString().toUpperCase();
                    if ((product_name.search(key)) !== -1 || (product_code.search(key)) !== -1 || (product_desc.search(key)) !== -1) {
                        counter++;
                    } else {
                        counter--;
                    }
                }
                if (counter > 0 && counter >= keywords.length) {
                    if (obj.product_id !== undefined) {
                        arr.push(obj);
                    }
                }
            };

            this.setState({
                isSearching: false,
                searchResult: arr,
            });
        }

    }

Any suggestion on how I can improve the search performance?

krjw · Accepted Answer · 2018-10-02 09:09:26Z

1

You could create a swift module for this operation to run faster.

Here you can find the official tutorial on the react native website.

I did this before when I needed more performance on a local database and it is a great way to learn how react native works on ios at least.

answered Oct 2, 2018 at 9:09

krjw

4,4703 gold badges26 silver badges51 bronze badges

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

11 Comments

Julfikar Over a year ago

Thanks for your suggestion. I will give a try. Any other suggestion besides creating native module?

krjw Over a year ago

Is this.state.allProductData an array or an object? searching through an array is mostly faster according to this

krjw Over a year ago

Also if this is an array you should look into using map, filter and reduce. Therre are good tutorials for these functions all over the internet. Here is one which I liked :)

Julfikar Over a year ago

this.state.allProductData is an array of objects. I have tried the filter and every functions of pure js and lodash but still same. Btw i was trying to create native module, but not sure why i'm getting an error TypeError: Attempting to change the setter of an unconfigurable property .. If I dont pass an array to the function, it's working fine. any suggetion?

krjw Over a year ago

could you paste the code somewhere? my react native time is a bit ago :)

|

Collectives™ on Stack Overflow

React-Native for-loop through large size array performance issue

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related