[SalesForce] lightning aura:iteration WARNING: Performance degradation: Multiple items were set in iteration

I am getting this warning in my aura iteration after salesforce spring release 16. How can i fix this?

I am constructing json object "tabledata" in a function and populating the table body with "dat" attribute. Exactly when this line of code from my controller runs it throws

"WARNING: Performance degradation: Multiple items were set in
iteration in the same Aura cycle." a warning in console.
component.set("v.addedObj", tableData);

<table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal slds-no-row-hover">
<thead>
    <tr>
        <th class="slds-text-heading--label slds-size--1-of-6 slds-is-sortable" scope="col">a</th>
        <th class="slds-text-heading--label slds-size--1-of-6 slds-is-sortable" scope="col">b</th>
        <th class="slds-text-heading--label slds-size--1-of-6 slds-is-sortable" scope="col">c</th>
        <th class="slds-text-heading--label slds-size--1-of-6 slds-is-sortable" scope="col">v</th>
        <th class="slds-text-heading--label slds-size--1-of-6 slds-is-sortable" scope="col">p</th>
        <th class="slds-text-heading--label slds-size--1-of-6 slds-is-sortable" scope="col">m</th>
    </tr>
</thead>
<tbody>
<aura:iteration items="{!v.addedObj}" var="dat" indexVar="index">
<tr class="slds-hint-parent">
<td>
    <span class="slds-truncate"><ui:outputText value="{!dat.dat1}"/></span>
</td>
<td>
    <span class="slds-truncate"><ui:outputText value="{!dat.dat2}"/></span>
</td>
<td data-label="allocationPercent">
    <span class="slds-truncate">
      <input type="text" id="{!'a_'+index}" value="{!dat.dat3}" onchange="{!c.updateChanges}" onkeyup="{!c.allocationTotalCal}" onkeydown="{!c.allowNumericWithDecimal}" onblur="{!c.allocationTotalCal}"/>
    </span>
</td>
<td data-label="lowerBand">
    <span class="slds-truncate"><input type="text" id="{!'lBand_'+index}" onkeyup="{!c.onkeyupAllowNumericWithDecimal}" onkeydown="{!c.allowNumericWithDecimal}" onblur="{!c.onBlurBand}" value="{!portfolioData.dat4}"/></span>
</td>
<td data-label="upperBand">
    <span class="slds-truncate"><input type="text" id="{!'uBand_'+index}" onkeyup="{!c.onkeyupAllowNumericWithDecimal}" onkeydown="{!c.allowNumericWithDecimal}" onblur="{!c.onBlurBand}" value="{!portfolioData.dat5}"/></span>
</td>
<td data-label="deleteSym">
    <span id="{!'del_'+index}" onclick="{!c.deleteRow}"> Delete Icon</span>
    </span>
</td>

Best Answer

Looking into aura framework source code you can see this warning is thrown when framework is doing it's own garbage collection.

If a single not-rendered component is destroyed, then framework will show you a warning. Commit message says it's been implemented to stop memory leakage.

Framework executes this cleanup after each update to the DOM.

Related Topic