Intermediate30 questions40 minutes

React Intermediate Quiz

State, effects, props and lists — read from real components, including the mistakes that look correct until they run.

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. What renders after the button is clicked once?

function App() {
  const [items, setItems] = useState(['a'])
  const add = () => {
    items.push('b')
    setItems(items)
  }
  return <button onClick={add}>{items.length}</button>
}

It throws an error
2
0
1 — the screen does not update

Show answer

Answer: 1 — the screen does not update. The array is mutated in place, so `setItems` receives the reference React already holds. React compares with Object.is, sees no change and skips the re-render. Always create a new array: `setItems([...items, 'b'])`.

2. This fetches on every single render, hammering the API. Which line is wrong?

1  function User({ id }) {
2    const [user, setUser] = useState(null)
3    useEffect(() => {
4      fetch(`/api/user/${id}`).then(r => r.json()).then(setUser)
5    })
6    return <p>{user?.name}</p>
7  }

Line 5 — the dependency array is missing entirely
Line 4 — fetch must be awaited
Line 2 — the initial state should be an object
Line 6 — optional chaining triggers re-renders

Show answer

Answer: Line 5 — the dependency array is missing entirely. With no second argument the effect runs after every commit, and because it sets state that schedules another render — an infinite loop. Adding `[id]` runs it only when the id changes. Note that omitting the array is quite different from passing `[]`.

3. What renders when items is an empty array?

return <div>{items.length && <List items={items} />}</div>

An empty List
Nothing
A literal 0 on the page
An error

Show answer

Answer: A literal 0 on the page. `&&` returns its left operand when falsy, and JSX renders the number 0 as text — unlike false, null and undefined, which render nothing. Use `items.length > 0 && ...` or a ternary. It is one of the most common visual bugs in React.

Frequently asked questions

How many questions are in this React quiz?+

30 questions, with a 40-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 intermediate quiz aimed at?+

State, effects, props and lists — read from real components, including the mistakes that look correct until they run.

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, 40 minutes. Free, no sign-up.

Start now