Aura Components are being aggregated on 'items' change of aura:iteration

Question

I've created a simple component to show my issue:

Markup (testComp.cmp):

<aura:component description="testComp">
  <aura:attribute name="testAttr" type="List" default="[[[1, 2], [2, 3], [3, 4]]]" />
  <button onclick="{!c.doSomething}" />
  <aura:iteration items="{!v.testAttr}" var="testVal">
    <aura:iteration items="{!testVal}" var="innerVal">
      <div aura:id="innerTestDiv" />
    </aura:iteration>
  </aura:iteration>
</aura:component>

JSController (testCompController.js):

({
  doSomething : function(component) {
    var items = component.find('innerTestDiv');
    alert('Total components: ' + items.length);
    var test = component.get('v.testAttr');
    component.set('v.testAttr', test);
  }
})

Every time I click the button and set the value of "testAttr" again for the aura:iteration to iterate over it, the amount of objects returned from component.find('innerTestDiv') is increased, because the old components aren't being deleted and still seem to be on the DOM.

I've tried setting testAttr to null or an empty array before resetting it, but it doesn't help.. the moment that component.set('v.testAttr', test) is executed, the aura:iteration creates a new set of components.

Is there any way to clear the old components/elements so that only the new ones will be displayed?

I need it because I'm trying to dynamically collect the data from all the fields on the screen and currently I've done it by embedding components inside other components and just gathering information from them.. but once I encounter this issue of reiterating again, I can't rely on the created components any longer.

Answer 1

Thank you for the demo code. I have confirmed the problem and filed a bug. Here are the conditions to get the component leak:

1. LockerService enabled
2. Nested <aura:iteration>
3. The inner elements of the iteration has arrays.

In other words, [[1,2,3]] is fine but [[ [ ], [ ], [ ] ]] leaks the elements in the second iterations 3 times, [[ [ ], [ ], "A"]] leaks twice etc.

The good news is that objects are not affected, [[ { }, { }, { } ]] is not leaking, so you can change the inner structure to an object.

Here is the repro code if you want to play with different scenarios:

// test.app
<aura:application>
  <aura:attribute name="mylists" type="List"/>
  <aura:attribute name="mylist" type="List"/>
  <aura:handler name="init" value="{!this}" action="{!c.init}"/>
  <button onclick="{!c.test}">Test</button>
  <aura:iteration items="{!v.mylists}" var="mylist">
    <ul aura:id="list">
    <aura:iteration items="{!mylist}" var="myitems">
        <li aura:id="item">{!myitems + ''}</li>
    </aura:iteration>
    </ul>
  </aura:iteration>
  <ul aura:id="list">
    <aura:iteration items="{!v.mylist}" var="myitems">
        <li aura:id="item">{!myitems + ''}</li>
    </aura:iteration>
  </ul>
</aura:application>

// testController.js
({
  init : function(component) {
      // component.set('v.mylists', [['A', 'B', 'C'], ['a', 'b', 'c']]); // No leak
      // component.set('v.mylists', [['A', ['Y', 'B'], 'C'], ['a', 'b', 'c']]); // Leaks 1 component
      // component.set('v.mylists', [[['X', 'A'], ['Y', 'B'], 'C'], ['a', 'b', 'c']]); // Leaks 2 component
      component.set('v.mylists', [[['X', 'A'], ['Y', 'B'], ['Z', 'C']], ['a', 'b', 'c']]); // Leaks 3 component
      // component.set('v.mylists', [[[], [], []], ['a', 'b', 'c']]); // Leaks 3 component
      // component.set('v.mylists', [[{}, {}, {}], ['a', 'b', 'c']]); // No leak
      // component.set('v.mylists', [[{length: 0}, {length: 1}, {length: 2}], ['a', 'b', 'c']]); // No leak
      component.set('v.mylist', [['X', 'A'], ['Y', 'B'], 'C']); // No leak
  },
  test : function(component) {
    var list = component.find('list');
    var items = component.find('item');
    alert('Total lists: ' + list.length + "\n" + 'Total list items: ' + items.length);
    var mylists = component.get('v.mylists');
    component.set('v.mylists', mylists);
    var mylist = component.get('v.mylist');
    component.set('v.mylist', mylist);
  }
})

Answer 2

A simpler workaround that worked for us: Check to see if the value returned from isRendered() on each of the components returned from component.find() is true. For us all the 'old' ones were always false.

Answer 3

For the case of click, localId deIndexing on component only happens during rendering cycle, which is after the client action is done. During rendering cycle, the framework will destroy unneeded component and deIndex the localId from the owner component. This is because framework wants to reuse the components which have same value in the old list. Component.set() does not clean up the localId indexes on the component, but it marks the component as dirty for re-render.

For the case of click2, the callback gets executed asynchronously, it gets called after the rendering cycle completes. That's why you can see the up to date count.

For workaround, I think Luke's comment above could work, but only if the new list does not contain any value in the old list. As I said, if the value exists in the old list, the component with the value will be reused.

Answer 4

EDIT

Ok, Turns out that didn't work.

The best I've been able to do is define all the inner arrays as top level arrays. So if you have three levels deep, you define three attributes. Which is painful, I know.

Then you set these arrays separately. Each time you get describe information, you'd need to parse out the arrays and set each level.

Working code for reference:

<aura:application >
    <aura:attribute name="testAttr1" type="List" default="[1,2]" />
    <aura:attribute name="testAttr2" type="List" default="[3,4]" />
  <button onclick="{!c.doSomething}" />

  <aura:iteration aura:id="iterator" items="{!v.testAttr1}" var="var1">
      <div aura:id="outerTestDiv" >{!var1}</div>
      <aura:iteration items="{!v.testAttr2}" var="var2">
          <div aura:id="innerTestDiv" >{!var2}</div>
      </aura:iteration>
  </aura:iteration>

</aura:application>

JS:

({
  doSomething : function(component) {
    var items = component.find('innerTestDiv');
    alert('Total components: ' + items.length);
    var test = component.get('v.testAttr2');
    component.set('v.testAttr2', test);
  }
})

Whether that's good enough, I don't know, but I haven't been able to improve on it.

Answer 5

Here's the repro of the issue in 2018 and a workaround we can live with. Your mileage may vary, of course.

Compare onClick to onClick2. The later will produce correct counts in contrast to onClick.

<aura:application >
    <aura:attribute name="myList" type="List" default="[7,8,9,10]"/>    


    <aura:iteration items="{!v.myList}" var="item1">
        <div aura:id="listItem1">{!item1}</div>
    </aura:iteration>

    <lightning:button onclick="{!c.onClick}" label="click1"/>
    <lightning:button onclick="{!c.onClick2}" label="click2"/>

</aura:application>

({

    onClick : function(component, event, helper) {
        var count = component.find("listItem1").length;
        console.log("1: "+count);
        component.set("v.myList", [11,12]);
        count = component.find("listItem1").length;
        console.log("2: " +count);
    },

    onClick2 : function(component, event, helper) {
        var count = component.find("listItem1").length;
        console.log("1: "+count);
        component.set("v.myList", [11,12]);
        var timer = window.setInterval($A.getCallback(function() {
                if (component.isValid()) {
                   clearInterval(timer);
                   count = component.find("listItem1").length;
                   console.log("2: " +count);
                }
        }), 200);
    }

})