Advanced30 questions45 minutes

React Advanced Quiz

Stale closures, render behaviour, reconciliation and effect timing — read from real component code rather than definitions.

Start the quiz

Sample questions from this quiz

A preview of the style and depth. Try each one, then reveal the answer — or skip straight to the timed quiz.

1. This counter always displays 1 no matter how long it runs. Which line is the cause?

1  function Timer() {
2    const [count, setCount] = useState(0)
3    useEffect(() => {
4      const id = setInterval(() => setCount(count + 1), 1000)
5      return () => clearInterval(id)
6    }, [])
7    return <p>{count}</p>
8  }

Line 6 — the dependency array should contain setCount
Line 4 — the interval closes over the initial count, which never updates
Line 5 — clearInterval runs too early
Line 2 — useState should be useRef

Show answer

Answer: Line 4 — the interval closes over the initial count, which never updates. With an empty dependency array the effect runs once, and the interval callback captures `count` as 0 forever — so it sets 0 + 1 on every tick. The fix is the updater form, `setCount(c => c + 1)`, which reads the latest value instead of the captured one. This is the classic stale closure.

2. The button is clicked once. What is logged?

function App() {
  const [n, setN] = useState(0)
  const onClick = () => {
    setN(n + 1)
    setN(n + 1)
    console.log(n)
  }
  return <button onClick={onClick}>{n}</button>
}

0 is logged, and n becomes 2
0 is logged, and n becomes 1
1 is logged, and n becomes 2
2 is logged, and n becomes 2

Show answer

Answer: 0 is logged, and n becomes 1. State variables are constants within a render, so `n` is 0 throughout the handler and both calls set it to 1. The log also sees 0 — setting state does not change the current render's variable. Using `setN(x => x + 1)` twice would produce 2.

3. In React 18, how many times does this component re-render when the button is clicked once?

function App() {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)
  console.log('render')
  return <button onClick={() => { setA(1); setB(1) }}>go</button>
}

Twice — one per setState
Once — the updates are batched
Three times
It depends on the component depth

Show answer

Answer: Once — the updates are batched. React batches state updates that happen in the same event, so both are applied in one re-render. React 18 extended this automatic batching to promises, timeouts and native handlers too — in React 17 an update inside a `setTimeout` would have rendered twice.

Frequently asked questions

How many questions are in this React quiz?+

30 questions, with a 45-minute time limit. Every question includes a written explanation of the correct answer.

Is this React quiz free?+

Yes. Every quiz on CodexQuizz is free and needs no account. You only enter a name if you choose to post your score to the leaderboard.

What level is the advanced quiz aimed at?+

Stale closures, render behaviour, reconciliation and effect timing — read from real component code rather than definitions.

Can I use this to prepare for a React interview?+

Yes. The questions cover the topics that come up in React technical screens, and the explanations are written so that a wrong answer still teaches you the underlying concept.

Ready to test your React?

30 questions, 45 minutes. Free, no sign-up.

Start now