Explain React useCallback vs useMemo

Question

What are the differences between useCallback and useMemo hooks in React? When would you use one over the other? Provide examples.

ReactDev · Accepted Answer

## useCallback
Returns a **memoized function**. Use when passing callbacks to child components.

```tsx
const handleClick = useCallback(() => {
  console.log('Clicked!', count);
}, [count]); // Only recreates when count changes
```

## useMemo
Returns a **memoized value**. Use for expensive computations.

```tsx
const expensiveResult = useMemo(() => {
  return items.filter(i => i.active).map(i => i.value * 2);
}, [items]); // Only recalculates when items change
```

## Key Difference
- `useCallback(fn, deps)` = memoizes the function itself
- `useMemo(() => fn, deps)` = memoizes the return value

## Pro Tip
`useCallback(fn, deps)` is equivalent to `useMemo(() => fn, deps)`

PerformanceGuru · Answer

**Don't overuse these hooks!** They have overhead.

Only use when:
1. Passing callbacks to `React.memo` components
2. The callback/value is in another hook's dependency array
3. Computing something genuinely expensive

```tsx
// DON'T do this - unnecessary overhead
const value = useMemo(() => a + b, [a, b]);

// DO this - simple calculation is fine
const value = a + b;
```

Profile first, optimize second!

Explain React useCallback vs useMemo

2 Answers

useCallback

useMemo

Key Difference

Pro Tip

Share Your Answer

Related Questions

What is the virtual DOM and how does it work?

Implement React infinite scroll

What are React hooks rules and why do they exist?

More from Meta

What are closures in JavaScript?

Implement React infinite scroll

What is memoization and when should you use it?

Implement Promise.all from scratch