6

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
</aura:id>

versus

<div class="{! v.myBoolean ? 'slds-show' : 'slds-hide'}">
    The Content
</div>
Improve this question
1
  • 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.
    – pkozuchowski
    Nov 23, 2018 at 11:25

3 Answers 3

Reset to default
5

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.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_conditional_markup.htm?search_text=aura:if

Improve this answer
1

Another purpose of using slds-hide is that it creates the content inside you div but will not display it on the UI. This can be useful if you have used some Input fields inside the div along with aura:id to validate the data before saving it into the database.

Whereas aura:if will not even create the content if the condition fails. And on Condition fail, the aura:id will not hold the updated data.

Improve this answer
0

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).

Improve this answer

You must log in to answer this question.

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