Investigating memory usage for widgets has highlighted potential problems with the existing "own" paradigm that is used to destroy handles on dependant references and instances.

Consider the example below (repository available here) that adds and removes 1,000 widgets that render a div element and a TextNode on a 5 second interval.

class Div extends WidgetBase<any> {
	render() {
		return v('div', { key: this.properties.key }, [ `Div Element number ${this.properties.key}` ]);
	}
}

class App extends WidgetBase {

	private _showRows = true;

	private _renderCount = 1;

	constructor() {
		super();
		setInterval(() => {
			this._showRows = !this._showRows;
			if (this._showRows) {
				this._renderCount++;
			}
			this.invalidate();
		}, 5000);
	}

	protected render() {
		const rows: any[] = [];

		if (this._showRows) {
			for (let i = 0; i < 1000; i++) {
				rows.push(w(Div, { key: i }));
			}
		}

		return v('div', [
			v('h2', [ `Render ${this._renderCount}. Rendered ${this._renderCount * 1000} Div widgets since startup.` ]),
			v('div', rows)
		]);
	}
}

const Projector = ProjectorMixin(App);
const projector = new Projector();

projector.append();

The expectation is that once widgets have been destroyed (called automatically within vdom by the parent widget), these widgets (and attached references including their DOM elements) will be available for garbage collection.

The reality is that the reference to the child widget by parent "owning" actually creates a handle that is never released (even after the widget has been destroyed).

This can be seen using the memory developer tools provided by Chrome, running the example provided take a heap dump after ever render and clear, filter the summary by Div to see all the Div widgets and HTMLDivElements ever created still in the memory footprint.

Heap dump after 50 renders

Shows that all the Div widgets and HTMLDivElements created in the previous renders are still using memory.

The handles on the widgets in the parent

Removing the parents widgets own within vdom removes the handle to the child widgets and allows them to be garbage collected.

Proposal: Initially remove the parents ownership on children widgets to allow them to be garbaged collected. Follow up to investigate other usages of own within the package.

Heap dump after 50 renders after removing ownership

According to the heap dump, there are only 1000 widgets in memory which is expected.