Memory leak

[vastray]

Removed elements are not deleted from memory.

^^^ Nodes and Listeners are not cleared

We create the "List" controller, in it we create elements for the "Item" controller. When the button is clicked, the item is cleared and a list is created. When you click on the "Reload" button, a memory leak occurs. The garbage collector doesn't help.

Example:

index.html

<div data-controller="list">
    <button data-action="list#reload">Reload</button>
    <div data-list-target="listContainer"></div>
</div>

script.js

const data = ['name1', 'name2', 'name3', 'name4', 'name5', 'name6', 'name7', 'name8']

Stimulus.register("list", class extends Controller {

    static targets = ['listContainer']

    connect() {
        this.load()
    }

    load() {
        data.forEach((name) => {
            const div = document.createElement('div')
            div.setAttribute('data-controller', 'item')
            div.setAttribute('data-action', 'click->item#log')
            div.innerText = name
            this.listContainerTarget.appendChild(div)
        })
    }

    reload() {
        this.listContainerTarget.innerHTML = ''
        this.load()
    }
})

Stimulus.register("item", class extends Controller {

    log() {
        console.log('click')
    }

})

[tleish]

I'm pretty sure this has nothing to do with stimulus. In this instance, stimulus is the event handling for executing the javascript, it the standard javascript that creating and clearing the nodes.

It's been discussed a lot in other javascript forums:

• javascript - Empty-ing innerHTML increases number of DOM nodes - Stack Overflow
• javascript - How to remove DOM elements without memory leaks? - Stack Overflow
• Deleting HTML Elements in JavaScript to avoid memory leaks - Stack Overflow

You can read through this post for possible alternatives to innerHTML:

• Remove all child elements of a DOM node in JavaScript - Stack Overflow

[vastray]

@tleish I noticed an interesting feature. If I remove the line:

div.setAttribute('data-action', 'click->item#log')

Nodes are removed as expected. I don't understand how to explain it.

It seems to me that the event listener is not deleted or there is a link to it somewhere. Because of this, the nodes are also not deleted.

[intrip]

@vastray #592 might have fixed this, can you still reproduce using the latest StimulusJS version?

[vastray]

@intrip Yes, this fixes the current bug. The garbage collector removes all unused nodes. Good job.

[intrip]

Great! Let's close the issue now ?