Components need memory

A normal variable inside a component is created fresh on every render, and changing it doesn't tell React to render again.

State is data a component remembers between renders. When state changes, React re-renders the component with the new value.

const Counter = () => {
  let count = 0; // reset on every render
  return <button onClick={() => count++}>{count}</button>;
};