तुम्ही useMemo आणि useCallback केव्हा वापरावे आणि त्यांनी कोणती समस्या सोडवते?

Question

Accepted Answer

दोन्ही रेंडर्सच्या आपल्या कॅशमध्ये एक गोष्ट ठेवतात जेणेकरून ती प्रत्येक वेळी पुन्हा गणना/पुनर्निर्माण होत नाही:
- **`useMemo`** एक **गणना केलेल्या मूल्य** कॅश करते.
- **`useCallback`** एक **फंक्शनची ओळख** कॅश करते (हे `useMemo(() => fn, deps)` आहे).

ते अस्तित्वात आहेत (a) महाग कामाची पुनरावृत्ती टाळण्यासाठी आणि (b) संदर्भात्मक समानता तोडण्यासाठी जी memoized मुलांवर अवलंबून असते.

```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)` एक "नवीन" prop पाहेल आणि असे ही पुन्हा-रेंडर करेल, memoization अयशस्वी करेल. memoized मुलाला पास केलेल्या ऑब्जेक्टसाठी किंवा `useEffect` dependency array मध्ये वापरल्या गेलेल्या गोष्टीसाठी समान.

## व्यापार-offs — त्यांचा अत्यधिक वापर करू नका

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

- Memoization विनामूल्य नाही: ते स्मृती अधिक एक dependency तुलना खर्च करते **प्रत्येक** रेंडरवर.
- एक चुकीचा/गहाळ dependency array तुम्हाला **stale मूल्य** देते — सर्वात सामान्य बग.
- केवळ memoize करा जेव्हा तुम्ही एक वास्तविक समस्या मोजली आहे (एक महाग गणना, किंवा एक memoized मुल जे खूप पुन्हा-रेंडर करते). सर्वत्र अपक्व `useMemo`/`useCallback` शोर जोडते आणि अगदी हळू असू शकते. (React 19 ची संकलक स्वयंचलित memoization कोडित करू शकते, आवश्यकता कमी करू शकते.)