Arrival
\n \nRating: {rating}/5
\n \n \nClick a “Mark as watched” button in a plain function component and nothing happens. Here’s the code most people write first:
\nexport default function MovieItem() {\n let watched = false;\n\n function handleClick() {\n watched = !watched;\n }\n\n return (\n <button onClick={handleClick}>\n {watched ? 'Watched' : 'Mark as watched'}\n </button>\n );\n}Two things go wrong. Changing a local variable doesn’t tell React anything happened, so it never renders again. And even if something else caused a render, let watched = false would run again and reset the value, because a component is a function and its local variables start fresh on every call. A component needs two things: memory that survives between renders, and a way to ask React to render again. That’s state.
useStateimport { useState } from 'react';\n\nexport default function MovieItem({ title }) {\n const [watched, setWatched] = useState(false);\n\n return (\n <li>\n {title}\n <button aria-pressed={watched} onClick={() => setWatched(!watched)}>\n {watched ? 'Watched' : 'Mark as watched'}\n </button>\n </li>\n );\n}useState(false) declares one piece of state with an initial value of false. It returns a pair, which you destructure and name: the current value, and a setter function. The [thing, setThing] naming is a convention everyone follows; stick to it.
When you call setWatched(true), React stores the new value and schedules a re-render. It calls MovieItem again, and this time useState returns true. Your JSX is calculated from that, and React updates the DOM to match.
State belongs to a component instance, not to the function. Render <MovieItem /> three times and you get three independent watched values. Clicking one doesn’t affect the others.
This is the idea that makes state click. When React calls your component, it hands you the state for that render. Everything in that render, the JSX, the event handlers, all of it, sees those values. Setting state doesn’t change the variable you already have; it requests a new render with a new value.
\nThat’s why this surprises people:
\nconst [count, setCount] = useState(0);\n\nfunction addThree() {\n setCount(count + 1); // count is 0 → asks for 1\n setCount(count + 1); // count is still 0 → asks for 1\n setCount(count + 1); // still 0 → 1\n}All three calls read the same snapshot, so the result is 1, not 3. When the next value depends on the previous one, pass an updater function instead of a value:
\nfunction addThree() {\n setCount((c) => c + 1); // 0 → 1\n setCount((c) => c + 1); // 1 → 2\n setCount((c) => c + 1); // 2 → 3\n}React queues the updaters and runs them in order, each receiving the result of the one before. You don’t need updaters everywhere; setWatched(!watched) in a click handler is fine. Use them when you set the same state more than once in a handler, or in code that runs later, such as a timer.
The Watchlist keeps an array of movie objects in state. React decides whether state changed by comparing the old and new value with Object.is. If you change an array in place and pass the same array back, React sees the same reference and may skip the render entirely.
So treat state as read-only and build new values:
\nconst [movies, setMovies] = useState(INITIAL_MOVIES);\n\n// Add: a new array with everything plus one more\nsetMovies([...movies, { id: crypto.randomUUID(), title: 'Dune', watched: false }]);\n\n// Remove: a new array without one item\nsetMovies(movies.filter((m) => m.id !== id));\n\n// Update one: a new array, with a new object for the changed item\nsetMovies(movies.map((m) => (m.id === id ? { ...m, watched: !m.watched } : m)));These three lines (spread to add, filter to remove, map with a spread to update) cover most of the state updates you’ll ever write for lists. Objects work the same way: setFilters({ ...filters, year: 2024 }).
The argument to useState is only used on the first render. Later renders ignore it. If computing the initial value is expensive, such as reading and parsing saved data, pass a function instead, useState(() => loadMovies()), and React calls it only on the first render instead of on every render. You’ll use exactly that to load the Watchlist from localStorage in Section 4.
Now your components can remember things. Next, you’ll look closely at the events that change state: click, keyboard and the event object itself.
\n","toc":[{"id":"sec-1","text":"useState","level":2},{"id":"sec-2","text":"Every render is a snapshot","level":2},{"id":"sec-3","text":"Arrays and objects: replace, don’t mutate","level":2},{"id":"sec-4","text":"Choosing the initial value","level":2}],"takeaways":["useState returns the current value and a setter; calling the setter schedules a re-render with the new value.","Each render sees a fixed snapshot of state, so reading state right after setting it still gives the old value.","Use an updater function, setCount((c) => c + 1), when the next value depends on the previous one.","Never mutate state; create new arrays and objects with spread, map and filter so React notices the change.","Call Hooks at the top level of a component, never inside conditions, loops or nested functions."],"further":[{"title":"State: A Component's Memory","url":"https://react.dev/learn/state-a-components-memory"},{"title":"State as a Snapshot","url":"https://react.dev/learn/state-as-a-snapshot"},{"title":"Updating Arrays in State","url":"https://react.dev/learn/updating-arrays-in-state"},{"title":"useState reference","url":"https://react.dev/reference/react/useState"}],"quiz":[{"q":"count starts at 0. What does the button show after one click?
function handleClick() {\n setCount(count + 1);\n setCount(count + 1);\n setCount(count + 1);\n}count from the same render, where it’s 0. All three calls ask for 0 + 1."},{"text":"0","why":"The state does change. It just changes to 1, not 3."},{"text":"An error, because you can only call a setter once per handler.","why":"You can call setters as often as you like. React batches them and re-renders once."},{"text":"1","why":"Correct. count is a snapshot of 0 for the whole handler, so all three calls set 1. Use setCount((c) => c + 1) to stack updates."}],"answer":3},{"q":"Why doesn’t this toggle work? let watched = false; inside the component, and the button’s handler does watched = !watched;.
! in React.","why":"The ! operator works fine. The problem is where the value lives and what triggers a render."},{"text":"The handler needs to return the new value.","why":"Event handlers’ return values are ignored. Something has to tell React to render again."},{"text":"Changing a local variable doesn’t trigger a re-render, and the next render would reset it to false anyway.","why":"Correct. Local variables don’t persist between renders and React doesn’t watch them. useState solves both problems."},{"text":"let should be var.","why":"The keyword doesn’t matter. Any local variable is recreated on every render."}],"answer":2},{"q":"Which correctly marks one movie as watched in movies state?
setMovies(movies.map((m) => (m.id === id ? { ...m, watched: true } : m)));","why":"Correct. map builds a new array, and the changed movie is a new object. Unchanged movies are reused."},{"text":"movies.find((m) => m.id === id).watched = true; setMovies(movies);","why":"This mutates the existing object and passes the same array back. React compares with Object.is, sees no change and may skip the render."},{"text":"setMovies(movies.push({ id, watched: true }));","why":"push mutates the array and returns the new length, so state becomes a number."},{"text":"movies[0].watched = true;","why":"Mutating state never tells React anything changed, and it edits the wrong movie unless it happens to be first."}],"answer":0},{"q":"Inside a click handler you call setTitle('Dune') and then console.log(title) on the next line. The old title was ‘Arrival’. What’s logged?
title will be ‘Dune’."},{"text":"‘Arrival’","why":"Correct. title is a constant in this render’s snapshot. The new value appears in the next render."},{"text":"undefined","why":"The variable still holds this render’s value, which is ‘Arrival’."}],"answer":1}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"import { useState } from 'react';\n\nexport default function App() {\n let watched = false;\n const [rating, setRating] = useState(0);\n\n function toggleWatched() {\n watched = !watched;\n }\n\n function addOne() {\n setRating(rating + 1);\n }\n\n function addTwo() {\n setRating(rating + 1);\n setRating(rating + 1);\n }\n\n return (\n Rating: {rating}/5
\n \n \nRating: {rating}/5
\n \n \nThis movie card has two broken features.
\n#toggle) does nothing. Make it toggle between Mark as watched and Watched, with aria-pressed following along.#plus-two) only adds 1, and the rating can climb past 5. Make +2 add two, and never let the rating go above 5, whichever button is clicked.let variable is reset on every render and never triggers one. Store watched with useState(false).","Both calls in addTwo read the same rating snapshot. Use an updater: setRating((r) => …).","Clamp inside the updater: setRating((r) => Math.min(r + 1, 5)). Then addTwo can call addOne() twice."],"explanation":"watched has to be state: a local variable neither survives the next render nor causes one. For the rating, each handler sees a snapshot, so setRating(rating + 1) twice asks for the same value twice. An updater function receives the latest queued value instead, and putting Math.min(…, 5) inside it applies the limit to every update, including both halves of +2.