Checkpoint: State & Events

Five questions on this section. Answer all of them, then see your score and why each answer is right or wrong.

A “+1 later” button runs setTimeout(() => setCount(count + 1), 1000). You click it three times within a second. count was 0. What is it after the timers fire?

3, because three timers ran.
0, because state cannot be set from a timer.
An error about setting state outside an event handler.
1, because every timer computed 0 + 1. Use setCount((c) => c + 1) to get 3.

handleRemove does const i = movies.findIndex((m) => m.id === id); movies.splice(i, 1); setMovies(movies);. The movie does not disappear. Why?

findIndex returns -1 for every movie.
splice changed the existing array in place and the same array was passed back, so React saw no change.
You must call setMovies before changing the array.
Arrays cannot be stored in state.

You click Add, the new movie appears for a moment, then the page reloads and it is gone. What is missing?

A key on the new list item.
useEffect to save the movie.
e.preventDefault() at the start of the form’s submit handler.
type="button" on the Add button.

This timer counts up by 2 every second in development. What is the fix?

JSX

useEffect(() => {
  setInterval(() => setSeconds((s) => s + 1), 1000);
}, []);

Return a cleanup: const id = setInterval(…); return () => clearInterval(id);
Remove StrictMode so the Effect runs once.
Add seconds to the dependency array.
Use setSeconds(seconds + 1) instead of the updater.

SearchBox keeps query in its own state. MovieList, its sibling, must show only movies whose title contains the query. What do you do?

Have SearchBox write the query to localStorage and MovieList read it every render.
Give MovieList its own query state and copy it from SearchBox with an Effect.
Render MovieList inside SearchBox so it can read the state.
Move query to their common parent, pass it to both, and pass a change handler to SearchBox.

5 questions unanswered