Kada turėtumėte naudoti useMemo ir useCallback, ir kokią problemą jie sprendžia?

Question

Accepted Answer

Abi funkcijos kešuoja kažką per renderavimus, kad tai nebūtų perskaičiuota/perkurta kiekvieną kartą:
- **`useMemo`** kešuoja **apskaičiuotą reikšmę**.
- **`useCallback`** kešuoja **funkcijos identitetą** (tai yra `useMemo(() => fn, deps)`).

Jos egzistuoja tam, kad išvengti (a) pakartojamo brangaus darbo ir (b) nutraukimo atskaitos lygybės, kuria pasikliauNa memoizuoti vaikai.

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

## Kodėl atskaitos stabilumas yra svarbus

Be `useCallback`, `handleSelect` yra visiškai nauja funkcija kiekviename renderavime. `React.memo(Grid)` pamatytų "naują" prop ir bet kuriu atveju iš naujo renduotų, panaikindamas memoizavimą. Tas pats pasakytina apie objektą, perduodamą memoizuotam vaikui, arba naudojamą `useEffect` priklausomybės masyve.

## Kompromisai — nenaudokite jų per daug

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

- Memoizavimas nėra nemokamas: jis kainuoja atmintį ir priklausomybės palyginimą **kiekviename** renderavime.
- Klaidinga/trūkstama priklausomybės masyva suteikia jums **pasenusias reikšmes** — dažniausia klaida.
- Memoizuokite tik tada, kai išmatavote tikrą problemą (brangų skaičiavimą, arba memoizuotą vaiką, kuris per daug renduojasi). Ankstyvas `useMemo`/`useCallback` visur prideda triukšmo ir gali būti net lėtesnis. (React 19 kompiliatorius gali automatiškai memoizuoti, sumažinant poreikį.)