Kur duhet të përdorësh useMemo dhe useCallback, dhe çfarë problemi zgjidhin?

Question

Accepted Answer

Të dyja ruajnë në cache diçka nëpër renderime në mënyrë që të mos rillogaritet/riiluhet çdo herë:
- **`useMemo`** ruan në cache një **vlerë të llogaritur**.
- **`useCallback`** ruan në cache **identitetin e një funksioni** (është `useMemo(() => fn, deps)`).

Ekzistojnë për të shmangur (a) përsëritjen e punës së shtrenjtë dhe (b) përqarjen e barazisë referenciale që fëmijët e memoizuar varen.

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

## Pse stabilitatea referenciale ka rëndësi

Pa `useCallback`, `handleSelect` është një funksion krejtësisht i ri në çdo renderim. Një `React.memo(Grid)` do të shikonte një rekuizit "të ri" dhe do të renderohet përsëri, duke këputur memoizimin. E njëjta gjë vlen për një objekt të kaluar një fëmije të memoizuar ose të përdorur në një grup varësish `useEffect`.

## Kompromise — mos i përdor tepër

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

- Memoizimi nuk është falas: kushton memorie plus një krahasim të varësish në **çdo** renderim.
- Një grup varësish i gabuar/që mungon të jep **vlera të vjetra** — gabimi më i zakonshëm.
- Memoizo vetëm kur ke matur një problem të vërtetë (një llogaritje e shtrenjtë, ose një fëmijë i memoizuar që rendereshen shumë). `useMemo`/`useCallback` parakohësh kudo shton zhurmë dhe mund të jetë edhe më i ngadalshëm. (Kompajleri React 19 mund të memoizojë automatikisht, duke reduktuar nevojën.)