Serious Memory Leak: Nested x-ifs and x-fors do not clean up Watchers and Effects, causing memory to grow indefinitely

[mgschoen]

Following #4287 I did some additional research and discovered the following, pretty serious memory leak related to the x-if and x-for directives.

Consider a situation in which two (or more) x-ifs or x-fors are nested. Whenever the expression of the outer directive changes in such a way that content gets removed, watchers and effects that are defined inside the inner directive are not cleaned up and stay in memory indefinitely.

Minimal example:

<div x-data="{ show: true }">
  <input type="checkbox" x-model="show" />
  <template x-if="show">
    <div>
        <template x-if="true">
          <div x-effect="console.log('toggle checkbox and I will get multiplied', show)">Content</div>
        </template>
    </div>
  </template>
</div>

This behavior can be reproduced in a variety of combinations, using x-if, x-for, x-effect and $watch. The cleanup() method of custom directives does not get called either. Here are some examples:

• x-if + x-if + x-effect (same as above)
• x-if + x-for + x-effect
• x-if + x-if + $watch
• x-if + x-for + $watch
• x-for + x-if + x-effect
• x-for + x-if + $watch
• x-for + x-for + $watch
• x-if + x-if + Custom Directive cleanup() not called

This might seem like a minor issue at first. But please consider larger apps, especially single page apps. Nesting these structures is not too uncommon. In fact, I inspected memory in a larger such app that my team develops. The app quickly piles up hundreds of MB of memory due to all kinds of data not being garbage collected just by navigating from page to page.

We have not yet managed to get to the bottom of this issue in the Alpine codebase. Any insights or potential fixes from people who are more familiar with the codebase would be very much appreciated!

[ekwoka]

I'll look into it :)

EDIT: Actually had a in progress PR that solves it entirely, I just got busy and never opened it.

[ekwoka]

#4300

[mgschoen]

Thanks for the super quick response! I checked out your PR – it eliminates 99.9% of all Memory Leaks in our SPA 🥳

[ekwoka]

Whats the 0.1% remaining?

[mgschoen]

Not sure yet, but I cannot confidently attribute them to Alpine at all. So unless there's any other evidence, I'd consider this issue solved by your PR