BaseComponent: Debounce rapid consecutive render() calls

[thedhanawada]

Problem

The BaseComponent.render() method performs full innerHTML replacement every time it's called. Rapid consecutive renders (e.g., from rapid state changes) cause layout thrashing and performance degradation.

Affected Code

src/core/BaseComponent.js:132-162

render() {
  // Full innerHTML replacement on every call
  this.shadow.innerHTML = this._buildTemplate();
}

Issue

While ForceCalendar mitigates this with targeted DOM updates in handleStateChange(), BaseComponent itself has no protection. If a subclass calls render() rapidly (e.g., in a tight loop or from multiple event handlers), layout will thrash.

Example problem:

// Bad: triggers 3 renders
setState({ field1: value });
setState({ field2: value });
setState({ field3: value });

Solution

Debounce the render call using the existing DOMUtils.debounce() utility (already available at src/utils/DOMUtils.js:171):

constructor() {
  super();
  this._debouncedRender = DOMUtils.debounce(() => this._performRender(), 16);
}

render() {
  this._debouncedRender();
}

_performRender() {
  this.shadow.innerHTML = this._buildTemplate();
}

This ensures renders are batched within a 16ms frame (60fps).