JavaScript and React interview questions, with the answers explained.

Front-end interviews often open with a short JavaScript puzzle, then move to React. Here’s one of each.

Free question 1 (JavaScript): What does this loop print?

What does this code print, and why? How would you make it print 0, 1, 2?

for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 0);
}

Model answer

It prints 3, 3, 3.

Why, in two parts:

1. The event loop. setTimeout doesn’t run the function right away, even with a delay of 0. It schedules it to run after the current code finishes. So the loop runs all the way to the end first, and i becomes 3.
2. Scope. var is scoped to the function, not the loop, so there’s only one i. All three functions close over that same variable, and by the time they run it’s 3.

The fix: use let, which creates a new i for each pass through the loop.

for (let i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 0);
}
// prints 0, 1, 2

Before let existed, people wrapped the body in a function that took i as an argument, so each callback got its own copy. Mention that you know it, but let is the modern answer.

What interviewers listen for: you explain both the timing and the scope, you use the word closure correctly, and you give the let fix.

Free question 2 (React): Why does the count only go up by 1?

This button should add 3 to the count each time it’s clicked, but it only adds 1. Why, and how do you fix it?

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

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

  return <button onClick={addThree}>{count}</button>;
}

Model answer

Why: inside one render, count is a fixed value, a snapshot. If count is 0, all three lines say “set count to 0 + 1”. React also batches updates made in the same event, so it applies them together and the result is 1.

The fix: pass a function to setCount. React calls it with the latest value each time.

function addThree() {
  setCount(c => c + 1);
  setCount(c => c + 1);
  setCount(c => c + 1);
}

Now each update builds on the one before: 0 to 1, 1 to 2, 2 to 3.

Then the general rule: whenever the new state depends on the old state, use the function form. It also avoids bugs with stale values inside timers and effects.

Follow-up you may get: “Why doesn’t console.log(count) right after setCount show the new value?” Because setCount doesn’t change the variable in the current render. It asks React to render again with the new value.

What interviewers listen for: you use the words snapshot and batching, you give the function form, and you state when to use it.