state variable, array changes, clock, keys list

1. Foundation: The Real Problem {#foundation}

What is a User Interface?

At the most fundamental level:

• Data (state) that changes over time
• Visual representation of that data on screen

The Core Challenge

When data changes, how do we update the visual representation efficiently?

Naive Approach 1: Destroy and Recreate Everything

let count = 0;

function render() {
  const container = document.getElementById('app');
  container.innerHTML = ''; // Destroy everything
  container.innerHTML = `
    <div>
      <h1>Count: ${count}</h1>
      <button onclick="increment()">+</button>
    </div>
  `; // Recreate from scratch
}

Problems:

• ❌ Wasteful: Destroys and recreates entire DOM tree
• ❌ Loses state: Input values, focus, scroll position
• ❌ Event listeners lost
• ❌ Poor performance: For 1000 elements, recreates all 1000 even if only 1 changed

Naive Approach 2: Manual Surgical Updates

let count = 0;

function render() {
  const countElement = document.querySelector('.count-value');
  countElement.textContent = count; // Update only what changed
}

Problems:

• ❌ Manual tracking: YOU must remember which elements to update