React.js sorting large Arrays

Question

I have implemented react/js sorting grid base on this React library

things work very nice, but I am getting slower and slower response when I have over 50k objects in in array. Over 50k takes around 4 seconds. Over 250k it takes 10 seconds.

I do not have complicated data structure, this is what I have:

var myData = [{name: "my name", description: "my description", grade: 3}]

I am using sorty for this task. Have I reached a limitation of the technology, or I am doing something wrong?

I know it cant be instant, I am just trying to increase speed as much as possible. Any insight is appreciated.

After lots of experimenting, I decided to try sorting with underscore before trying to make my own sorting function.

if (SORT_INFO.dir === -1){
        var data =  _.sortBy( this.state.data, SORT_INFO.name ).reverse();
    } else {
        var data =  _.sortBy( this.state.data, SORT_INFO.name );
    }

What surprised me is the speed of it. It is roughly 10 fold. 1mil object in array, takes maybe 4 second. I wonder why?

Given that you have a very simple data structure, you might want to try if writing your own sorting function is faster. Related : http://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value-in-javascript — alpha1554, Mar 14 '16 at 14:40
I think the more important thing you need to be considering is doing your sorting on the server side rather than client side. If you are sorting 50,000 - 250,000 objects and it is taking 10 seconds on your computer, someone with 2gb or 4gb of RAM might be waiting for 30-45 seconds or it could crash their computer. Not to mention if the user is on mobile. — Nitsew, Mar 14 '16 at 14:58
If you have a simple data structure and if it is repetitive you could save your self some memory by using FlyWeight design pattern. — Rosmarine Popcorn, Mar 14 '16 at 20:01

John Weisz · Accepted Answer · 2016-03-22T12:21:02.320

Have I reached a limitation of the technology [...] ?

In a sense, yes. Sorting is usually an expensive task that requires great deals of computing power if your data set is large enough (especially if elements are sorted by comparison). No matter how much you optimize, sorting hundreds of thousands of elements -- especially in a browser -- will virtually always take a noticeable amount of time, effectively freezing the UI for a second or two.

However, performing synchronous CPU (or IO-) intensive tasks can be offloaded into Web Workers, which enables you to crunch numbers without locking the UI.

Taking this example, it would be something along these lines:

component.js(x)

handleSortChange: function (sortInfo) {
    var sortWorker = new Worker("sortWorker.js");
    SORT_INFO = sortInfo
    data = [].concat(data1000)

    sortWorker.postMessage(data);
    sortWorker.onmessage = function (e) {
        var sortedData = e.data;
        this.setState({});
    }
}

sortWorker.js

onmessage = function (e) {
    postMessage(sort(e.data));
}

One thing that is of concern this way is when the user is grind-triggering the sorting functions. You could disable accepting sorting requests until the worker is done, and display a loading/working indicator.

Sorting such a long - continuous - list of data will take a moment, but if the user is shown an indicator letting him/her know it's a lengthy process without blocking the UI, I'd say that's nice.

React.js sorting large Arrays

1 Answers1