আপনার কখন useMemo এবং useCallback ব্যবহার করা উচিত, এবং তারা কী সমস্যার সমাধান করে?

Question

Accepted Answer

উভয়ই কিছু কিছু renders জুড়ে ক্যাশ করে যাতে এটি প্রতিবার পুনর্গণনা/পুনরায় তৈরি না হয়:
- **`useMemo`** একটি **গণিত মান** ক্যাশ করে।
- **`useCallback`** একটি **ফাংশনের পরিচয়** ক্যাশ করে (এটি `useMemo(() => fn, deps)`)।

তারা বিদ্যমান আছে (ক) ব্যয়বহুল কাজ পুনরাবৃত্তি এড়াতে এবং (খ) রেফারেনশিয়াল সমতা ভাঙতে এড়াতে যা 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` প্রতিটি render এ একটি সম্পূর্ণ নতুন ফাংশন। একটি `React.memo(Grid)` একটি "নতুন" prop দেখবে এবং যাইহোক পুনরায় render করবে, memoization পরাজিত করবে। একটি memoized শিশুতে প্রেরিত একটি অবজেক্টের জন্য বা `useEffect` dependency array এ ব্যবহৃত একটির জন্য একই।

## ট্রেড-অফ - তাদের অতিব্যবহার করবেন না

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

- Memoization বিনামূল্যে নয়: এটি আপনার স্মৃতি প্লাস **প্রতিটি** render এ একটি dependency তুলনা খরচ করে।
- একটি ভুল/অনুপস্থিত dependency array আপনাকে **পুরানো মান** দেয় - সবচেয়ে সাধারণ বাগ।
- শুধুমাত্র memoize করুন যখন আপনি একটি বাস্তব সমস্যা পরিমাপ করেছেন (একটি ব্যয়বহুল গণনা, বা একটি memoized শিশু যা খুব বেশি re-render করে)। সর্বত্র প্রাক্তন `useMemo`/`useCallback` শব্দ যোগ করে এবং এমনকি ধীর হতে পারে। (React 19 এর compiler স্বয়ংক্রিয়ভাবে memoize করতে পারে, প্রয়োজন হ্রাস করে।)