Lesson 3 — Interactivity

State: values that change on screen

State is data a component remembers between clicks. useState(0) is a hook (a special React function whose name starts with use) that returns the current value and a function to change it. Calling the setter makes React draw the component again with the new value.

const [score, setScore] = useState(10);
<button onClick={() => setScore(score - 1)}>

In Next.js, interactive components like this are client components (they run in the browser).

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: every like button, form and menu on the web is state plus a click handler.