<aura:iteration> – multiple items set

If you see the following warning message in the browser console, this occurs if your component sets the items attribute of an <aura:iteration> tag multiple times in the same rendering cycle:

"WARNING: [Performance degradation] markup://aura:iteration [id:5:0] in c:iterationMultipleItemsSet ["3:0"]
had multiple items set in the same Aura cycle"
 

The following code shows how <indexentry content="events strategy: tag"> you can generate performance degradation when using aura:iteration.

<!--c:iterationMultipleItemsSet-->
<aura:component>
<aura:attribute name="sports" type="List"
default="[ 'Cricket', 'Tennis', 'Football' ]"/>

<aura:handler name="init" value="{!this}" action="{!c.init}"/>

<aura:iteration items="{!v.sports}" var="item">
<p>{!item}</p>
</aura:iteration>
</aura:component>


When the component is created, the items attribute of the <aura:iteration> tag is set to the default value of the sports attribute. After the component is created, but before rendering, the init event is triggered.

The init() function in the client-side controller sets the sports attribute, which resets the items attribute of the <aura:iteration> tag.

The controller code with the init event is shown here:

/* c:iterationMultipleItemsSetController.js */
({
init: function(cmp) {
var list = cmp.get('v.sports');
// Some logic
cmp.set('v.sports', list); // Performance warning trigger
}
})

Performance degradation in the aura:iteration tag encountered in the previous code snippet can be fixed by removing the default from the list. The following code changes, highlighted in bold, show changes made to the previous code to fix degradation issues:

<!--c:iterationMultipleItemsSetFixed-->
<aura:component>
<!-- FIX: Remove the default from the attribute -->
<aura:attribute name="sports" type="List" />

<aura:handler name="init" value="{!this}" action="{!c.init}"/>

<aura:iteration items="{!v.sports}" var="item">
<p>{!item}</p>
</aura:iteration>
</aura:component>

The controller code is as follows:

/* c:iterationMultipleItemsSetFixedController.js */
({
init: function(cmp) {
var sportslist = ['Cricket', 'Football', 'Tennis'];
// Some logic
cmp.set('v.sports', sportslist);
}
})
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.37.196