Chapter quiz · Events & State

Test what you learned.

8 questions on Events & State. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

Events & State — Chapter Quiz

Eight questions on event handlers, useState, lifting, and updates.

0/ 9

Question 1
1
What is the final value of count after this click handler runs (starting count = 0)?
```
function handleClick() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}
```
A0B1C3Dundefined
All three setters read the SAME snapshot (count = 0). They each schedule "set to 1". Final = 1. Use the updater form prev => prev + 1 to stack.
Question 2
2
Why doesn't count change immediately after setCount(count + 1)?
ASetters are asyncBcount is a const captured in this renderCReact only updates state at the end of the eventDAll of the above (in a way)
All three are true. The render captures count; the update queues a new render; React batches multiple updates per event.
Question 3
3
Calling items.push(x); setItems(items); triggers a re-render.
TTrueFFalse
The reference is the same — React sees no change. Use setItems([...items, x]) to provide a new array.
Question 4
4
A Slider and a Readout should both see the same value. What's the right pattern?
AMake Readout import state from SliderBUse a global variableCLift the state into their common parentDUse useEffect to copy state between them
Move the state up. Pass value to both, and a setter to whichever needs to change it.
Question 5
5
For a controlled <input>, what TWO props do you wire?
Avalue and onChangeBdefaultValue and onChangeCvalue and onInputDvalue and setValue
value={state} makes React the source of truth. onChange pushes every keystroke back into state.
Question 6
6
What does this render when count is 0?
```
<p>{count && <Badge>{count}</Badge>}</p>
```
ANothingBThe Badge with 0CThe literal 0DTypeError
&& returns the first falsy operand — 0. React renders 0 as text. Compare explicitly: count > 0 && <Badge>...</Badge>.
Question 7
7
Which is the right way to add an item to an array in state?
Aitems.push(x); setItems(items);BsetItems([...items, x]);Citems[items.length] = x; setItems(items);DsetItems(items.push(x));
Always create a new array. [...items, x] does that; push/index assignment mutate in place.
Question 8
8
When the next state depends on the previous, use the updater form setCount(_______ => _______ + 1).
The function receives the latest queued state, so multiple updates in one event stack correctly.