React · Level 3

State & Events

State is where React apps come alive — and where the first real bugs live. This deck drills useState until its two big rules are reflex: never mutate state directly, and never trust a stale closure. You will predict what a counter shows after a double setCount, spot why onClick={handle()} fires too early, and practise the immutable update patterns for objects and arrays that keep renders honest. These cards are the difference between using React and fighting it.

Practice this set for free — no account needed. Loads 14 flashcards into the learner.

Practice in the free learner

How to study this set

The snippet cards here are deliberately trap-shaped — most show code that looks right and asks what actually happens. Commit to a concrete answer ("the button shows 1, not 2") before flipping. If you get one wrong, do not just re-read the answer: write the fixed version from memory once, then let the schedule re-test you.

All 14 flashcards

What does useState return?

A two-element array: the current state value and a setter function — conventionally destructured as const [value, setValue] = useState(initial).

What does the button show after one click?
jsx
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

1 — the click sets state to 0 + 1, which triggers a re-render with the new value.

Why does directly mutating state — like count++ — not update the UI?

React only re-renders when a setter is called. Mutation changes the variable in place without telling React anything, so the screen keeps the old value.

What does the button show after ONE click?
jsx
const [count, setCount] = useState(0);
const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
};

1, not 2 — both calls read the same stale count (0) from the closure. Use the updater form setCount(c => c + 1) to get 2.

When should you use the updater form setCount(c => c + 1)?

Whenever the next state depends on the previous state — the updater receives the latest value, immune to stale closures and batching.

What is the bug here?
jsx
<button onClick={handleReset()}>Reset</button>

handleReset() is CALLED during render instead of passed as a handler. Pass the function itself: onClick={handleReset}.

What is a controlled input?

An input whose value is driven by React state — the state is the single source of truth:

jsx
<input value={text} onChange={(e) => setText(e.target.value)} />
How do you update one field of an object in state?
jsx
const [user, setUser] = useState({ name: 'Ada', role: 'admin' });

Create a new object and spread the old one:

jsx
setUser({ ...user, name: 'Grace' });

Mutating user.name directly would skip the re-render.

How do you add and remove items from an array in state — without push or splice?

Produce new arrays: add with spread setItems([...items, next]), remove with setItems(items.filter((i) => i.id !== id)).

What logs after the click — and why?
jsx
const [count, setCount] = useState(0);
const handleClick = () => {
  setCount(count + 1);
  console.log(count);
};

0 — setting state does not change the variable in the running function; the new value only exists in the NEXT render.

Two setState calls in one click handler — how many re-renders?

One — React batches state updates inside handlers (and, since React 18, almost everywhere) and re-renders once with the final state.

Two sibling components need to share the same state. Where does it go?

Lift it up: move the state to their closest common parent and pass it down as props (plus callbacks for updates).

Where does a component's state actually live between renders?

Inside React itself — keyed to the component's position in the tree and the hook call order, which is why hooks must not run conditionally.

What is the difference between e.target.value and state in a controlled input's onChange?

e.target.value is what the DOM input currently holds; state is what React last rendered. The handler copies the DOM value into state so the two stay in sync.

What to learn next

When stale closures and updater functions feel obvious, move to level 4, "Hooks & Effects" — side effects, dependency arrays, cleanup functions and the rest of the hooks toolbox real apps are made of.

Continue to Level 4: Hooks & Effects →