State with useState

Part of the React course

Every component you have written so far renders the same output for the same props, every single time. That is fine for a heading or a card, but it falls apart the moment you need something a user can change while looking at the page: a counter that goes up when clicked, a toggle that flips on and off, a text field that shows what you just typed. A plain JavaScript variable will not do the job.

Think of every render of a component as a single photograph, taken at one instant, of what the component looked like given its props and state at that moment. When you call a component's function, JavaScript runs top to bottom exactly once and produces one snapshot: the JSX it returns. Every regular variable declared inside that function is invented fresh for that one snapshot and discarded right after.