React useMemo vs useCallback vs React.memo — When to Use Each

The most common React performance mistake is memoizing everything. Here is when each tool actually matters.

React.memo — Prevent Component Re-renders

Wraps a component to skip re-rendering when props have not changed. Uses shallow comparison by default.

const ExpensiveList = React.memo(({ items }: { items: Item[] }) => {
  return items.map(item => <ListItem key={item.id} item={item} />);
});

Use when: A parent re-renders frequently but the child props rarely change. Do not use when: Props change on every render anyway — memo adds overhead for zero benefit.

useMemo — Cache Expensive Calculations

Memoizes the return value of a function. Only recalculates when dependencies change.

const sortedItems = useMemo(() => {
  return items.sort((a, b) => a.price - b.price);
}, [items]);

Use when: You have an expensive computation (sorting, filtering, complex math) that runs on every render. Do not use when: The calculation is trivial — adding useMemo overhead for a simple operation is worse.

useCallback — Stabilize Function References

Memoizes the function itself (not its return value). Returns the same function reference between renders.

const handleDelete = useCallback((id: string) => {
  setItems(prev => prev.filter(item => item.id !== id));
}, []);

Use when: Passing callbacks to memoized child components (React.memo) — without useCallback, a new function reference breaks memo. Do not use when: The receiving component is not memoized — useCallback alone does nothing.

The Golden Rule

useMemo + useCallback only help when paired with React.memo or used in dependency arrays. Profile first, memoize second.

Learn more optimization in our web development services.