Beginner LevelReact JS & React 19
What is the difference between useMemo and useCallback in React?
❓ Interview Prompt: Compare useMemo (memoizes calculated values) vs useCallback (memoizes function references), performance tuning, and when to use them.
Both hooks memoize values to optimize performance, but they cache different things:
•
'useMemo(() => computeValue(a, b), [a, b])': Caches the result value of an expensive calculation. Only re-computes when dependencies change.
•
'useCallback(fn, deps)': Caches the function reference itself. Equivalent to 'useMemo(() => fn, deps)'!
Why 'useCallback' Matters:
Passing inline functions to memoized child components ('React.memo') breaks memoization because function instances differ on every render. 'useCallback' preserves stable function references.
Code Implementation Example
jsx
function ParentComponent({ items }) {
const [count, setCount] = useState(0);
// 1. useMemo caches expensive calculation result
const sortedItems = useMemo(() => {
return [...items].sort((a, b) => a.value - b.value);
}, [items]);
// 2. useCallback caches stable function reference for child
const handleItemClick = useCallback((id) => {
console.log('Item clicked:', id);
}, []); // Stable reference across renders
return <ChildList items={sortedItems} onItemClick={handleItemClick} />;
}💡Memoizing calculated values with useMemo and function references with useCallback.
🎯 Interview Key Takeaway
Use useMemo to cache expensive computation results and useCallback to preserve stable callback function references.
#useMemo#useCallback#Performance#Memoization#Beginner
Back to all React JS & React 19 Questions→