useMemo ve useCallback ne zaman kullanmalısınız ve hangi problemi çözerler?

Question

IT Interview Practice · Accepted Answer

Her ikisi de her renderda yeniden hesaplanmaması/oluşturulmaması için render'lar arasında bir şey önbelleğe alır:
- **`useMemo`** **hesaplanan bir değeri** önbelleğe alır.
- **`useCallback`** **fonksiyonun kimliğini** önbelleğe alır (bu `useMemo(() => fn, deps)` ile aynıdır).

Bunlar (a) pahalı işi tekrar yapmaktan ve (b) memoize edilmiş children'ın bağlı olduğu referansiyel eşitliği kırmaktan kaçınmak için vardır.

```jsx
function Table({ rows, onSelect }) {
  // (a) expensive computation — recompute only when `rows` changes
  const sorted = useMemo(() => rows.slice().sort(byName), [rows]);

// (b) stable function identity — so a React.memo child doesn't re-render,
  //     and effects depending on it don't re-fire
  const handleSelect = useCallback(id => onSelect(id), [onSelect]);

return <Grid rows={sorted} onSelect={handleSelect} />;
}
```

## Neden önemli

`useCallback` olmadan `handleSelect` her renderda tamamen yeni bir fonksiyondur. Bir `React.memo(Grid)` "yeni" bir prop görür ve yine de yeniden render olur, memoization'ı bozar. Aynısı memoize edilmiş bir child'a geçirilen veya `useEffect` dependency array'inde kullanılan bir nesne için de geçerlidir.

## Trade-offs — aşırı kullanmayın

```jsx
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
```

- Memoization bedavaya değildir: hafıza maliyeti artı **her** renderdaki dependency karşılaştırması.
- Yanlış/eksik dependency array size **eski değerler** verir — en yaygın bug.
- Yalnızca gerçek bir problem ölçtüğünüzde memoize edin (pahalı bir hesaplama veya çok fazla render alan memoize edilmiş child). Erken `useMemo`/`useCallback` her yerde gürültü ekler ve hatta daha yavaş olabilir. (React 19'un derleyicisi otomatik olarak memoize edebilir, gereksinimi azaltır.)

Neden önemli

Trade-offs — aşırı kullanmayın

İlgili sorular