Kapan sampeyan kudu nggunakake useMemo lan useCallback, lan problem apa sing bakal dislesaikan?

Question

Accepted Answer

Loro-lorone ngurung-urung ngilmu liwat renderers supaya ora dicopot maneh saben kali:
- **`useMemo`** ngurung-urung nilai **sing ditung**.
- **`useCallback`** ngurung-urung **identitas fungsi** (iku `useMemo(() => fn, deps)`).

Kaanan ana kanggo ngindhari (a) ngulangi karya sing larang lan (b) nglanggar kesetaraan referensial sing anak-anak sing dikurung-urung ngandelake.

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

## Kenapa stabilitas referensial penting

Tanpa `useCallback`, `handleSelect` yaiku fungsi anyar saben render. A `React.memo(Grid)` bakal ndeleng prop "anyar" lan bakal render maneh, ngalahake memoization. Padha kanggo obyek sing dikirim menyang anak sing dikurung-urung utawa digunakake ing array dependensi `useEffect`.

## Trade-offs — aja overuse

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

- Memoization dudu gratis: iku larang memori plus perbandingan dependensi saben **render**.
- Array dependensi sing salah utawa ilang aweh sampeyan **nilai lawas** — bug sing paling umum.
- Mung kurung-urung nalika sampeyan wis ngukur problema nyata (komputasi sing larang, utawa anak sing dikurung-urung sing nggambar maneh akeh). Prematur `useMemo`/`useCallback` ing ngisor-ngisor nambah suwara lan bisa luwih alon. (Compiler React 19 bisa auto-memoize, ngurangi kabutuhan.)