Aura:if vs slds-show/hide : Which one to use for rendering html components in Lightning components

As we know that sometimes we have show content in Lightning components based on different conditions. There are 2 different options to achieve this:

• By using <Aura:if > tag.

For example :

<aura:if isTrue="{!v.displayedSection == 'section1'}">

<!-- code to display information on UI -->

</aura:if>

• By using slds-show or slds-hide class on div.

For example :

<div class="{!if(v.displayedSection == 'section1','slds-show','slds-hide')}">

<!-- code to display information on UI -->

</div>

Considerations while using <Aura:if> tag

• Only the code present inside Aura:if for which condition returns true will be rendered as HTML.
• If you try to refer HTML component in controller.js present inside Aura:if which is not visible on UI because condition specified doesn't match, then you will get undefined value.

I have created a Lightning component to show Aura:if behavior along with snapshot from inspect element and console log statements to justify above 2 statements.

Image snapshot showing behavior using inspect element:

Considerations while using slds-show or slds-hide class

• All code present inside the div will be rendered as HTML irrespective of div class. Only the div for which class is slds-hide will not be visible on UI.
• All HTML components can be referred in controller.js irrespective of class specified on div.

I have created a lightning component to display slds-show or slds-hide behavior along with snapshot from inspect element to justify above statements.

Image snapshot showing component behaviour using inspect element:

Hope this will help!!!

Looking forward for everyone's comments and suggestion.

More Blogs>>: 

INHERITANCE IN LIGHTNING    
FIRING EVENT FROM LIGHTNING COMPONENT AND PASSING IT TO VF PAGE    
CHANGES TO LIGHTNING DATA SERVICE IN SUMMER'17    
LIGHTNING DATA SERVICES    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
FIRE LIGHTNING EVENTS FROM VF PAGE    
DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING LIGHTNING COMPONENT ATTRIBUTE VALUE FROM VF PAGE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT    
CUSTOM COMPONENT TO SHOW/HIDE SPINNER IMAGE