What is memoization in React and when should you use React.memo?
💡 What is Memoization?
In simple terms, memoization is about remembering work that’s already been done. Instead of recalculating something again and again, React can reuse the last result if the inputs haven’t changed. This makes your app feel faster and smoother without you writing extra logic each time.
📘 Quick Intro to React.memo
React provides React.memo as a built-in way to apply memoization to functional components.
It works by wrapping a component and only re-rendering it if its props change.
This can save time when you’re dealing with components that don’t need to update on every parent render.
🧠 A Simple Analogy
Think of a chef in a kitchen. If a customer keeps ordering the same sandwich, the chef doesn’t start from scratch each time. Instead, they remember how they made it before and only prepare it again if the ingredients are different. That’s memoization in real life.
In React, React.memo acts like the chef’s checklist:
“If the ingredients (props) haven’t changed, don’t bother making a new sandwich (UI).”
This cuts down wasted effort.
🔧 How It Works in React
- 🧠 Memoization stores the output of a component or function so React can skip recalculating it.
- 🌀
React.memo(Component)creates a version of your component that only updates when its props change. - 📈 Great for “pure” components that render the same result given the same input.
- 🔍 You can even provide a custom comparison function if React’s default shallow check isn’t enough.
- ⚠️ Use with care — memoization adds overhead, so it’s most helpful for expensive renders, not every component.
💻 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
💡 Extra Tips
Before sprinkling React.memo everywhere, try measuring performance with the React DevTools Profiler.
Combine React.memo with hooks like useMemo and useCallback
for more complex optimization cases, but remember: readability and simplicity often matter more than micro-optimizations.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!