React question detail
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) |