Why must React components be pure during render?
Quick answer
Render must produce the same output for the same props/state and cause no side effects, because React may call it multiple times or discard the result.
In detail
React's render phase can run more than once, be paused, or thrown away (especially with concurrent features and StrictMode's double-invoke in dev). If you mutate variables, fetch, or touch the DOM during render, that work can run unexpectedly or twice. Side effects belong in event handlers or useEffect; render should only compute and return JSX.
// ❌ side effect during render
function Bad() { items.push(1); return <p>{items.length}</p>; }
// ✅ pure render; effects go in useEffect / handlers
function Good({ items }) { return <p>{items.length}</p>; }Why interviewers ask this: Distinguishes people who understand React's execution model.
Common follow-up questions
- →Why does StrictMode render components twice?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399