Kada bi trebali koristiti useMemo i useCallback, i koji problem rješavaju?

Question

Accepted Answer

Oboje cachiraju nešto kroz rendera kako se ne bi ponovno izračunalo/kreiralo svaki put:
- **`useMemo`** cachira **izračunanu vrijednost**.
- **`useCallback`** cachira **identitet funkcije** (to je `useMemo(() => fn, deps)`).

Postoje kako bi se izbjeglo (a) ponavljanje skupog posla i (b) slomljenja referentne jednakosti na koju se memorizirani child elementi oslanjaju.

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

## Zašto je stabilnost referenci važna

Bez `useCallback`, `handleSelect` je potpuno nova funkcija svakom renderu. `React.memo(Grid)` bi vidio "novu" prop i ionako bi se ponovno renderirao, poništavajući memoizaciju. Isto za objekt prosljeđen memoriziranom child elementu ili korišten u `useEffect` dependency array.

## Kompromisi — nemojte ih pretjerano koristiti

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

- Memoizacija nije besplatna: košta memoriju plus usporedbu dependencija na **svakom** renderu.
- Pogrešan/nedostajući dependency array daje vam **zastarjele vrijednosti** — najčešća greška.
- Memorizirajte samo kada ste izmjerili stvarni problem (skupo izračunavanje, ili memoriziran child element koji se previše ponovno renderira). Preuranjena `useMemo`/`useCallback` svugdje dodaje buku i može biti čak i sporija. (React 19 kompajler može automatski memorizirati, smanjujući potrebu.)