What is memoization in React and when should you use React.memo?
💡 Concept Name
Memoization in React – A performance optimization technique that caches the result of a function call, so it doesn’t need to re-run if the input hasn’t changed.
📘 Quick Intro
In React, memoization avoids re-rendering components unnecessarily. React.memo is a higher-order component that wraps functional components and re-renders them only if their props have changed.
🧠 Analogy / Short Story
Imagine a chef asked to make the same sandwich multiple times. Instead of preparing it from scratch each time, the chef remembers (caches) the last sandwich and only makes a new one if the ingredients change. This memory-saving method is memoization.
React.memo is like the chef’s rulebook: if props (ingredients) haven’t changed, don’t bother making a new UI (sandwich). This saves time and energy (CPU cycles).
🔧 Technical Explanation
- 🧠 Memoization is used to cache the output of expensive computations or renders.
- 🌀
React.memo(Component)wraps a functional component and prevents re-rendering unless props change. - 📈 It’s useful for components that render the same output for the same props.
- 🔍 You can provide a custom comparison function for fine-grained control of re-renders.
- ⚠️ Avoid overusing memoization — it adds overhead and should only be used when performance bottlenecks exist.
💻 Real Code Example
import React, { useState } from 'react';
const Greeting = React.memo(function Greeting({ name }) {
console.log('Greeting rendered');
return <h2>Hello, {name}!</h2>;
});
function ParentComponent() {
const [count, setCount] = useState(0);
return (
<div>
<Greeting name="Alice" />
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
❓ Interview Q&A
Q1: What is memoization in React?
A: It’s a technique to cache the output of components or functions to avoid unnecessary recomputation or re-rendering.
Q2: What does React.memo do?
A: React.memo is a higher-order component that prevents functional components from re-rendering unless their props have changed.
Q3: When should you use React.memo?
A: Use React.memo for components that receive the same props frequently and don’t need to re-render unless those props change.
Q4: What are the benefits of memoization?
A: Memoization can boost performance by reducing redundant calculations and render cycles.
Q5: Does React.memo work with state changes inside the component?
A: No, it only prevents re-renders from parent updates when props remain unchanged.
Q6: Can you use memoization with expensive calculations?
A: Yes, you can use useMemo to memoize expensive calculations in React components.
Q7: What’s the difference between React.memo and useMemo?
A: React.memo prevents component re-renders, while useMemo memoizes values returned by functions inside a component.
Q8: Can React.memo accept a custom comparator?
A: Yes, it accepts a second argument — a function to compare previous and next props for custom equality checks.
Q9: Should every component use React.memo?
A: No, use it selectively for performance-critical components to avoid unnecessary complexity and overhead.
Q10: What is a drawback of excessive memoization?
A: It can lead to more memory usage and complexity without significant performance gain if overused.
📝 MCQs
Q1. What does React.memo do?
- Forces re-render
- Replaces useEffect
- Caches props forever
- Prevents re-render if props haven’t changed
Q2. Which type of component can use React.memo?
- Class components
- Hooks
- Functional components
- Redux reducers
Q3. When is React.memo most useful?
- For every component
- When props always change
- When component renders same output for same props
- In server-side rendering
Q4. What does memoization improve?
- Security
- CSS styling
- Error handling
- Performance
Q5. Which hook is used to memoize values?
- useEffect
- useReducer
- useMemo
- useState
Q6. Does React.memo prevent state updates?
- Yes
- Only in children
- No
- Sometimes
Q7. What kind of props should be compared for memoization?
- Props with functions only
- Randomized values
- Primitive or shallow props
- Props with ref values
Q8. Is React.memo a HOC?
- No
- Only in Redux
- Yes
- Only with useRef
Q9. What is a custom comparator in React.memo?
- Comparator hook
- Function to compare old and new props
- JSX compiler
- Props key generator
Q10. Which scenario is ideal for memoization?
- Frequent prop changes
- Component with useEffect
- Component with event listeners
- Component with expensive rendering and stable props
💡 Bonus Insight
React.memo is a powerful tool, but should be used with performance testing tools like React DevTools Profiler. Also, consider pairing with useMemo and useCallback for deeper optimization in complex UI trees.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!