Milloin sinun pitäisi käyttää useMemo:ia ja useCallback:ia, ja mitä ongelmaa ne ratkaisevat?

Question

Accepted Answer

Molemmat välimuistavat jotakin renderöintien yli, joten sitä ei tarvitse laskea/luoda uudelleen joka kerta:
- **`useMemo`** välimuistii **lasketun arvon**.
- **`useCallback`** välimuistii **funktion identiteetin** (se on `useMemo(() => fn, deps)`).

Ne ovat olemassa (a) kalliin työn toistamisen välttämiseksi ja (b) referenssitasapainon rikkomisen välttämiseksi, johon memoized lapsikomponentit luottavat.

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

## Miksi referenssivakaus on tärkeä

Ilman `useCallback`ia `handleSelect` on täysin uusi funktio jokaisella renderöinnillä. `React.memo(Grid)` näkee "uuden" propssin ja renderöi uudelleen joka tapauksessa, mikä poistaa memoivoinnin hyödyn. Sama pätee objektiin, joka välitetään memoized lapsikomponentille tai käytetään `useEffect` riippuvuustaulukossa.

## Kompromissit — älä käytä niitä liikaa

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

- Memoivointi ei ole ilmaista: se maksaa muistia sekä riippuvuusvertailun **jokaisessa** renderöinnissä.
- Väärä/puuttuva riippuvuustaulukko antaa sinulle **vanhentuneita arvoja** — yleisin virhe.
- Memoitoi vain kun olet mitannut todellisen ongelman (kallis laskenta tai memoized lapsikomponentti, joka renderöityy liikaa). Ennenaikainen `useMemo`/`useCallback` kaikkialla lisää melua ja voi olla jopa hitaampi. (React 19:n kääntäjä voi auto-memoida, mikä vähentää tarvetta.)