आपको useMemo और useCallback का उपयोग कब करना चाहिए, और ये किस समस्या को हल करते हैं?

Question

Accepted Answer

दोनों किसी चीज़ को renders के बीच cache करते हैं ताकि हर बार उसे दोबारा compute/recreate न करना पड़े:
- **`useMemo`** एक **computed value** को cache करता है।
- **`useCallback`** एक **function की identity** को cache करता है (यह `useMemo(() => fn, deps)` है)।

ये इसलिए मौजूद हैं ताकि (a) महंगे काम को दोहराने से और (b) referential equality को तोड़ने से बचा जा सके, जिस पर memoized children निर्भर करते हैं।

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

## referential stability क्यों महत्वपूर्ण है

`useCallback` के बिना, `handleSelect` हर render पर एक बिल्कुल नया function होता है। एक `React.memo(Grid)` इसे एक "नया" prop समझकर वैसे भी re-render करेगा, जिससे memoization बेकार हो जाता है। यही बात किसी memoized child को pass किए गए object के लिए या `useEffect` dependency array में उपयोग किए गए object के लिए भी लागू होती है।

## Trade-offs — इन्हें ज़रूरत से ज़्यादा उपयोग न करें

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

- Memoization मुफ़्त नहीं है: इसमें memory खर्च होती है और **हर** render पर एक dependency comparison होता है।
- एक गलत/अनुपस्थित dependency array आपको **stale values** देता है — यह सबसे आम bug है।
- केवल तभी memoize करें जब आपने किसी वास्तविक समस्या को मापा हो (एक expensive computation, या एक memoized child जो बहुत ज़्यादा re-render करता है)। हर जगह समय से पहले `useMemo`/`useCallback` लगाना शोर बढ़ाता है और यह धीमा भी हो सकता है। (React 19 का compiler अपने आप memoize कर सकता है, जिससे इसकी ज़रूरत कम हो जाती है।)