Yaushe kake bukatuwa useMemo da useCallback, kuma waɗannan abubuwa ne ke warwarewa?

Question

Accepted Answer

Duka biyu suna adana wani abu a cikin renders don kada a sake ƙididdige/ƙirowa a kowane lokaci:
- **`useMemo`** yana adana **ƙimantaccen ƙima**.
- **`useCallback`** yana adana **nisbinti na aiki** (itane `useMemo(() => fn, deps)`).

Suna wanzuwa don guje (a) maimaita aiki mai tsada da (b) karya daidai-daidai na kuzari da iyalan tabbatattun abubuwa suna dogara da su.

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

## Me ya sa kwanciyar rai ta kuzari ta bukatar

Ba tare da `useCallback` ba, `handleSelect` aiki ne sabun-sabun a kowane render. `React.memo(Grid)` zai ga yin "sabo" property kuma a sake yin render duk da haka, yana karfe memoization. Daidai gida ga abin da ke jazzada aiki tabbatattun yarar jiya ko aka yi amfani da shi a cikin `useEffect` dependency array.

## Daidaita magudanar yawa — kar a fi yi amfani da su

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

- Adana abubuwa ba kyau ba: yana ruɗi ajiya da kuma tukaice-tukaice na dogara a **kowane** render.
- Array na dogara mai kuskure/rashin ƙaryewar yana ba ku **daidai ƙimomi** — aikin da aka fi gabatarwa.
- Adana ƙimomi ne kawai idan kun auna ainihin matsala (ƙididdige mai tsada, ko iyali tabbatattun da take yin render da yawa sosai). Subukan useMemo/useCallback da duk a gida yana kusan hayaniya kuma yana iya zama a gajiya. (React 19 compiler na iya auto-memoize, yana rage bukatarwa.)