React.memo — When Should You Actually Use It?
The Interview Question
What is React.memo and when should you use it? When should you avoid it?
Expert Answer
React.memo is a higher-order component that tells React to skip re-rendering a component if its props haven't changed. It does a shallow comparison of props by default, and you can pass a custom comparison function as the second argument. The critical question isn't 'should I memo everything?' — it's 'is this component expensive to render, and does it re-render with the same props frequently?' If a component renders a simple div with text, wrapping it in React.memo adds overhead for zero benefit. If a component renders a chart with 10,000 data points, memo can prevent expensive re-renders. The gotcha: memo only works if props actually stay the same between renders. If you're passing inline objects or functions as props, they create new references every render, defeating the purpose of memo entirely.
Key Points to Hit in Your Answer
- Shallow comparison by default — only compares top-level prop references
- Inline objects/functions create new references every render, breaking memo
- Pair with useCallback for function props and useMemo for object props
- Don't memo everything — it adds memory overhead and comparison cost
- Good candidates: components that render often with the same props, expensive render logic, components in long lists
Code Example
// Without memo — re-renders every time parent renders
const Chart = ({ data, onHover }) => {
// Expensive render with thousands of SVG elements
return <svg>...</svg>;
};
// With memo — skips re-render if props unchanged
const Chart = React.memo(({ data, onHover }) => {
return <svg>...</svg>;
});
// But this defeats memo (new function every render):
<Chart data={data} onHover={() => setHovered(true)} />
// Fix with useCallback:
const handleHover = useCallback(() => setHovered(true), []);
<Chart data={data} onHover={handleHover} />What Interviewers Are Really Looking For
They want to hear the nuance — that memo has a cost and isn't a default optimization. The strongest answers include the 'inline function' pitfall and explain how memo, useCallback, and useMemo work together as a system.
Practice This Question with AI Grading
Reading about interview questions is a start — but practicing with real-time AI feedback is how you actually get better. Goliath Prep grades your answers instantly and tells you exactly what you're missing.
Start Practicing Free →