useMemo vs useCallback
useMemo memoizes a computed value and returns it.
useCallback memoizes a function reference.
When to use
| Hook | Use when |
|---|---|
useMemo | You want to avoid expensive recalculations |
useCallback | You want to prevent unnecessary re-renders caused by new function references |
Example
tsx
// useMemo - memoizes a value
const sortedList = useMemo(() => {
return items.toSorted((a, b) => a.price - b.price); // sort() would mutate props
}, [items]);
// useCallback - memoizes a function
const handleClick = useCallback(() => {
doSomething(id);
}, [id]);React Compiler
React Compiler (stable since October 2025) memoizes components, values and callbacks automatically at build time. In a project that uses it, manual useMemo / useCallback are rarely needed - mostly as an escape hatch, e.g. for a value used as an effect dependency.
Note: without the compiler, don't overuse these hooks - they have their own overhead. Apply only where a profiler shows a real problem.
updated
did you know it?