Popular posts

I work with WebComponents and currently the lifecycle methods are competing with class setters.

So it causes very unusual behaviour in child components by not-needed detach/re-attach of components.

I solved it with setTimeout and it works nicely without any side effect.

Following is the example component class:

export class MyComponent extends HTMLElement {
  connectedCallback() {
    super.connectedCallback();
    this.render();
  }

  set data(value = {}) {
    this._data = value;
    this.render();
  }

  render() {
    render(template(this._data), this);
  }
}

Fixed the render method with following changes to render method:

render() {
  clearTimeout(this.timeout);
  this.timeout = setTimeout(() => { 
    render(template(this._data), this);
  }, 100);
}

As this timeout of 100ms is unnoticed for used but for renders, it is a huge relaxation from frequent detach/re-attach.