At the moment, I am working on a simple application that orchestrates multiple webcomponents. One of these components holds a setInterval function. The function keeps running, even when the component itself is not present in the dom anymore. Can one explain to me why this is the case?
Here is a simple reproduction:
const selectorEl = document.getElementsByTagName('body')[0];
selectorEl.innerHTML = '<my-component></my-component>'; // Append custom component to body
class WebComponent extends HTMLElement {
constructor() {
super();
this.innerHTML = '<span>This should not be visible since I am removed instantly!</span>';
setInterval(() => console.log('I am still running...'), 2000);
}
}
window.customElements.define('my-component', WebComponent);
selectorEl.innerHTML = ''; // Remove element from the dom directly
You need to use lifecycle callbacks to correctly use setInterval and clearInterval.
Example below:
const selectorEl = document.getElementsByTagName("body")[0];
selectorEl.innerHTML = "<my-component></my-component>"; // Append custom component to body
class WebComponent extends HTMLElement {
connectedCallback() {
this.innerHTML =
"<span>This should not be visible since I am removed instantly!</span>";
this.interval = setInterval(
() => console.log("I am still running...", Math.random()),
2000
);
}
disconnectedCallback() {
clearInterval(this.interval);
}
}
window.customElements.define("my-component", WebComponent);
setTimeout(() => selectorEl.innerHTML = "",7000); // Remove element from the dom directlyYou need to use disconnectedCallback hook it will get called once the component will get removed from the dom, so in this function, you can clear your interval.
disconnectedCallback() {
clearInterval(interval)
}
Web Components have their own lifecycle and when an element is deleted from the DOM disconnectedCallback() get's called. is lifecycle hook is called when the element is removed from the DOM. hence, it’s an ideal place to add cleanup logic and to free up resources. in your case, call the clearInterval method which clears a timer set with the setInterval() method like you did.
disconnectedCallback() {
clearInterval(interval)
}