useMemo and useCallback: when are they actually worth it?

Question

A teammate wraps every function in `useCallback` and every computed value in `useMemo`. Is that a good practice or premature optimization?

Accepted Answer

Mostly premature. Memoization has its own cost (memory, comparing dependencies, noisier code). Use it when there's a concrete reason:

1. **Expensive computation**: e.g. filtering or sorting thousands of rows each render. Use `useMemo`.
2. **Referential stability matters**: the value or function is passed to a `React.memo` child, or used in another hook's dependency array.

```jsx
const visible = useMemo(() => rows.filter(matches(query)), [rows, query]);
```

If neither applies, skip it. With the **React Compiler** (stable in React 19+ setups), components are memoized automatically, and manual `useMemo`/`useCallback` become mostly unnecessary.

2 réponses