I have an interesting observation, maybe somebody can confirm this is real behaviour and what's the reason for this?

Let's say I have list of objects that I'm iterating over with aura:iteration. Each element of array have it's own type - depending on type I would want to render different child component:

<aura:iteration items="{!v.attributes}" var="attr" indexVar="i">

    <!-- TEXT -->
    <aura:renderIf isTrue="{!attr.Type__c == 'Text'}">
       <c:AttrText param="{!attr}"/>

    <!-- RADIO -->
    <aura:renderIf isTrue="{!attr.Type__c == 'Radio'}">
       <c:AttrRadio param="{!attr}"/>

    <!-- PICKLIST -->
    <aura:renderIf isTrue="{!attr.Type__c == 'Picklist'}">
       <c:AttrPicklist param="{!attr}"/>


Then let's say a child component looks like this:



    <aura:attribute name="param" type="Object"/>
    <aura:handler name="init" value="{!this}" action="{!c.initialize}"/>


In initialize method called on init I'm putting simple console log:


    initialize : function (component, event, helper) {
        console.log('initializing text component');

The thing that I do not understand is why in a console I can see as many lines of "initializing text component" as there are elements in "v.attributes" array I'm iterating over.

Can somebody help me explain it? I guess that by this I'm running into some performance problems. Is there any workaround?

1 Answer 1


Not sure if this would apply in your case, but have you tried using aura:if instead of aura:renderIf?
according to this doc :

Only consider using aura:renderIf if you expect to show the components for both the true and false states, and it would require a server round trip to instantiate the components that aren't initially rendered. Otherwise, use aura:if as it only creates and renders the markup in its body or the else attribute.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .