Când ar trebui să folosești useMemo și useCallback, și ce problemă rezolvă?

Question

Accepted Answer

Ambele stochează ceva pe parcursul randărilor, așa că nu este recalculat/recreat de fiecare dată:
- **`useMemo`** stochează o **valoare calculată**.
- **`useCallback`** stochează **identitatea unei funcții** (este `useMemo(() => fn, deps)`).

Ele există pentru a evita (a) repetarea unor lucrări costisitoare și (b) ruperea egalității referenciale pe care copiii memoizați depind.

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

## De ce stabilitatea referencială contează

Fără `useCallback`, `handleSelect` este o funcție complet nouă la fiecare randare. Un `React.memo(Grid)` ar vedea o prop "nouă" și ar continua să se randeze oricum, anulând memoizarea. Același lucru este valabil pentru un obiect trecut unui copil memoizat sau folosit într-un tablou de dependență `useEffect`.

## Compromisuri — nu le suprafolosi

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

- Memoizarea nu este gratuită: costă memorie plus o comparație a dependenței la **fiecare** randare.
- Un tablou de dependență greșit/lipsă te dă **valori învechite** — cel mai frecvent bug.
- Memoizează doar când ai măsurat o problemă reală (un calcul costisitor, sau un copil memoizat care se randează prea mult). `useMemo`/`useCallback` prematur peste tot adaugă zgomot și poate fi chiar mai lent. (Compilatorul React 19 poate auto-memoiza, reducând necesitatea.)