Aura:If vs Styling to show/hide content
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>
lightning-aura-components slds aura-if
asked Nov 23 '18 at 11:11
GirbotGirbot
3,67112044
add a comment |
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>
lightning-aura-components slds aura-if
asked Nov 23 '18 at 11:11
GirbotGirbot
3,67112044
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 '18 at 11:25
add a comment |
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>
lightning-aura-components slds aura-if
asked Nov 23 '18 at 11:11
GirbotGirbot
3,67112044
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>
lightning-aura-components slds aura-if
lightning-aura-components slds aura-if
asked Nov 23 '18 at 11:11
GirbotGirbot
3,67112044
asked Nov 23 '18 at 11:11
GirbotGirbot
3,67112044
asked Nov 23 '18 at 11:11
GirbotGirbot
3,67112044
asked Nov 23 '18 at 11:11
GirbotGirbot
3,67112044
asked Nov 23 '18 at 11:11
GirbotGirbot
3,67112044
3,67112044
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 '18 at 11:25
add a comment |
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 '18 at 11:25
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 '18 at 11:25
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 '18 at 11:25
add a comment |
2 Answers
2
active
oldest
votes
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
answered Nov 23 '18 at 11:21
Pranay JaiswalPranay Jaiswal
18.5k43058
add a comment |
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).
answered Nov 23 '18 at 11:21
Bartosz ŚliwińskiBartosz Śliwiński
1257
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "459"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f240348%2fauraif-vs-styling-to-show-hide-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Nov 23 '18 at 11:21
Pranay JaiswalPranay Jaiswal
18.5k43058
add a comment |
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
answered Nov 23 '18 at 11:21
Pranay JaiswalPranay Jaiswal
18.5k43058
add a comment |
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
answered Nov 23 '18 at 11:21
Pranay JaiswalPranay Jaiswal
18.5k43058
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
answered Nov 23 '18 at 11:21
Pranay JaiswalPranay Jaiswal
18.5k43058
edited Nov 23 '18 at 13:31
answered Nov 23 '18 at 11:21
Pranay JaiswalPranay Jaiswal
18.5k43058
answered Nov 23 '18 at 11:21
Pranay JaiswalPranay Jaiswal
18.5k43058
answered Nov 23 '18 at 11:21
Pranay JaiswalPranay Jaiswal
18.5k43058
18.5k43058
add a comment |
add a comment |
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).
answered Nov 23 '18 at 11:21
Bartosz ŚliwińskiBartosz Śliwiński
1257
add a comment |
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).
answered Nov 23 '18 at 11:21
Bartosz ŚliwińskiBartosz Śliwiński
1257
add a comment |
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).
answered Nov 23 '18 at 11:21
Bartosz ŚliwińskiBartosz Śliwiński
1257
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).
answered Nov 23 '18 at 11:21
Bartosz ŚliwińskiBartosz Śliwiński
1257
edited Nov 23 '18 at 11:33
answered Nov 23 '18 at 11:21
Bartosz ŚliwińskiBartosz Śliwiński
1257
answered Nov 23 '18 at 11:21
Bartosz ŚliwińskiBartosz Śliwiński
1257
answered Nov 23 '18 at 11:21
Bartosz ŚliwińskiBartosz Śliwiński
1257
1257
add a comment |
add a comment |
Thanks for contributing an answer to Salesforce Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f240348%2fauraif-vs-styling-to-show-hide-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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 '18 at 11:25