[SalesForce] Component.set is slow with a large array of objects

I am developing a lightning component. In this component there is an attribute called allItems that contains an array of objects. Currently tested holding up to 600 objects.

However when I call a component.set with an updated array of objects, it takes a while to set/save the attribute and update the page visually.

Is there any way to improve speed/performance of component.set?

Code:

onItemMoved: function(component, event, helper)
{
    var titleid = event.getParam("titleid");
    var title = event.getParam("title");
    var maxSeats = event.getParam("maxSeats");
    var seatsInUse = event.getParam("seatsInUse");  
    var item = event.getParam("item"); //This is the item that was moved.
    var allGuestsList = component.get("v.allItems");
    console.log(item.index);

    //Searches guest list for matching guest. .
    //var actualGuest = allGuestsList.find(function(moving){return moving.id == item.id;});

        //Has the guest been moved to another table?
        if(item.status != title)
        {  
            //Does table have seats spare?
            if(seatsInUse>=maxSeats)
            {
                console.log(title, 'is full!\nMaximum guests for this table:', maxSeats);
            }
            else
            {
                item.status = title;
                item.statusid = titleid;

                allGuestsList[item.index] = item;
                component.set("v.allItems", allGuestsList);//This Line has slow performance past 200 objects being loaded.
            }

        }
})

Best Answer

How did you conclude that component.set() is the culprit? Also, are you viewing all 600 records in one-go on a page? If so, I have a feeling that this is more of a display issue than an issue with component.set() itself. You can determine that by measuring the time taken for component.set() to execute like so:

.
.
.
    var t0 = performance.now();
    component.set("v.allItems", allGuestsList);//This Line has slow performance past 200 objects being loaded.
    var t1 = performance.now();
    console.log("------------> component.set took " + (t1 - t0) + " milliseconds to execute.")
.
.

If the time reported is reasonably small, you know what I am talking about. It could be the actual time taken to render so much data on the page. To prove/test it, there are a few things you could try:

  1. Reduce the number of columns (not rows) being displayed on the screen (assuming this is a table).
  2. Keep ALL 600 records in v.allItems, but only render a few lines as opposed to ALL using an aura:if or something similar in your markup.
  3. Use direct values like <td>{!item.Name}</td> as opposed to lightning:* or ui:* base components like <td><lightning:formattedText value="{!item.Name}"/></td>

and see if the performance improves. If it does, you might have to consider implementing pagination.

Related Topic