Are there any benefits/negatives from either of the approaches below to conditionally show content in a Lightning component?

<aura:if isTrue="{! v.myBoolean }">
    The Content


<div class="{! v.myBoolean ? 'slds-show' : 'slds-hide'}">
    The Content
  • aura:if causes DOM changes which is costly performance-wise. Use class approach whether applicable. Of course, there are situations where you might prefer aura:if - for example when you'd have to render many complex components in iteration, but that is left for your judgment. On another note, when using class - the body will be initialized immediately, whereas aura:if will initialize it's body every time isTrue attribute changes value to "true". Sometimes you don't want the component inside to be initialized before something else happens. Nov 23 '18 at 11:25

The benefit of aura:if is it does not even create the content inside its block if the conditions are false, thus it can help you make lightweight applications.

Hiding a div via CSS will still create the block and thus I feel, it will be bad for performance.

According to Salesforce docs

Using the aura:if tag is the preferred approach to conditionally display markup but there are alternatives. Consider the performance cost and code maintainability when you design components. The best design choice depends on your use case.



First of all you don't need to use slds-show. If you remove 'slds-hide' the component displays anyway, but that's not the main question here.

Difference between those two is that <aura:if/> actually removes instance of contents from your page and slds-hide just hides it from view. Removing contents from page is usually better for optimization but keep in mind that if you re-instantiate them on a runtime they'll be back at the original state (just as you coded them in the first place).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.