Introduction to State

Props are strictly read-only. A child component can NEVER modify the props it receives from a parent.

But apps need to change over time (e.g., typing in an input, clicking a counter).

To store data that changes and affects the UI, components use State.

If you just use a normal variable, React won’t know when it changes, and the UI won’t update:

function Counter() {
  let count = 0; // React doesn't track this!
  return <div>{count}</div>;
}

To fix this, we use a React Hook called useState.