Intermediate LevelReact JS & React 19
How does React verify component purity using double execution in development?
❓ Interview Prompt: Explain StrictMode idempotency testing, double function execution, detecting render mutations, and fixing side-effects.
In '<StrictMode>', React deliberately invokes render functions, 'useState' initializers, and updater callbacks twice in development mode:
Why Double Execution?
If a component is pure, executing its render function twice produces the exact same JSX without mutating external variables.
•
If a render function is impure (e.g. 'array.push()' on a global array), running it twice causes duplicated state or unexpected mutations, alerting developers to fix side effects before shipping to production!
Code Implementation Example
jsx
// Impure function highlighted by StrictMode double render:
const globalList = [];
function ItemList() {
// ❌ StrictMode double execution pushes 2 items per single render!
globalList.push('Item');
return <div>List count: {globalList.length}</div>;
}💡Impure render side-effects exposed by StrictMode double execution.
🎯 Interview Key Takeaway
StrictMode double renders expose impure component render side-effects early in development.
#StrictMode#Purity#Idempotency#Intermediate
Back to all React JS & React 19 Questions→