როდის უნდა გამოიყენო useMemo და useCallback, და რა პრობლემას მოჰყავთ ისინი?

Question

Accepted Answer

ორივე ინახავს რამეს რენდერებს შორის, ისე რომ ის ყოველ ჯერზე გადასახელოს/თავიდან არ შეიქმნას:
- **`useMemo`** ინახავს **გამოთვლილ მნიშვნელობას**.
- **`useCallback`** ინახავს **ფუნქციის იდენტობას** (ეს არის `useMemo(() => fn, deps)`).

ისინი აქ არსებობენ იმისთვის, რომ თავიდან აიცილო (a) महँগo სამუშაოს გამეორება და (b) შემოწმებული ტოლობა, რომელზეც დამემოიზებული ბავშვები დამოკიდებულები არიან.

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

## რატომ აქვს მნიშვნელობა ცნობითი სტაბილურობა

`useCallback`-ის გარეშე, `handleSelect` არის სრულიად ახალი ფუნქცია ყოველი რენდერისას. `React.memo(Grid)` დაინახავდა "ახალ" პროპს და გადაიტანიდა ამენდებ, დამემოიზაციის დამარცხვით. იგივე ეხება ობიექტს, რომელიც გადაეცემა დამემოიზებულ ბავშვს ან გამოიყენება `useEffect`-ის დამოკიდებულების მასივში.

## კომპრომისები — არ დაბალით-გამოიყენოთ ისინი

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

- მემოიზაცია უფასო არ არის: ეს ღირს მეხსიერება პლუს დამოკიდებულების შედარება **ყოველ** რენდერზე.
- არასწორი/დაკარგული დამოკიდებულების მასივი გაძლევთ **მოძველებულ მნიშვნელობებს** — ყველაზე გავრცელებული ბაგი.
- დამემოიზე მხოლოდ მაშინ, როდესაც თქვენ გაზომეთ რეალური პრობლემა (महँगო გამოთვლა, ან დამემოიზებული ბავშვი, რომელიც ძალიან ბევრჯერ გადაიტანის). დაუფიქრებელი `useMemo`/`useCallback` ყველგან დაამატებს ხმაურს და შეიძლება იყო კიდეც უფრო ნელი. (React 19-ის კომპილატორი შეუძლია ავტომატურად დამემოიზება, რაც ამცირებს საჭიროებას.)