तपाईले `useMemo` र `useCallback` कहिले प्रयोग गर्नुपर्छ, र तिनीले कस्तो समस्या समाधान गर्छन्?

Question

Accepted Answer

दुवैले कुनै कुरा render भरि cache गर्छन् जसले गर्दा यो हरेक पल recompute/recreate हुँदैन:
- **`useMemo`** ले **computed value** लाई cache गर्छ।
- **`useCallback`** ले **function को identity** लाई cache गर्छ (यो `useMemo(() => fn, deps)` हो)।

तिनीहरु (a) महँगो काम दोहोर्याउनबाट र (b) memoized children हरुले भर पर गरेको referential equality तोड्नबाट बच्नका लागि अस्तित्वमा छन्।

```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 लाई पारिएको 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 गर्नुहोस् जब तपाईले वास्तविक समस्या (महँगो computation, वा मोइहिद भएको child जो धेरै पल re-render हुन्छ) को मापन गरिनुभएको हुनुपर्छ। सर्वत्र प्रारम्भिक `useMemo`/`useCallback` ले शोर थप्छ र गति पनि ढिलो हुन सक्छ। (React 19 को compiler auto-memoize गर्न सक्छ, आवश्यकता घटाउँदै।)