Core Hooks — Series 2

Preview — 3 of 10 questions

After one click, what does count become, and why?

javascript

function Counter() {
  const [count, setCount] = useState(0);

  function handleTripleClick() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  return <button onClick={handleTripleClick}>Count: {count}</button>;
}

Acount only increases by 1, not 3 — all three setCount(count + 1) calls read the same count value from this render's closure (the state at the time the click started), so each one computes the same "current + 1" — using setCount(c => c + 1) instead would correctly increase it by 3, since each updater receives the latest pending value

Bcount increases by 3, since each setCount call immediately updates count before the next line runs

CThis throws an error — calling setCount more than once in the same function is not allowed

Dcount increases by 2, because the first call is ignored due to batching

There's no dependency array argument at all (not even []). When does this effect run?

javascript

function Logger({ value }) {
  useEffect(() => {
    console.log('Logging:', value);
  });

  return <p>{value}</p>;
}

AOnly once, on mount — omitting the array is treated the same as passing []

BNever — an effect with no dependency array is invalid and silently does nothing

CAfter every single render of this component, regardless of whether value (or anything else) actually changed

DOnly when value specifically changes — React infers the dependency automatically from what's used inside the effect

If WelcomeMessage re-renders 5 times (e.g., because its parent re-renders), how many times does "Component mounted!" get logged in total?

javascript

function WelcomeMessage() {
  useEffect(() => {
    console.log('Component mounted!');
  }, []);

  return <p>Welcome!</p>;
}

A5 times — once per render, same as omitting the array entirely

BExactly once — an empty dependency array [] means "no dependencies to watch," so the effect only runs after the very first render (mount) and never again for subsequent re-renders

C0 times — an empty array actually disables the effect from ever running

DIt depends on how many props WelcomeMessage receives

Answer all 10 questions (7 more), see explanations for every answer, and track your score.