Aura:If vs Styling to show/hide content





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty{ margin-bottom:0;
}






up vote
4
down vote

favorite












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-components slds aura-if







share|improve this question






















  • 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
    12 hours ago



















up vote
4
down vote

favorite












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-components slds aura-if







share|improve this question






















  • 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
    12 hours ago















up vote
4
down vote

favorite









up vote
4
down vote

favorite











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-components slds aura-if







share|improve this question













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-components slds aura-if




lightning-components slds aura-if






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked 12 hours ago









Girbot

3,56511839




3,56511839












  • 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
    12 hours ago




















  • 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
    12 hours ago


















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
12 hours ago






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
12 hours ago












2 Answers
2






active

oldest

votes

















up vote
3
down vote













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






share|improve this answer






























    up vote
    0
    down vote













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






    share|improve this answer










    New contributor




    Bartosz Śliwiński is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.


















      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',
      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
      });


      }
      });














       

      draft saved


      draft discarded


















      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








      up vote
      3
      down vote













      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






      share|improve this answer



























        up vote
        3
        down vote













        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






        share|improve this answer

























          up vote
          3
          down vote










          up vote
          3
          down vote









          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






          share|improve this answer














          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







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited 10 hours ago

























          answered 12 hours ago









          Pranay Jaiswal

          10.9k31951




          10.9k31951
























              up vote
              0
              down vote













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






              share|improve this answer










              New contributor




              Bartosz Śliwiński is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
              Check out our Code of Conduct.






















                up vote
                0
                down vote













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






                share|improve this answer










                New contributor




                Bartosz Śliwiński is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.




















                  up vote
                  0
                  down vote










                  up vote
                  0
                  down vote









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






                  share|improve this answer










                  New contributor




                  Bartosz Śliwiński is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.









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







                  share|improve this answer










                  New contributor




                  Bartosz Śliwiński is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.









                  share|improve this answer



                  share|improve this answer








                  edited 12 hours ago





















                  New contributor




                  Bartosz Śliwiński is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.









                  answered 12 hours ago









                  Bartosz Śliwiński

                  13




                  13




                  New contributor




                  Bartosz Śliwiński is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.





                  New contributor





                  Bartosz Śliwiński is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.






                  Bartosz Śliwiński is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.






























                       

                      draft saved


                      draft discarded



















































                       


                      draft saved


                      draft discarded














                      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





















































                      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







                      -