Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

<aura:if> —Clean Unrendered Body —Clean Unrendered Body

This warning occurs when you change the isTrue attribute of an <aura:if> tag from true to false in the same rendering cycle. The unrendered body of the <aura:if> must be destroyed, which is avoidable work for the framework that slows down rendering time.

Example

This component shows the anti-pattern.

1<!--c:ifCleanUnrendered-->
2<aura:component>
3    <aura:attribute name="isVisible" type="boolean" default="true"/>
4    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
5
6    <aura:if isTrue="{!v.isVisible}">
7        <p>I am visible</p>
8    </aura:if>
9</aura:component>

Here’s the component’s client-side controller.

1/* c:ifCleanUnrenderedController.js */
2({
3    init: function(cmp) {
4        /* Some logic */
5        cmp.set("v.isVisible", false); // Performance warning trigger
6    }
7})

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.

1WARNING: [Performance degradation] markup://aura:if ["5:0"] in c:ifCleanUnrendered ["3:0"]
2needed 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.

How to Fix the Warning

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:

1<!--c:ifCleanUnrenderedFixed-->
2<aura:component>
3    <!-- FIX: Change default to false.
4         Update isTrue expression in controller instead. -->
5    <aura:attribute name="isVisible" type="boolean" default="false"/>
6    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
7
8    <aura:if isTrue="{!v.isVisible}">
9        <p>I am visible</p>
10    </aura:if>
11</aura:component>

Here’s the fixed controller:

1/* c:ifCleanUnrenderedFixedController.js */
2({
3    init: function(cmp) {
4        // Some logic
5        // FIX: set isVisible to true if logic criteria met
6        cmp.set("v.isVisible", true);
7    }
8})

Lightning Aura Components Developer Guide

<aura:if> —Clean Unrendered Body —Clean Unrendered Body

Example

How to Fix the Warning

See Also