Performance problem with React-Native for-looping through a large array size

I'm currently facing a performance issue with the search function in my react-native app. The search involves scanning through an array of 15,000 elements for specific keywords. Surprisingly, the search performs well and quickly on Android devices, but significantly slower on iOS devices. I've tested the app on real Samsung Galaxy S7 and iPhone 6s devices, and the difference in performance is quite noticeable. Here's a snippet of the code I'm using for the search functionality:

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,
            });
        }

    }

Can anyone suggest ways to optimize the search performance for iOS devices?

Answer №1

If you want to improve the speed of this operation, consider creating a swift module.

For more information on how to create native modules for iOS in React Native, check out this official tutorial.

I have personally used this approach in the past to enhance performance with a local database, and it also served as a valuable learning experience for understanding React Native on iOS.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The useState variable is unexpectedly returning an empty array even though I have explicitly set it as an array containing objects

Hey there! I've encountered a scenario with my component where I'm utilizing the useState hook to set up the initial value of myFeeds variable to an array called feeds. I have also implemented an effect that is supposed to update myFeeds with any ...

How come my counter is still at 0 even though I incremented it within the loop?

Within my HTML file, the code snippet below is present: <div id="userCount" class="number count-to" data-from="0" data-to="" data-speed="1000" data-fresh-interval="20"></div> In my Ja ...

What would be the optimal type for the second argument of the `simulate` method?

When using the simulate function, I am familiar with code like this: simulate("change", { target: { value: '7' } }); However, if my onChange function requires an object as a parameter, what should I pass in the second argument? interface myObj ...

Generate Pagination in JavaScript using an Array of Elements

Is there a way to implement a Pagination System using JavaScript? Specifically, I need to display 10 products per page. I currently have an Array containing various products and my goal is to iterate through these products to display the first 10 on one p ...

In an unforeseen twist, an unconventional token has surfaced within the componentDidMount

I am attempting to utilize the componentDidMount method and export it as a default, but I keep encountering an error. It says "Unexpected token, expected ','". The code works fine when I use the export default class HelpScreen extends React.Compo ...

Iterate through an array of strings within a paragraph tag

In my current situation, I am dealing with an array of strings and would like to iterate through it within a <p> tag if the array is empty. This is what I have so far: <p *ngIf="detailMessageMultilines">{{detailMessageMultilines}}< ...

Strange Scrolling Issues in Blackberry Webworks when Using Touchscreens

Within my Blackberry Webworks app designed for Smartphones OS 6, 7, and 7.1, there is a portion of code that looks like this: <div style="width:100%; height:100%; overflow:hidden;"> <div style="overflow:auto;height:100px;width:100%;"> ...

Guide in activating popup notification upon form submission in React with the help of React Router navigate hook

I'm facing a challenge in triggering a success pop-up notification after submitting a form in React. The issue arises when the page redirects to a different location using React Router's useNavigate() hook, as there is no direct connection betwee ...

Tips for sending JSON-formatted data from a route to jQuery

Currently, I am facing a challenge with passing a JSON file retrieved from an API to jQuery. The goal is to implement an infinite scroll functionality using jQuery before displaying it in an EJS file. The issue arises when `res.json(data)` is utilized; ins ...

"Put Phonegap on hold for a bit and disable landscape mode

I am currently using Phonegap to develop an Android game. My project includes a lobby feature where players can search for opponents and engage in chat with other players. Once a player has found their opponent, they can commence playing the game together ...

Having trouble getting Vue-Select2 to display properly in Vuejs?

After setting up the vue3-select2-component and following their instructions, I encountered an issue where the component was not displaying in the output on the html page, even though the code for it was present in the source code. For context, I am using ...

What is the best way to import a geojson file into Express.js?

I'm currently trying to read a geojson file in Node.js/express.js. The file I am working with is named "output.geojson". I want to avoid using JSON.parse and instead load it using express.js (or at least render it as JSON within this function). var o ...

What is the best way in jQuery to pass an event to a parent anchor if necessary?

I'm working on a project in ClojureScript using jQuery, and I believe the answer should be applicable to both ClojureScript and JavaScript. My issue involves a helper function that creates an anchor element and then places an icon element inside it. ...

The image fails to display correctly

As I work on creating a basic webpage in HTML and JavaScript, my goal is to validate certain parameters (such as width, height) of an image that users upload via a form. In JavaScript, I extract the file from the form and attempt to display it as an image ...

A dynamic search feature implemented with PHP, MySQL, and AJAX

I have implemented an ajax call to fetch data from my mysql database when searching for users. Below is the corresponding html code; <input type="text" id="partnerName" name="partnerName" class="form-control" placeholder="Type to search partners...."& ...

The FormattedNumber feature in react-intl is not functioning correctly

I am currently attempting to utilize the FormattedNumber component within the react-intl library, but I am encountering difficulties in getting it to function correctly. <IntlProvider locale="en-US" messages={locales['en-US']} > ...

Following the submission of the ajax form, the page is reloading unexpectedly

I need the voting form on index.php to submit without refreshing the page and display results from an external page within index.php. HTML <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script&g ...

Updating the textview in an Android app using Java from a separate class or thread through interface communication

Trying to edit the textview text from the MainActivity class by using a function connected to an interface, which then goes into another class named JobService (class for sending something with threads in it). However, encountering an error in the construc ...

The destination where data is transmitted via POST to a PHP file using the HTTPRequestObject.send method

Can anyone help me figure out where the HTTPRequestObject stores strings that I have sent using the "POST" method to a PHP file? I have checked both the $_POST and $_REQUEST arrays but cannot find them. This is how I am sending the data from JavaScript: ...

Please indicate the number of lines for the href within the span element

I'm struggling with formatting a <span> tag, specifically the .lastMessageLink class that contains an <a> element with the .lastMessageText class. The content within .lastMessageText can vary from just a few characters to a lengthy paragra ...