search

socketsupply / tonic

A Low Profile Component Framework – Stable, minimal, easy to audit, zero-dependencies and build-tool-free.
http://tonicframework.dev
MIT License
867 stars 24 forks source link

Do not cloneNode() in constructor. #40

Closed Raynos closed 4 years ago

Raynos commented 4 years ago

Doing so can lead to many unnecessary renders. Especially with components like tonic-split and tonic-tabs where they use ${this.elements} or they detect for left & right.

This is because render() get's called multiple times, especially if the render is async since the cloneNode() will not have copied the children that are asynchronously rendered.

By having render called more times then expected, the component will async render(); aka fetch and render multiple times (2 or 4) and that leads to lots of unnecessary delays in interactivity.

Raynos commented 4 years ago

I test this in components & logs and it seems fine.

It fixes the issue in logs for the AccountMenu component fetching settings / profiles multiple times.