To understand this scenario, let's take an example component code. Let's name the component ifElseLadder. The component displays numbers in a nested manner.

The component code is as follows:

<aura:component >

    <aura:attribute name="truthy" type="Boolean" default="false"/>
    <aura:attribute name="innerCmpDisplay" type="Boolean" default="true"/>
    <aura:attribute name="arraySize" type="List" default="[]"/>

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

    <aura:iteration items="1,2,3,4,5" var="item">
    <aura:if isTrue="{!v.truthy}">
        True 
        <aura:set attribute="else">
          <aura:iteration items="{!v.arraySize}" var="i">
            <aura:if isTrue="{!v.innerCmpDisplay}">
                <div>
                    {!i}
                </div>
                <aura:iteration items="{!v.arraySize}" var="j">
                    <aura:if isTrue="{!v.innerCmpDisplay}">
                        <div>
                            {!j}
                        </div>
                    </aura:if>
                </aura:iteration>
            </aura:if>
          </aura:iteration>
        </aura:set>
      </aura:if>

   
   </aura:iteration>
</aura:component> 

The controller code is as follows:

({
    doInit : function(component, event, helper) {
        console.time("renderladder");
        var arrayList = [];
        for(var i=0 ; i<=100 ; i++){
            arrayList.push(i);
        }
        component.set("v.arraySize",arrayList);
        console.timeEnd("renderladder");
    }
})

Try to test this by creating a test app such as the following one:

<aura:application extends="force:slds">
    <c:ifElseLadder />
</aura:application>

If you preview this application, you will notice that each application takes an enormous amount of time to render the component.

If you run the following snippet in the browser's console, you can keep track of a number of components created:

$A.componentService.countComponents();

If you inspect the Lightning Application, using the performance tool discussed in the previous chapter, the results are as follows (notice a large cycle for the component):

The following screenshot is from the performance optimization tool, and you can clearly see that the count of the number of components is huge:

For our current code, you can see that the number of components created is greater than 20K. This causes rendering issues. Hence, it is recommended to examine the size of the list carefully when you have a complex frontend branch using aura:if. Do not use a lot of rows of data, and use techniques such as filtering and paginate to keep the number of rows to a minimum.

If you have backend Apex code fetching rows of data, then it is recommended to use the SOQL offset to implement server-side pagination.

Similarly, if you are connecting to a third-party API to get some data recommended, that API is designed to not return more than 100 rows in one call. The API should implement filtering and searching capabilities and restrict the number of results to hundreds, and not thousands, to keep things performant.