Bilakah anda patut menggunakan useMemo dan useCallback, dan masalah apa yang diselesaikannya?

Question

Accepted Answer

Kedua-duanya menyimpan sesuatu dalam cache merentas render supaya ia tidak dikira semula/dicipta semula setiap kali:
- **`useMemo`** menyimpan **nilai yang dikira** dalam cache.
- **`useCallback`** menyimpan **identiti sesuatu fungsi** dalam cache (ia adalah `useMemo(() => fn, deps)`).

Ia wujud untuk mengelakkan (a) mengulangi kerja yang mahal dan (b) merosakkan kesamaan rujukan (referential equality) yang dipergantungi oleh anak komponen yang dimemoize.

```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 kestabilan rujukan penting

Tanpa `useCallback`, `handleSelect` ialah fungsi yang baharu sepenuhnya pada setiap render. Sebuah `React.memo(Grid)` akan melihat prop "baharu" dan tetap render semula, lalu menggagalkan tujuan memoize itu. Sama juga bagi sesuatu objek yang dihantar kepada anak komponen yang dimemoize atau digunakan dalam array kebergantungan `useEffect`.

## Pertukaran (trade-off) — jangan guna secara berlebihan

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

- Memoize tidak percuma: ia memakan memori serta perbandingan kebergantungan pada **setiap** render.
- Array kebergantungan yang salah/tertinggal memberi anda **nilai basi (stale)** — pepijat yang paling biasa.
- Hanya memoize apabila anda telah mengukur masalah sebenar (pengiraan yang mahal, atau anak komponen yang dimemoize yang render semula terlalu kerap). Penggunaan `useMemo`/`useCallback` yang pramatang di merata-rata menambah hingar dan malah boleh menjadi lebih perlahan. (Pengkompil React 19 boleh auto-memoize, lalu mengurangkan keperluan ini.)