Mikor kell használni a useMemo-t és a useCallback-et, és milyen problémát oldanak meg?

Question

Accepted Answer

Mindkettő egy-egy dolgot gyorsítótáraz a renderelések között, így nem kell minden alkalommal újraszámítani/újralétrehozni:
- **`useMemo`** egy **számított értéket** gyorsítótáraz.
- **`useCallback`** egy **függvény identitását** gyorsítótáraz (lényegében `useMemo(() => fn, deps)`).

Ezek azért vannak, hogy elkerüljük (a) az ismétlődő drága munkákat és (b) a referenciális egyenlőségek megtörését, amelyekre a memoizált gyermek komponensek támaszkodnak.

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

## Miért fontos a referenciális stabilitás

`useCallback` nélkül a `handleSelect` minden rendereléskor egy teljesen új függvény. A `React.memo(Grid)` egy "új" propsot látna és úgyis újrarenderelne, így a memoizálás elveszne. Hasonló a helyzet, ha egy objektumot adunk át egy memoizált gyermeknek, vagy egy `useEffect` függőségi tömbben használunk.

## Kompromisszumok — ne használd túl

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

- A memoizálás nem ingyenes: memóriaköltsége van és egy függőségi összehasonlítás történik **minden** rendereléskor.
- Egy hibás vagy hiányzó függőségi tömb **elavult értékeket** eredményez — ez a leggyakoribb hiba.
- Csak akkor memoizálj, ha egy valós problémát mértél meg (egy drága számítás, vagy egy memoizált gyermek, amely túl gyakran újrarenderelődik). Az előzetesen alkalmazott `useMemo`/`useCallback` mindenhol csak zajt ad és még lassabb is lehet. (A React 19 fordítója automatikus memoizálást tud végezni, így csökkentve az igényt.)