React · Middle · Question 61 of 75

Why is this component impure?

let guestCount = 0;
function Guest() {
  guestCount++;
  return <p>Guest #{guestCount}</p>;
}

✓Correct answer: It mutates a variable outside itself during render, so results depend on how many times React renders it
2It uses a template inside JSX
3Components can't read module variables

Explanation

Strict Mode renders twice in development and reveals such bugs. Pass the number as a prop or compute it from data instead.

Further reading

Test yourself

Take the React · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.