[SalesForce] Lightning – aura:iteration with aura:renderIf instantiates all components in if clause

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}"/>
    </aura:renderIf>

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

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

</aura:iteration>

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

AttrText.cmp

<aura:component>

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

</aura:component>

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

AttrTextController.js

({
    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?

Best Answer

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.

Related Solutions

Lightning Aura Components – Bug in Lightning Framework Using aura:renderIf

This is a known issue in the Framework.

We do plan to fix it, but there is a workaround and so it's not #1 on our plate over things like Performance.

Short Story

<aura:renderIf isTrue="{!v.testingArray.length > 0}">
        <SPAN>
        <aura:iteration items="{!v.testingArray}" var="opp">
            {!opp.name} <br/>
        </aura:iteration>
        </SPAN>
        <aura:set attribute="else">
            Array empty
        </aura:set>
    </aura:renderIf>

Long Story

The issue here is that some components like aura:renderIf and aura:iteration may not actually render anything. But you can come along later, change a condition and then they render.

To know where to render when it comes time to do so, we add a comment into the page. Then when we have some output, we replace the comment with the output.

But when you get a component like iteration which uses a comment, inside another component that uses a comment the framework gets confused. We replace the comment with the content of the iteration, but then renderIf loses its marker comment and you've hit the error.

Wrapping the iteration in a span causes iteration and renderIf not to share markers and things start working again.

Something we plan to fix, but the marker system is so complex we have to be careful not to break other things.

Lightning Aura Components – Iterating Over Two Objects with Dynamic Key

Lightning aura:iteration over two objects with dynamic key

In this example I am using contact object and we will get contact' Account info as well as owner info..

For now I am hard-coded API name but you can use Field set as well..

Apex class

public class GetAFewContacts {

    @AuraEnabled
    public static list<Contact> getContacts(){
        return [SELECT Id, Name, Account.Name, Owner.Name, Owner.Email 
                  FROM Contact LIMIT 10];
    }

}

Component

<aura:component controller="GetAFewContacts"  implements="force:appHostable, flexipage:availableForAllPageTypes, forceCommunity:availableForAllPageTypes" access="global">
    <aura:attribute name="contacts" type="Contact[]" />
    <aura:attribute name="fieldNames" type="String[]" default='["Id","Name", "Account.Name", "Owner.Name", "Owner.Email"]'/>

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

    <table>
        <tr>
        <aura:iteration items="{!v.fieldNames}" var="fieldName">
            <th><ui:outputText value="{!fieldName}" /></th>
        </aura:iteration>
        </tr>
        <aura:iteration items="{!v.contacts}" var="contact" >
        <tr>
            <aura:iteration items="{!v.fieldNames}" var="fieldName">
                <td>
                <c:ContactAndFieldName contact="{!contact}" fieldName="{!fieldName}" />
                </td>
            </aura:iteration>
        </tr>
        </aura:iteration>
    </table>
</aura:component>

ControllerJS

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getContacts");
        action.setCallback(this,function(response){
                if (response.getState() === "SUCCESS"){
                    component.set("{!v.contacts}",response.getReturnValue());
                }
            }
        );
        $A.enqueueAction(action);
    }
})

InnerComponent

<aura:component >
    <aura:attribute name="contact" type="Contact" />
    <aura:attribute name="fieldName" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <ui:outputText aura:Id="outputTextId" />
</aura:component>

InnerComponentControllerJS

({
    doInit : function(component, helper) {
        var Contact = component.get('v.contact');
        var FieldName = component.get('v.fieldName');
        var outputText = component.find("outputTextId");
        if (FieldName.indexOf(".") >= 0) {
            var ParentSobject = Contact[FieldName.split(".")[0]];
            if(ParentSobject != undefined){
                outputText.set("v.value",ParentSobject[FieldName.split(".")[1]]);
            }
        }
        else{
            outputText.set("v.value",Contact[FieldName]);
        }
    }
})