1. The Fundamental Problem

Question: How do you make a webpage interactive?

Answer: When data changes, the UI must change.

Example:

• User clicks a button → Counter should increase
• User types in input → Text should appear on screen
• User toggles a switch → Theme should change

2. Why Normal Variables Don't Work

function Counter() {
  let count = 0;  // Normal variable

  return (
    <button onClick={() => {
      count = count + 1;
      console.log(count);  // Logs: 1, 2, 3...
    }}>
      Count: {count}  {/* Always shows 0 on screen! */}
    </button>
  );
}

What happens:

1. Click button → count becomes 1 in memory
2. Console shows 1 ✅
3. But UI still shows 0 ❌

Why?

• React doesn't know the variable changed
• Component function ran once, returned JSX, done
• To update UI, the component must run again (re-render)
• Normal variables can't trigger re-renders