Ni je wakati unapaswa kutumia useMemo na useCallback, na ni shida gani wanazosuluhisha?

Question

Accepted Answer

Zote zinacheza kitu kote hizo rendering ili haisiwi kuandikwa/kutengenezwa mara kwa mara:
- **`useMemo`** inacheza **thamani iliyohesabiwa**.
- **`useCallback`** inacheza **kitambulisho cha kazi** (ni `useMemo(() => fn, deps)`).

Zipo ili kuepuka (a) kurudia kazi ghali na (b) kuvunja usawa wa rejea ambao watoto wanaokamatia hutegemea.

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

## Kwa nini utulivu wa rejea ni muhimu

Bila `useCallback`, `handleSelect` ni kazi mpya kabisa kila wakati wa rendering. `React.memo(Grid)` ingeuona rekebisha "mpya" na bado ingefanya upya, inayoshindikana memoization. Sawa kwa kitu kilichopitishwa kwa mtoto anayekamatia au kutumika katika safu ya `useEffect` dependency.

## Trade-offs — usizitumie kupita kiasi

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

- Memoization si bure: inakadri kumbukumbu pamoja na ulinganishaji wa utegemezi kila **rendering**.
- Safu ya utegemezi isiyo sahihi/inayokosa inakupatia **maadili ya zamani** — hiyo kosa linalojirudia zaidi.
- Chunga tu wakati umepima tatizo halisi (hesabu ghali, au mtoto anayekamatia anayefanya upya kupita kila kitu). Haraka `useMemo`/`useCallback` kote inayoongeza kelele na inaweza kuwa polepole hata. (React 19 compiler inaweza kukamatia kiotomatiki, inayopunguza haja.)