React & Modern Frontend (445 Qs)•Part 9: React Hooks Deep Dive (262 - 316)
How is useMemo different from useCallback?
The following table compares both useMemo and useCallback:
| Feature | useMemo | useCallback |
|---|---|---|
| Purpose | Memoizes the result of a computation | Memoizes a function reference |
| Returns | A value (e.g., result of a function) | A function |
| Usage | useMemo(() => computeValue(), [deps]) | useCallback(() => doSomething(), [deps]) |
| Primary Use Case | Avoid expensive recalculations | Prevent unnecessary re-creations of functions |
| Common Scenario | Filtering, sorting, calculating derived data | Passing callbacks to child components |
| When It's Useful | When the value is expensive to compute | When referential equality matters (e.g., props) |
| Recomputed When | Dependencies change | Dependencies change |
| Returned Value Type | Any (number, object, array, etc.) | Always a function |
| Overhead | Slight (evaluates a function and caches result) | Slight (caches a function reference) |
Practical Code Example
jsx
// useMemo vs useCallback:
// useMemo: Caches RETURN VALUE of computation
const filteredList = useMemo(() => items.filter(i => i.active), [items]);
// useCallback: Caches FUNCTION INSTANCE
const handleClick = useCallback(() => console.log('Clicked'), []);