Beginner LevelReact JS & React 19
Why must React render functions be pure and idempotent?
❓ Interview Prompt: Explain pure functions, side effects during render, idempotency, strict mode, and Concurrent Mode compatibility.
In React, a component's render function MUST be a pure function:
Rules of Pure Components:
1
Mind Its Own Business: Does not mutate any objects or variables that existed before rendering.
2
Same Inputs, Same Output: Given the same props and state, it MUST always return the exact same JSX.
Why Purity Matters:
React's Concurrent Features (Concurrent Mode, Server Components) render components speculatively, interrupt renders, or render twice in StrictMode. Impure renders (mutating global variables during render) cause unpredictable UI bugs!
Code Implementation Example
jsx
// ❌ IMPURE: Mutates global variable during render pass!
let guestCount = 0;
function ImpureCup() {
guestCount = guestCount + 1; // Side effect!
return <h2>Cup #{guestCount}</h2>;
}
// ✅ PURE: Pass values cleanly via props
function PureCup({ guestNumber }) {
return <h2>Cup #{guestNumber}</h2>;
}💡Comparing impure render functions vs pure component rendering.
🎯 Interview Key Takeaway
React render functions must be pure and free of side effects to support concurrent rendering features safely.
#Pure Functions#Purity#Render Pass#Beginner
Back to all React JS & React 19 Questions→