React re-renders are usually cheap until they are not. Interviewers want measured answers — profile first, then apply memo, useMemo, and useCallback deliberately.
Common Interview Questions
Q: What does React.memo do?
Answer: Shallow-compares props and skips re-render if unchanged. Helps when parent re-renders often but child props are stable.
const Row = React.memo(function Row({ item }) {
return <tr><td>{item.name}</td></tr>;
});
Q: useCallback vs useMemo?
Answer: useCallback(fn, deps) memoizes a function reference. useMemo(() => value, deps) memoizes a computed value. useCallback is useMemo for functions.
Q: When is memoization wasted?
Answer: Cheap child components, props that change every render anyway, or before identifying real bottlenecks. Memoization has its own cost.
Q: How do you answer 'optimize this list'?
Answer: Mention virtualization (react-window), stable keys, memoized row components, avoiding inline object/function props, and moving state down to limit re-render scope.
Key Points for Interviews
-
Profile with React DevTools Profiler first
-
React.memo needs stable prop references
-
useCallback helps child memo and effect deps
-
Do not memo everything by default
-
List virtualization beats memo for 10k+ rows