Keeping Components Pure in React
From the React Components & JSX cheat sheet · Component Essentials · verified Jul 2026
Keeping Components Pure
Components must be pure functions of their props and state
jsx
// ❌ IMPURE — mutates external state
let count = 0;
function Counter() {
count++; // side effect during render
return <div>{count}</div>;
}
// ✅ PURE — same input, same output
function Counter({ count }) {
return <div>{count}</div>;
}💡 Pure components are predictable, easier to test, and enable React optimizations
⚡ React assumes components are pure — breaking this rule causes subtle bugs
📌 Side effects belong in event handlers or useEffect, never in render
🟢 StrictMode double-renders in dev to catch impure components early
purerenderside-effects