# Repeated Custom Elements do not release memory

**URL:** <https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265>\
**Category:** Help Requests\
**Created:** [February 24, 2020, 9:15pm UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265 "2020-02-24T21:15:11Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcorven](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@mcorven](https://discourse.aurelia.io/u/mcorven)\
**Post date:** [February 24, 2020, 9:15pm UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/1 "2020-02-24T21:15:11Z")

</div>

If I bind an array to a repeated custom element, the `attached()` is called for each instance of the custom element. But when I clear the array (using `myArray.splice(0)` as suggested elsewhere), the custom element instances do not call detached. Additionally, by repeatedly adding items to the array and clearing them, I see that my memory consumption steadily increases.

[demo here](https://codesandbox.io/s/a-simple-component-e3cjy) See file src/display.js

In my real-world implementation, the custom element instances each subscribe to EventAggregator - and because `detached()` isn’t called, I’m unable to clean up.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 24, 2020, 9:28pm UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/2 "2020-02-24T21:28:16Z")

</div>

Your demo does detach for me in both Chrome and Safari.

 ![Screen Shot 2020-02-25 at 8.26.17 am](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/7/72323b88d3b854093ec53d9c18da76880b75300a.png)

---

<div class="post-metadata">

**Author:** ![mcorven](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@mcorven](https://discourse.aurelia.io/u/mcorven)\
**Post date:** [February 25, 2020, 12:49am UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/3 "2020-02-25T00:49:27Z")

</div>

Thanks @huochunpeng, I missed the fact that the sandbox console wasn’t scrolling to the bottom as output arrived. Unfortunately I _do_ have this problem in the production code - I suppose getting the sandbox to exhibit the same issue will be my best way of finding the root cause.

Thanks for looking in any case - I’ll post back again if I draw another blank.

---

<div class="post-metadata">

**Author:** ![mcorven](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@mcorven](https://discourse.aurelia.io/u/mcorven)\
**Post date:** [February 25, 2020, 4:11am UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/4 "2020-02-25T04:11:05Z")

</div>

Okay @huochunpeng, [I’ve revised the demo](https://codesandbox.io/s/a-simple-component-e3cjy) to fully-reproduce the issue I’m seeing in production. From some background, in our code we use a set of custom elements for our “dropdown” like this:

```
<cc-dropdown placeholder="Demo" value.bind="selectedValue">
   <cc-dropdown-item repeat.for="item of arrayOfItems" value.bind="item.value">${item.displayText}</io-dropdown-item>
</cc-dropdown>

```

In the View for `<cc-dropdown>` we use a slot to place the repeated `<cc-dropdown-item>` instances.

With the codesandbox updated, you can open Chrome’s Task Manager and reproduce as follows:

1. See idle consumption of codesandbox subframe ~119,000K
2. Add 10,000 items. _I know it’s crazy - just humor me, it makes the memory consumption abundantly noticeable._ Allow 10-15 seconds to settle. See idle consumption ~185,000K.
3. Click “Clear Array” button. Allow to settle. See idle consumption still ~185,000K or even a bit higher. WTH?? Maybe Aurelia is holding onto those DOM elements in-memory for reuse to speed up the next UI update?
4. Add another 10,000 items. Allow to settle. See idle consumption ~234,000K. Nope, the theory about element reuse is out the window.
5. Click “Clear Array” button. Allow to settle. See idle consumption still ~234,000K.

I started to wonder if the use of a slot in `<cc-dropdown>` has anything to do with it, so I created a [second codesandbox](https://codesandbox.io/s/a-simple-component-5rm1i) with a simple use of `<ul>` and `<li>`. With the same steps above, repeatedly adding 10,000 items and then clearing, I see the “cleared” memory consumption rising although at a much slower rate than with the 1st sandbox.

Disregarding the statement earlier about detached() not getting called (which was a brainless tangent on my part), I’m now back to the heart of the issue - what appears to be a memory leak. Our users reported the application was coming to a crawl, and the browser tab crashing, when using a specific dropdown in the app several times. We found that the dropdown was being populated with WAY TOO MANY items - but even with the number of array items reduced to a more reasonable level, we’re still seeing memory consumption rise over the course of the user’s session.

Any ideas?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 25, 2020, 11:43am UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/5 "2020-02-25T11:43:10Z")

</div>

I think I recognize the leak, it’s been fixed here [https://github.com/aurelia/templating/pull/678](https://github.com/aurelia/templating/pull/678)

we will need to ping @EisenbergEffect for a release.

Thanks for notifying about this.

---

<div class="post-metadata">

**Author:** ![mcorven](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@mcorven](https://discourse.aurelia.io/u/mcorven)\
**Post date:** [February 25, 2020, 1:32pm UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/6 "2020-02-25T13:32:54Z")

</div>

Awesome thanks @bigopon!

---

<div class="post-metadata">

**Author:** ![mcorven](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@mcorven](https://discourse.aurelia.io/u/mcorven)\
**Post date:** [February 25, 2020, 1:52pm UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/7 "2020-02-25T13:52:56Z")

</div>

@EisenbergEffect is this next release of aurelia-templating, to include PR 678, major or minor (semver)?

---

<div class="post-metadata">

**Author:** ![EisenbergEffect](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/eisenbergeffect/32/2655_2.png) [@EisenbergEffect](https://discourse.aurelia.io/u/EisenbergEffect)\
**Post date:** [February 25, 2020, 4:22pm UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/8 "2020-02-25T16:22:37Z")

</div>

@mcorven It has already been released. It’s only our official release notes blog post that is a bit behind. That is scheduled for this week.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 25, 2020, 10:11pm UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/9 "2020-02-25T22:11:55Z")

</div>

@EisenbergEffect oops, sorry for that, thanks for the note.

@mcorven the sandbox example was using `aurelia-templating@1.10.1`, I updated it to `1.10.3` and it’s fixed now.  
 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/9/96a96d26654a70982776292c18d79f3915b20a51.png)

Can you try update `aurelia-templating` to `1.10.3` and try again?

---

<div class="post-metadata">

**Author:** ![mcorven](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@mcorven](https://discourse.aurelia.io/u/mcorven)\
**Post date:** [February 26, 2020, 4:22am UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/10 "2020-02-26T04:22:07Z")

</div>

@bigopon With 1.10.3 installed in both the sandbox and my own app, the situation is consistently improved. I’m still not seeing all the RAM released though. Below is a log of actions against the sandbox (with 1.10.3 installed) while monitoring the consumption using Chrome’s Task Manager on the sandbox’s iframe. FYI after each action I waited 10-15 seconds for things to settle down:

![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/e/ec0f63d883cf12180c806316c82e8cb6e77f26ab.png)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 26, 2020, 8:01am UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/11 "2020-02-26T08:01:37Z")

</div>

here is my test:  
 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/2/247b3d7072544ce584d6764aa3ca568a30c76f15.png)

Snapshot timing:  
1: initial  
2: after added 2000 items  
3: after clear all items  
4: after added 10000 items  
5: after clean all items  
6: after doing nothing after (5)

I think you need to open the app in a separate window to test, instead of testing it in a sandboxed tab. The button to open the site is on the right, as you can see here

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/8/815c40ee1fbbc4e42b2081b9254f2bde8a15672e.png)

---

<div class="post-metadata">

**Author:** ![mcorven](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@mcorven](https://discourse.aurelia.io/u/mcorven)\
**Post date:** [February 26, 2020, 11:22am UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/12 "2020-02-26T11:22:56Z")

</div>

@bigopon When I run this in a tab of its own, I’m seeing an initial heap size of 7.5MB - 8MB rather than your 27.7MB.

> [@bigopon](#):
>
> Snapshot timing:  
> 1: initial  
> 2: after added 2000 items  
> 3: after clear all items  
> 4: after added 10000 items  
> 5: after clean all items  
> 6: after doing nothing after (5)

![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/e/e0a4f38fa4fff6530a64ec6799abd2ac1fbbfca3.png)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 26, 2020, 12:30pm UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/13 "2020-02-26T12:30:26Z")

</div>

did you run it with templating `1.10.3`? And im not sure why the difference

---

<div class="post-metadata">

**Author:** ![mcorven](https://avatars.discourse-cdn.com/v4/letter/m/edb3f5/32.png) [@mcorven](https://discourse.aurelia.io/u/mcorven)\
**Post date:** [February 26, 2020, 1:04pm UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/14 "2020-02-26T13:04:34Z")

</div>

Yes I was sure to update the sandbox to 1.10.3. The good news is that the exponential consumption has resolved with 1.10.3.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [February 27, 2020, 5:22am UTC](https://discourse.aurelia.io/t/repeated-custom-elements-do-not-release-memory/3265/15 "2020-02-27T05:22:12Z")

</div>

Glad to hear that. Because i cant replicate the leak on my side 😓