This component shows the anti-pattern.
<!--c:ifCleanUnrendered--> <aura:component> <aura:attribute name="isVisible" type="boolean" default="true"/> <aura:handler name="init" value="{!this}" action="{!c.init}"/> <aura:if isTrue="{!v.isVisible}"> <p>I am visible</p> </aura:if> </aura:component>
Here’s the component’s client-side controller.
/* c:ifCleanUnrenderedController.js */ ({ init: function(cmp) { /* Some logic */ cmp.set("v.isVisible", false); // Performance warning trigger } })
When the component is created, the isTrue attribute of the <aura:if> tag is evaluated. The value of the isVisible attribute is true by default so the framework creates the body of the <aura:if> tag. After the component is created but before rendering, the init event is triggered.
The init() function in the client-side controller toggles the isVisible value from true to false. The isTrue attribute of the <aura:if> tag is now false so the framework must destroy the body of the <aura:if> tag. This warning displays in the browser console only if you enabled debug mode.
WARNING: [Performance degradation] markup://aura:if ["5:0"] in c:ifCleanUnrendered ["3:0"] needed to clear unrendered body.
Click the expand button beside the warning to see a stack trace for the warning.
Click the link for the ifCleanUnrendered entry in the stack trace to see the offending line of code in the Sources pane of the browser console.
Reverse the logic for the isTrue expression. Instead of setting the isTrue attribute to true by default, set it to false. Set the isTrue expression to true in the init() method, if needed.
Here’s the fixed component:
<!--c:ifCleanUnrenderedFixed--> <aura:component> <!-- FIX: Change default to false. Update isTrue expression in controller instead. --> <aura:attribute name="isVisible" type="boolean" default="false"/> <aura:handler name="init" value="{!this}" action="{!c.init}"/> <aura:if isTrue="{!v.isVisible}"> <p>I am visible</p> </aura:if> </aura:component>
Here’s the fixed controller:
/* c:ifCleanUnrenderedFixedController.js */ ({ init: function(cmp) { // Some logic // FIX: set isVisible to true if logic criteria met cmp.set("v.isVisible", true); } })