Kdaj bi moral uporabiti useMemo in useCallback ter kaj rešita?

Question

Accepted Answer

Oba predpomnita kaj-več čez renderiranja, tako da se ne preračunava/ne ponovno ustvari vsakokrat:
- **`useMemo`** predpomnita **izračunano vrednost**.
- **`useCallback`** predpomnita **identiteto funkcije** (je `useMemo(() => fn, deps)`).

Obstajata za to, da se izogneta (a) ponavljanju drage dela in (b) prekinitvi referenčne enakosti, od katere so odvisni memoizirani otroci.

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

## Zakaj je referenčna stabilnost pomembna

Brez `useCallback` je `handleSelect` povsem nova funkcija pri vsakem renderiranju. `React.memo(Grid)` bi videl "novo" lastnost in bi se tako ali tako ponovno renderiral, kar bi premagalo memoizacijo. Enako velja za objekt, poslan memoiziranem otroku ali uporabljen v polju odvisnosti `useEffect`.

## Kompromisi — jih ne pretiravajte

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

- Memoizacija ni brezplačna: stane pomnilnik in primerjavo odvisnosti pri **vsakem** renderiranju.
- Nepravilan/manjkajoč niz odvisnosti ti daje **zastarele vrednosti** — najbolj pogosto napako.
- Memoiziraj samo, če si izmeril pravi problem (drago računanje ali memoizirani otrok, ki se prerenderira premalo). Prezgodnja `useMemo`/`useCallback` povsod dodaja šuma in je lahko celo počasnejša. (Kompilator React 19 lahko samodejna memoizira, kar zmanjšuje potrebo.)