Blazor: when and how to cleanup JS Listeners / Observers / Element references?

[OliverDevsCodex]

Hey guys,

I discovered that calling JSInterop during disposal is not recommended: #45777.

I also learned that cleaning up listeners, etc., during navigation is not advisable.

Additionally, I found that using the mutation observer is recommended, so I spent hours trying to make it work. However, my results are always the same: if I have small components running some JS for animations or whatnot and I use the mutation observer, it is never called since the entire DOM tree is removed well above the component itself.

This leaves me with the question: How am I supposed to correctly clean up JS references like listeners and observers when a component is being disposed of to avoid memory leaks?

For example this JS code, that creates a listender and one observer and one mutation observer. the mutation observer never gets called because the component that uses the function is way down the element tree and never gets notified when an element is removed since one of the parents way obove this component is removed.

class ScrollShadowController {
    constructor() {
        this.observer = null;
        this.scrollListener = null; // Variable to store the scroll event listener for cleanup
    }

    // Function to handle resize events
    onResize = () => {
        this.updateShadow();
    };

    // Function to handle scroll events
    onScroll = () => {
        this.updateShadow();
    };

    // Function to initialize the ResizeObserver
    initializeObserver = (element) => {
        this.observer = new ResizeObserver(this.onResize);
        this.observer.observe(element);
    };

    // Function to initialize the scroll event listener on a child element
    initializeScrollListener = (scrollDiv) => {
        scrollDiv.addEventListener('scroll', this.onScroll);
    };

    // Updates the shadow's visibility and opacity based on the current state.
    updateShadow = () => {
        //some code
    };

    initialize = (shadowDiv, scrollDiv) => {
        this.shadowDiv = shadowDiv;
        this.scrollDiv = scrollDiv;

        this.initializeObserver(shadowDiv);
        this.initializeScrollListener(scrollDiv);
        this.setupMutationObserver();
    };

    setupMutationObserver() {
        this.mutationObserver = new MutationObserver(mutations => {
            for (const mutation of mutations) {
                if (mutation.type === 'childList') {
                    // Check if the removedNodes contain your component's root elements
                    for (const removedNode of mutation.removedNodes) {
                        if (removedNode === this.shadowDiv || removedNode.contains(this.shadowDiv)) {
                            this.dispose(); // Perform cleanup
                            break; // Exit the loop after cleanup
                        }
                    }
                }
            }
        });

        // Assume _background is the root element of your component
        const observeTarget = this.shadowDiv.parentNode.parentNode; // Observe the parent of the root element
        this.mutationObserver.observe(observeTarget, { childList: true, subtree: true });
    }

    dispose = () => {
        //perform clean up 
    };
}

[OliverDevsCodex]

I found my answer; apparently, it is fine to use IDisposable and the error only appears like in the mentioned thread. :D