Kapan Anda harus menggunakan useMemo dan useCallback, dan masalah apa yang mereka selesaikan?

Question

Accepted Answer

Keduanya melakukan caching sesuatu antar renders sehingga tidak dihitung ulang/dibuat ulang setiap kali:
- **`useMemo`** melakukan caching pada **nilai yang dihitung**.
- **`useCallback`** melakukan caching pada **identitas fungsi** (yaitu `useMemo(() => fn, deps)`).

Mereka ada untuk menghindari (a) mengulang pekerjaan yang mahal dan (b) memecahkan kesetaraan referensial yang bergantung pada anak yang di-memoization.

```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} />;
}
```

## Mengapa ini penting

Tanpa `useCallback`, `handleSelect` adalah fungsi baru setiap render. `React.memo(Grid)` akan melihat prop yang "baru" dan tetap akan melakukan re-render, mengalahkan memoization. Hal yang sama untuk objek yang diteruskan ke child yang di-memoization atau digunakan dalam array dependensi `useEffect`.

## Trade-offs — jangan gunakan secara berlebihan

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

- Memoization tidak gratis: memerlukan memori plus perbandingan dependensi pada **setiap** render.
- Array dependensi yang salah/hilang memberikan Anda **nilai ketinggalan zaman** — bug paling umum.
- Hanya lakukan memoization ketika Anda telah mengukur masalah nyata (komputasi yang mahal, atau child yang di-memoization yang melakukan re-render terlalu banyak). `useMemo`/`useCallback` yang diprioritaskan di mana-mana menambah kebisingan dan bahkan bisa lebih lambat. (Compiler React 19 dapat secara otomatis melakukan memoization, mengurangi kebutuhan ini.)